Rumah  >  Artikel  >  hujung hadapan web  >  Tambahkan lapisan tersuai pada risalah embe

Tambahkan lapisan tersuai pada risalah embe

王林
王林asal
2024-09-04 20:30:08393semak imbas

Add custom layer to embe-leaflet

Masalahnya

risalah bara ialah addon yang sangat popular daripada ekosistem EmberJS yang membolehkan banyak fleksibiliti.

Tetapi bagaimana jika saya ingin memanjangkan fungsinya supaya ia boleh melakukan lebih banyak lagi? Dan bagaimana jika saya mahu ia sebagai komponen terhasil baharu terus daripada lapisan s?

Penyelesaiannya

Pada mulanya kami memerlukan komponen baharu kami. Untuk kesederhanaan komponen ini hanya akan memanjangkan komponen lapisan sedia ada dari addon. Mari gunakan komponen penanda dan jadikannya supaya ia hanya mengabaikan hujah lokasi dan menetapkan nilai palsu, berkod keras:

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

Selepas ini kami perlu mendaftarkan komponen dengan perkhidmatan risalah bara:

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

Dan kini kita boleh menggunakannya:

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>

Nota

Anda boleh membaca teknik ini juga di halaman dokumentasi risalah bara api rasmi.

Atas ialah kandungan terperinci Tambahkan lapisan tersuai pada risalah embe. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn