Ngx-leaflet 传单，angular 来自 zone.js 的 5 很多函数调用

Question

我正在使用 ngx-leaflet，在向地图添加标记时，由于大量的函数调用 (zone.js)，应用程序变慢了。我尝试使用 changeDetection 和 ngZone 但无济于事。请帮助:)

 constructor(zone: NgZone) {}

onMapReady(map: L.Map) {
    this.map = map;
    this.zone.run(() => {
      this.getPoints();
    });
    L.control.scale({position: 'bottomleft'}).addTo(this.map);
    L.control.zoom({position: 'bottomleft'}).addTo(this.map);
    this.createLegend();
  }

 private updateLayers(pointList: Point[]) {
    this.layers = [];
    let group = L.featureGroup();
    for (let point of pointList) {
      if (point.gps) {
        this.zone.run( ()=> {
          let marker: Marker = L.marker([point.gps.latitude, point.gps.longitude], {icon: this.setIcon(point.status)});
          group.addLayer(marker);
          this.setPopupContent(marker, point);
          this.layers.push(marker);
          this.layers = this.layers.slice();
          this.changeDetector.detectChanges();
        });
      }
    }
    if (pointList.length != 0) {
      this.zone.run(()=> {
        this.leafletDirective.getMap().fitBounds(group.getBounds(), {
          padding: [10, 10],
          animate: false,
          duration: 0.01,
          noMoveStart: true});
      });
    }
  }

Answer 1

如果传单指令输出绑定正在调用 onMapReady 函数，则无需在 onMapReady 函数内部使用 zone.run() 。该呼叫将已经在 Angular 区域中。

然后，看起来您正在向特征组添加一堆标记以获得边界框。但是，您还将所有标记添加到图层数组。您可以将 featureGroup 添加到图层数组并稍微简化您的代码。

此外，您可以构建新的层数组，然后运行对 Angular 区域中的层数组进行实际更改。这样，每次更新只调用一次（而不是每个标记调用一次）。

constructor(zone: NgZone) {}

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

  L.control.scale({position: 'bottomleft'}).addTo(this.map);
  L.control.zoom({position: 'bottomleft'}).addTo(this.map);
  this.createLegend();
}

private updateLayers(pointList: Point[]) {
  let group = L.featureGroup();

  pointList.forEach((point: Point) => {
    if (point.gps) {
        let marker = L.marker(
          [point.gps.latitude, point.gps.longitude],
          {icon: this.setIcon(point.status)});
        group.addLayer(marker);
        this.setPopupContent(marker, point);
      }
  });

  if (pointList.length != 0) {
    this.leafletDirective.getMap().fitBounds( group.getBounds(), {
      padding: [10, 10],
      animate: false,
      duration: 0.01,
      noMoveStart: true
    });
  }

  // The change to the input bound layers array is the only thing
  // that needs to be run in the angular zone
  this.zone.run(() => {
    this.layers = [ group ];
  });

}

Ngx-leaflet 传单，angular 来自 zone.js 的 5 很多函数调用

Ngx-leaflet Leaflet, angular 5 lot of Function Call from zone.js

maps

leaflet

zone.js

angular

ngx-leaflet