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

Question

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

我正在尝试获取地图放大区域中的标记列表，这些标记可用于使对象聚焦。我如何在 angular 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()));

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

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

Getting the list of markers when zoomed in leaflet map

leaflet

ngx-leaflet