如何更改 ngx-leaflet 上的坐標運行時？

Question

有什么替代方法可以在運行時更改 ngx-leaflet 地圖坐標？ 谷歌地圖可以做到這一點，我正在嘗試對傳單做同樣的事情。

對 LeafletOptions 的更改在初始設置后將被忽略。 這是因為這些選項已傳遞到地圖構造函數中，因此無論如何都無法更改它們。 因此，請確保在創建地圖之前對象存在。 您需要在 ngOnInit 中創建對象或使用 *ngIf 隱藏地圖 DOM 元素，直到您可以創建選項對象。

成分：

  private   options = {
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© OpenStreetMap contributors'
        })
      ],
      zoom: 7,
      center: latLng([ 46.879966, -121.726909 ])
    };

html：

<div style="height: 500px;"
    leaflet
     [leafletOptions]="(options)"
     ></div>

Answer 1

您需要在加載地圖時獲取對地圖的引用，然后使用該引用來更改視圖。

成分

import * as L from 'leaflet';
import {
    latLng,
    tileLayer
} from 'leaflet';

map: L.Map;

options = {
    layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'})
    ],
    zoom: 7,
    center: latLng([ 46.879966, -121.726909 ])
};

// get the reference to the map
onMapReady(map: L.Map) {
    this.map = map;
}

// change the view using that map reference to another location
changeView() {
    this.map.panTo(new L.LatLng(40.737, -73.923));
}

模板

<div style="height: 500px;"
    leaflet 
    [leafletOptions]="options"
    (leafletMapReady)="onMapReady($event)">
</div>

<button (click)="changeView()">Change view</button>

演示