javascript - 使用markercluster对多个图层进行聚类

Question

我目前正在使用Leaflet库进行地图可视化。我也在使用markercluster插件来聚类我的观点。

所以我现在的问题是：

我在 3 个不同的层中有 3 个不同类别的标记。例如餐厅、咖啡馆和酒吧层。我想将所有活动层组合到一个特定的集群。

目前这些条目是分开聚集的，但我想把它们聚集在一起。

下一步将根据 childMarkers 为集群着色。例如，集群包括餐厅和酒吧标记 => 半红/半绿，仅餐厅 => 仅红色等。

我希望有人可以帮助我找到解决方案。谢谢！

Answer 1

您在问题中提到了 2 个不同的请求：

1. 有 3 种不同类型的标记，但都应该聚集在一起。棘手的部分是如果您想隐藏/显示特定类型（可能通过图层控制）。
2. 根据每种类型包含的标记数自定义集群外观。

至于第 1 点，您显然可以将所有 3 种类型的标记添加到同一个 MarkerClusterGroup 中，以便它们可以聚集在一起。如果您已经将它们放在不同的图层组中，您可以简单地执行此操作myMCG.addLayers([layerGroup1, layerGroup2, layerGroup3]);，MCG 将添加所有单独的标记。但以后不要在地图中添加/删除这些图层组！

困难的部分是当您希望能够从地图中动态添加/删除特定类型的标记时。map.removeLayer(layerGroupX);您需要遍历所有单独的标记并将它们从您的 MCG中删除，而不是仅仅这样做，例如：

layerGroupX.eachLayer(function (marker) {
    myMCG.removeLayer(marker);
});

有关原因和一些额外示例，另请参阅MarkerClusterGroup 插件站点上的此问题。反过来将标记添加回您的 MCG。

编辑：从那时起，我发布了一个Leaflet.FeatureGroup.SubGroup插件，它解决了这个确切的用例。另请参阅使用多个标记聚类组显示重叠聚类

至于第 2 点，只需参考插件文档的自定义集群标记部分。基本上，您iconCreateFunction在初始化 MCG 时使用选项。您传入一个函数，该函数接受一个参数（例如cluster），您可以使用它cluster.getAllChildMarkers();来获取正在设置样式的集群中包含的标记数组。然后简单地遍历这个数组来计算每种标记的数量，并相应地创建一个图标。

你也可以试试这个其他插件：q-cluster。但是它没有动画，所以它远不如 MCG 好看……</p>