angular - 使用带有 ngx-leaflet 的 vectorGrid 时的地图滚动性能问题

Question

我正在使用 Leaflet + VectorGrid + ngx-leaflet 在 Angular 应用程序的地图上显示矢量切片。但是，当显示的点太多时，滚动变得非常缓慢且不可能。减少点数可以改善这种情况。

简单地使用 Leaflet + Vectorgrid 时，相同的场景效果很好（plunker），所以我相信在使用 ngx-leaflet 时会发送一些鼠标事件。我该如何改善这种情况？我已经在ngx-leaflet 的演示应用程序上重现了该问题，但无法使其与 plunker 一起使用。

Answer 1

这里可能发生的情况是，您在 Angular 区域内添加了 VectorGrid 层，这意味着 Angular 将在所有已注册的事件回调中添加补丁更改检测挂钩。基本上，您是正确的，因为所有鼠标事件都在向 Angular 的更改检测发送垃圾邮件。

如果您查看 ngx-leaflet 核心指令，您将看到地图是如何在 Angular 区域之外创建的。您想做类似的事情（我没有对此进行测试，但这应该是正确的基本想法）：

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 注意到您在注册到其中一个事件的处理程序中所做的更改时，您必须手动调用更改检测。但是，当您像这样包装非 Angular 库时，这是相当标准的做法。当您希望数据绑定的自动化工作时，这是使事情高效工作的唯一方法。