Листовка Ngx, угловая, 5 лотов Вызова функции из zone.js

Question

Я использую ngx-листовку, при добавлении маркеров на карту приложение замедляется из-за большого количества вызовов функций (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

Вам не нужно использовать zone.run () внутри функции onMapReady, если эта функция вызывается выходной привязкой директивы листовки.Этот вызов уже будет в угловой зоне.

Затем создается впечатление, что вы добавляете группу маркеров в группу объектов, чтобы получить ограничивающий прямоугольник.Но вы также добавляете все маркеры в массив слоев.Вы можете просто добавить FeatureGroup в массив слоев и немного упростить свой код.

Кроме того, вы можете либо создать новый массив слоев, а затем просто запустить фактическое изменение массива слоев в угловой зоне.Таким образом, он вызывается только один раз за обновление (а не один раз за маркер).

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 ];
  });

}