Ajouter un calque personnalisé au dépliant intégré

Le problème

ember-leaflet est un addon très populaire de l'écosystème EmberJS qui permet beaucoup de flexibilité.

Mais que se passe-t-il si je souhaite étendre ses fonctionnalités pour qu'il puisse faire encore plus ? Et que se passe-t-il si je le souhaite en tant que nouveau composant généré directement à partir des couches  ?

La solution

Dans un premier temps, nous aurons besoin de notre nouveau composant. Pour plus de simplicité, ce composant étendra simplement un composant de couche existant à partir du module complémentaire. Utilisons le composant marqueur et faisons en sorte qu'il ignore simplement l'argument de localisation et définisse une fausse valeur codée en dur :

// 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);
  }
}

Après cela, nous devrons enregistrer le composant auprès du service 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,
};

Et maintenant nous pouvons l'utiliser :

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>

Remarques

Vous pouvez également en savoir plus sur cette technique sur la page de documentation officielle du dépliant de braises.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!