在 angular 中使用带有 ngx-leaflet 的功能组 getBounds/fitBounds

Question

在我正在创建的应用程序中，我将点组动态添加到在嵌套地图单击事件中引用的 featureGroup。所以要点是我有一张显示不同地区的国家地图。单击一个区域会使地图边界适合该多边形并显示与该多边形关联的点，比方说城市。单击单个 point/city 会进一步深入并显示与第一个单击点关联的另一组点，例如所选城市内的所有图书馆。

问题是，一旦我的最后一组点（库）在一个特征组中（由于我的点击事件的嵌套性质，这是必需的），我无法在该组上使用 fitBounds/getBounds .这是一个最小的例子（基于 ngx-leaflet-tutorial-ngcli 教程）：

app.component.html

<div class="map"
  leaflet
  (leafletMapReady)="onMapReady($event)"
  [leafletOptions]="options"></div>

app.component.ts

import { Component, OnInit } from '@angular/core';

import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  googleMaps = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  summit = L.marker([ 46.8523, -121.7603 ], {
    icon: L.icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  });
  paradise = L.marker([ 46.78465227596462,-121.74141269177198 ], {
    icon: L.icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  });

  fGroup = L.featureGroup();

  options = {
    layers: [ this.googleMaps, this.fGroup ],
    zoom: 7,
    center: L.latLng([ 46.879966, -121.726909 ])
  };

  onMapReady(map: L.Map) {
    this.paradise.addTo(this.fGroup);
    this.summit.addTo(this.fGroup);
    console.log(this.fGroup);
  }

  ngOnInit(){

  }
}

我使用 console.log 来显示 featureGroup 的输出：

NewClass {options: {…}, _layers: {…}, _initHooksCalled: true, _leaflet_id: 183, _mapToAdd: NewClass, …}
options: {}
_initHooksCalled: true
_layers: {184: NewClass, 186: NewClass}
_leaflet_id: 183
_map: NewClass {options: {…}, _container: div.map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-…, _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_mapToAdd: NewClass {options: {…}, _container: div.map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-…, _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_zoomAnimated: true
__proto__: NewClass

如您所见，没有 _bounds 方法可用。有没有办法在 ngx-leaflet 中将边界拟合到 featureGroup？

Answer 1

正如@ghybs 指出的那样，直接在特征组上使用 getBounds() 实际上确实在此示例中有效。在我的真实应用程序中，事件是嵌套的，所以让 fitBounds() 工作的关键是使用 this.changeDetector.detectChanges() 每个 this documentation。

在 angular 中使用带有 ngx-leaflet 的功能组 getBounds/fitBounds

Using getBounds/fitBounds on a featureGroup with ngx-leaflet in angular

javascript

fitbounds

leaflet

angular

ngx-leaflet