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中文网其他相关文章！
