添加图层组以按名称映射和更新

Question

我目前正在将ngx-leaflet 4.0.0与Angular 6.x和RXjs 6.x结合使用。我有一堆可观察到的东西，它们会生成/流化应在地图上绘制的图层。

当我们有很多标记时，如您所料，性能会下降。这可能与以下事实有关：我基本上将所有标记合并为一个数组，然后传递给leafletLayers。

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

blueLayerGroup: L.LayerGroup
redLayerGroup: L.LayerGroup

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

我没有使用leafletMapControl，我们有用于选择图层的自定义ui。

Answer 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数组中添加或删除的）。

这可能会或可能不会解决您的性能问题。我总是发现，通常有超过200个标记使Leaflet变慢。如果适合您，则有一个Leaflet.markercluster plugin for ngx-leaflet。它有助于随时减少实际渲染到地图上的标记总数，从而提高性能。