Angular 将图层组添加到地图并按名称更新

我目前正在使用ngx传单4.0.0和Angular 6.x和RXjs 6.x。我有一堆可观察的生成/流层，应该在地图上绘制

当我们有很多标记时，正如您所料，性能会下降。这可能与以下事实有关：我基本上将所有标记集中到一个数组中，并将其传递给图层

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

blueLayerGroup: L.LayerGroup
redLayerGroup: L.LayerGroup

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

---

我没有使用FloapleMapControl，我们有自己的自定义ui来选择图层。

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

在组件中，只需将两个图层组添加到传单图层阵列：

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传单来同步标记。Ngx传单仅处理图层组本身（如果从图层阵列中添加或删除）

不过，这可能会也可能不会解决您的性能问题。我总是发现超过两百个标记使传单的速度减慢。如果它对你有用，那就有一个。它有助于减少在任何时候实际渲染到地图的标记总数，以提高性能