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

问题

In the app I'm creating, I dynamically add groups of points to a featureGroup that is referenced in a nested map click event. So the gist is that I have a map of a country with different regions displayed. Clicking a region fits the map bounds to that polygon and reveals points associated with that polygon, let's say cities. Clicking on a single point/city bores down further and reveals another group of points associated with the first clicked point, such as all libraries within the selected city.

The problem is that once my final group of points (libraries) is in a featureGroup (which is necessary due to the nested nature of my click events), I am unable to use fitBounds/getBounds on the group. Here is a minimal example (based on the ngx-leaflet-tutorial-ngcli tutorial):

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(){

  }
}

I used console.log to show the output of the 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

As you can see, no _bounds method available. Is there a way to fitBounds to a featureGroup in ngx-leaflet?

回答1:

As @ghybs pointed out, using getBounds() directly on the feature group actually does work in this example. In my real app, the event was nested, so the key to getting fitBounds() to work was using this.changeDetector.detectChanges() per this documentation.

来源：https://stackoverflow.com/questions/50650386/using-getbounds-fitbounds-on-a-featuregroup-with-ngx-leaflet-in-angular

标签

javascript

angular

leaflet

fitbounds

ngx-leaflet