在具有ngx-leaflet的角度的featureGroup中使用getBounds/fitBounds [英] Using getBounds/fitBounds on a featureGroup with ngx-leaflet in angular

问题描述

在我正在创建的应用程序中，我将点的组动态添加到在嵌套地图单击事件中引用的featureGroup中.要点是，我有一张显示了不同地区的国家/地区的地图.点击一个区域即可使地图边界适合该多边形，并显示与该多边形相关的点，比如说城市.在单个点/城市上单击鼠标会进一步消沉，并显示与第一个单击的鼠标点相关的另一组点，例如选定城市内的所有图书馆.

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.

问题在于，一旦我最后的点(库)组位于featureGroup中(由于我的click事件的嵌套性质，这是必需的)，我将无法在该组上使用fitBounds/getBounds.这是一个最小的示例(基于ngx-leaflet-tutorial-ngcli教程):

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

  }
}

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

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

如您所见，没有可用的_bounds方法.有没有办法让ngx-leaflet中的featureGroup适应fitBounds?

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

推荐答案

正如@ghybs所指出的，在此示例中，直接在要素组上直接使用getBounds()实际上是起作用的.在我的真实应用程序中，该事件是嵌套的，因此使fitBounds()正常工作的关键是根据每个

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.

这篇关于在具有ngx-leaflet的角度的featureGroup中使用getBounds/fitBounds的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！