Das Problem

ember-leaflet ist ein sehr beliebtes Add-on aus dem EmberJS-Ökosystem, das viel Flexibilität bietet.

Aber was ist, wenn ich die Funktionalität erweitern möchte, damit es noch mehr kann? Und was ist, wenn ich es als neu erzeugte Komponente direkt aus den Ebenen der haben möchte?

Die Lösung

Zuerst benötigen wir unsere neue Komponente. Der Einfachheit halber erweitert diese Komponente lediglich eine vorhandene Ebenenkomponente des Add-Ons. Lassen Sie uns die Markierungskomponente verwenden und sie so gestalten, dass sie das Standortargument einfach ignoriert und einen gefälschten, fest codierten Wert festlegt:

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

Danach müssen wir die Komponente beim Ember-Leaflet-Service registrieren:

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

Und jetzt können wir es verwenden:

import LeafletMap from 'ember-leaflet/components/leaflet-map';

Notizen

Sie können diese Technik auch auf der offiziellen Ember-Broschüren-Dokumentationsseite nachlesen.