leaflet - 获取传单 map 放大时的标记列表

Question

我是传单新手。 我已按照以下步骤设置了 map https://github.com/Asymmetrik/ngx-leaflet

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

Answer 1

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

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

要处理缩放事件，请在 map 上注册 zoomend 事件，这样只要 map 上的缩放事件结束，您就会收到回调。您可能还想处理 moveend 。

在这些事件中，根据标记的位置和 map 范围来过滤标记。更新绑定(bind)层数组以包含过滤后的标记。而且，由于您是在 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()));

您可以在此处过滤掉不在 map 当前 View 范围内的所有标记，然后将生成的标记集合设置为新的 map 图层集。