將自訂層新增至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中文網其他相關文章！