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>

메모

이 기술에 대한 내용은 공식 엠버 전단지 문서 페이지에서도 읽을 수 있습니다.

위 내용은 embe-leaflet에 사용자 정의 레이어 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!