将vectorGrid与ngx-leaflet配合使用时的地图滚动性能问题

Question

我正在使用Leaflet + VectorGrid + ngx-leaflet在一个Angular应用程序中显示地图上的矢量瓦片。然而，当显示太多的点时，滚动就会变得非常迟缓和不可能。减少点数可以改善这种情况。

当使用Leaflet + Vectorgrid时，同样的场景效果很好(plunker)，所以我相信当使用ngx-leaflet时，会有一些鼠标事件被垃圾邮件处理。我如何才能改善这种情况？我已经在demo app from ngx-leaflet上重现了这个问题，但不能用plunker来解决。

Answer 1

这里可能发生的情况是，您在Angular Zone中添加了VectorGrid层，这意味着Angular将把更改检测钩子添加到所有已注册的事件回调中。基本上，你是正确的，所有的鼠标事件都是垃圾邮件的角度的变化检测。

如果您查看ngx-leaflet core指令，您将看到如何在角度区域之外创建映射。你想做一些类似的事情(我没有测试，但这应该是正确的基本想法)：

constructor(private zone: NgZone) {}
...
onMapReady(map: any) {
  // noinspection JSUnusedGlobalSymbols
  const vectorTileOptions = {
    vectorTileLayerStyles: {
      "cities-point": (p: any) => this.stylingFunction(p)
    },
    interactive: true
  };


  // Create outside of angular so the events don't trigger change detection
  this.zone.runOutsideAngular(() => {
    L.vectorGrid.protobuf(
      "http://localhost:9999/maps/batimap/{z}/{x}/{y}.vector.pbf",
      vectorTileOptions
    ).addTo(map);
  });
}

这里唯一的技巧是，当您真的希望Angular注意到您在注册到这些事件之一的处理程序中所做的更改时，您必须手动调用更改检测。但是，当您像这样包装非角度库时，这是相当标准的做法。当你想让数据绑定的自动化工作时，这是让事情高效工作的唯一方法。