1

我目前正在使用带有 Angular 6.x 和 RXjs 6.x 的 ngx-leaflet 4.0.0。我有一堆应该在地图上绘制的生成/流式传输的可观察对象。

当我们有很多标记时，如您所料，性能会下降。这可能与我基本上将所有标记连接到一个我传递给leafletLayers 的单个数组中的事实有关。

理想情况下，我只使用其名称添加、删除或更新单个图层组。不幸的是，我不知道如何使用 LayerGroups 作为使用大量标记时的两个性能增强之一。我想使用如下所示的数据结构，这可能吗？

blueLayerGroup: L.LayerGroup
redLayerGroup: L.LayerGroup

{
   "BlueShips": blueLayerGroup,
   "RedShips": redLayerGroup    
}

我没有使用leafletMapControl，我们有自己的自定义用户界面来选择图层。

4

1 回答 1

1

如果您想尝试使用 layerGroups，您可以尝试模拟以下方法：

在您的组件中，只需将两个图层组添加到传单图层数组中：

redLayerGroup = L.layerGroup();
blueLayerGroup = L.layerGroup();
layers = [ blueLayerGroup, redLayerGroup ];

然后，您只需根据需要将图层添加到图层组或从图层组中删除图层：

addLayerToLayerGroup(layer: L.Layer, layerGroup: L.LayerGroup) {
  layerGroup.addLayer(layer);
}

removeLayerFromLayerGroup(layer: L.Layer, layerGroup: L.LayerGroup) {
  layerGroup.removeLayer(layer);
}

这种方法不依赖 ngx-leaflet 来同步标记。Ngx-leaflet 仅处理 layerGroups 本身（如果它们被添加或从 layers 数组中删除）。

不过，这可能会也可能不会解决您的性能问题。我总是发现有几百个标记使 Leaflet 总体上变慢了。如果它对你有用，那么 ngx-leaflet 有一个 Leaflet.markercluster 插件。它有助于减少在任何时候实际渲染到地图的标记总数，以提高性能。

于 2018-09-22T02:43:40.567 回答