leaflet - 放大传单地图时获取标记列表

Question

我是传单的新手。我已经按照https://github.com/Asymmetrik/ngx-leaflet上的步骤设置了地图

我正在尝试获取地图放大区域中的标记列表，这些标记列表可用于使对象聚焦。如何使用角度 4 中的 ngx-leaflet 执行此操作？

Answer 1

首先，在 上设置一个处理程序，(leafletMapReady)以便您可以获取对地图的引用。在onMapReady中，您可以将对地图的引用存储在组件中，以便以后使用。

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

要处理缩放事件，请在地图上注册该zoomend事件，这样每当缩放事件在地图上结束时，您都会收到回调。你可能也想处理moveend。

在这些事件中，根据标记的位置和地图边界过滤标记。更新绑定层数组以包含过滤后的标记。而且，由于您是在 Angular 区域之外的 Leaflet 回调中进行这些更改，因此您需要在 Angular 的区域 - 中运行更改this.zone.run(...)。

请参阅此完整示例：

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

import { icon, latLng, Layer, Map, marker, Marker, point, polyline, tileLayer } from 'leaflet';

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

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

  markers: Marker[] = [
    marker([ 45, -121 ], { icon: this.createIcon() }),
    marker([ 46, -121 ], { icon: this.createIcon() }),
    marker([ 47, -121 ], { icon: this.createIcon() }),
    marker([ 48, -121 ], { icon: this.createIcon() }),
    marker([ 49, -121 ], { icon: this.createIcon() })
  ];

  layers: Layer[] = [];
  map: Map;

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

  constructor(private zone: NgZone) {}

  createIcon() {
    return icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    });
  }

  updateMarkers() {
    this.zone.run(() => {
      this.layers = this.markers.filter((m: Marker) => this.map.getBounds().contains(m.getLatLng()));
    });
  }

  onMapReady(map: Map) {
    this.map = map;

    this.map.on('moveend', this.updateMarkers.bind(this));
    this.map.on('zoomend', this.updateMarkers.bind(this));

    this.updateMarkers();
  }

}

这是上述摘录的关键部分：

this.layers = this.markers.filter((m: Marker) => this.map.getBounds().contains(m.getLatLng()));

在这里，您将过滤掉不在地图当前视图范围内的所有标记，然后将生成的标记集合设置为新的地图图层集。