Question

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

当仅使用Leaflet + Vectorgrid时，相同的方案效果很好（plunker），因此，我相信当与ngx-leaflet一起使用时，某些鼠标事件会被发送垃圾邮件。我该如何改善情况？我已经在demo app from 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库时，这是相当标准的做法。当您希望自动进行数据绑定时，这是使事情高效运行的唯一方法。

将vectorGrid与ngx-leaflet一起使用时地图滚动性能问题

1 个答案: