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中文網其他相關文章！
