如何在ngx-leaflet上更改坐标运行时？

Question

有什么替代方法可以在运行时更改ngx-leaflet map坐标？这可以使用谷歌地图，我正在尝试使用传单。

最初设置后，将忽略对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>

Demo