カスタムレイヤーをembe-leafletに追加

問題

ember-leaflet は、多くの柔軟性を可能にする EmberJS エコシステムの非常に人気のあるアドオンです。

しかし、さらに多くのことができるように機能を拡張したい場合はどうすればよいでしょうか?そして、それを のレイヤーから直接新たに生成されたコンポーネントとして使用したい場合はどうすればよいでしょうか?

解決策

最初に、新しいコンポーネントが必要になります。簡単にするために、このコンポーネントはアドオンの既存のレイヤー コンポーネントを拡張するだけです。マーカー コンポーネントを使用して、位置引数を無視して偽のハードコードされた値を設定するようにしましょう:

// app/components/fake-marker-layer.gts

import MarkerLayer from 'ember-leaflet/components/marker-layer';

export default class FakeMarkerLayer extends MarkerLayer {
  get location() {
    return this.L.latLng(46.68, 7.85);
  }
}

この後、コンポーネントを ember-leaflet サービスに登録する必要があります:

// app/instance-initializers/leaflet.ts

import FakeMarkerLayer from '../components/fake-marker-layer';
import type Owner from '@ember/owner';

export function initialize(owner: Owner) {
  const emberLeafletService = owner.lookup('service:ember-leaflet');

  if (emberLeafletService) {
    emberLeafletService.registerComponent('fake-marker-layer', {
      as: 'fake-marker',
      component: FakeMarkerLayer,
    });
  }
}

export default {
  initialize,
};

そして、これを使用できるようになりました:

import LeafletMap from 'ember-leaflet/components/leaflet-map';

<template>
  <LeafletMap
    @lat={{46.6}}
    @lng={{7.8}}
    @zoom={{15}}
    as |layers|
  >
    <layers.fake-marker @lat={{999.99}} @lng={{0}} />
  </LeafletMap>
</template>

注意事項

このテクニックについては、公式 ember-leaflet ドキュメント ページでも読むことができます。

以上がカスタムレイヤーをembe-leafletに追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。