将自定义层添加到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中文网其他相关文章！