使用markercluster对多个图层进行聚类答案

【问题标题】：Cluster multiple Layers with markercluster使用markercluster对多个图层进行聚类
【发布时间】：2016-01-13 14:21:57
【问题描述】：

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

所以我现在的问题如下：

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

目前这些条目是单独聚集的，但我想将它们聚集在一起。

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

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

【问题讨论】：

你好，威迪。您问这个问题已经有一段时间了，但是正如您所描述的那样，地图及其功能应该引起很多人的兴趣。如果标记具有多个类别，则将标记聚类并赋予它们多种颜色的可能性似乎非常有趣。
这个答案对你有帮助吗（如果你记得的话，5 年后）？如果是这样，请接受它，以帮助他人。谢谢。
我可以使用 PruneCluster for Leaflet 解决问题。这正是我想要的。不幸的是，我之前对该解决方案的回答已被删除......对此感到抱歉

标签： javascript leaflet leaflet.markercluster

【解决方案1】：

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

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

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

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

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

另请参阅 MarkerClusterGroup 插件站点上的 this issue 了解原因和一些额外示例。反过来将标记添加回您的 MCG。

编辑： 从那时起我发布了一个Leaflet.FeatureGroup.SubGroup 插件，它解决了这个确切的用例。另见Using several Marker Cluster Groups displays overlapping Clusters

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

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

【讨论】：