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。

在这些事件中，根据标记的位置和地图边界过滤标记。更新绑定图层数组以包含已过滤的标记。而且，由于您在Leaflet回调中进行了这些更改（在Angular区域之外），因此您需要在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()));

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

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

1 个答案: