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

Question

我目前正在使用 Leaflet 进行 map 可视化。图书馆。我也在使用 markercluster插件来聚集我的观点。

所以我现在的问题是:

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

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

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

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

Answer 1

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

有 3 种不同类型的标记，但都应该聚集在一起。棘手的部分是如果您想隐藏/显示特定类型(可能通过图层控制)。

根据每种类型包含的标记数自定义集群外观。

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

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

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

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

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

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

你也可以试试这个插件: q-cluster .但是它没有动画，所以它远不如 MCG 吸引眼球……