問題

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';

注意事項

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