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

Question

有什么替代方法可以在运行时更改 ngx-leaflet 地图坐标？ google 地图可以做到这一点，我正在尝试对传单做同样的事情。

Changes to leafletOptions are ignored after they are initially set. This is because these options are passed into the map constructor, so they can't be changed anyways. So, make sure the object exists before the map is created. You'll want to create the object in ngOnInit or hide the map DOM element with *ngIf until you can create the options object.

组件：

  private   options = {
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; 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: '&copy; 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

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

How to change coordinates runtime on ngx-leaflet?

angular

typescript

leaflet

maps

ngx-leaflet