Angular 将vectorGrid与ngx传单一起使用时地图滚动性能问题

我使用传单+矢量栅格+ngx传单在Angular应用程序中在地图上显示矢量瓷砖。然而，当显示太多的点时，滚动会变得非常缓慢和不可能。减少点数可以改善这种情况

---

当使用简单的传单+矢量网格时，同样的场景效果非常好（），所以我相信当使用ngx传单时，会有一些鼠标事件被垃圾发送。我怎样才能改善这种情况？我在上重现了该问题，但无法使其与plunker一起工作。

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

如果查看ngx传单核心指令，您将看到如何在角度区域之外创建贴图。您想做类似的事情（我没有测试，但这应该是正确的基本想法）：

---

这里唯一的诀窍是，当您确实想要注意到您在注册到其中一个事件的处理程序中所做的更改时，必须手动调用更改检测。但是，当您像这样包装非角度库时，这是相当标准的做法。当您希望数据绑定的automagic正常工作时，这是使事情高效工作的唯一方法。

这个想法看起来不错，但它并不能解决问题。似乎仍有一些事件被垃圾邮件（？）。我不知道如何处理这个问题——而且，如果在angular应用程序（内部）旁边，它也开始滞后。所以我认为angular正在监听这些事件，而它不应该监听这些事件？我开始分析这个问题，我发现

mouseup

event是性能不佳的原因。它会触发整个应用程序的重新部署。ngx传单中是否存在禁用/不收听的问题？

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