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

问题描述

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

I am currently working on a map visualization with the Leaflet library. I am also using the markercluster plugin to cluster my points.

所以我现在的问题如下:

So my question now is the following:

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

I have 3 different categories of Markers in 3 different layers. For example Restaurants, Cafes and Bars Layers. And I want to combine all active Layers to a specific cluster.

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

At the moment the entries are clustered separately but I want to cluster them together.

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

The next step would be coloring the cluster according to the childMarkers. E.g. cluster includes restaurant and bar markers => half red/ half green, only restaurants => only red etc.

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

I hope somebody can help me to get to a solution. Thank you!

推荐答案

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

You mention 2 different requests in your question:

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

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

As for point 1, you can obviously add all 3 types of markers to the same MarkerClusterGroup, so that they can cluster together. If you already have them within different LayerGroups, you can simply do myMCG.addLayers([layerGroup1, layerGroup2, layerGroup3]); and MCG will get all individual markers added. But refrain from adding/removing those LayerGroups to/from the map later!

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

The difficult part is when you want to be able nevertheless to dynamically add / remove a specific type of markers from the map. Instead of doing just map.removeLayer(layerGroupX);, you would need to loop through all individual markers and remove them from your MCG, for example:

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

另请参阅 MarkerClusterGroup 插件网站上的 此问题原因和一些额外的例子.反过来将标记添加回您的 MCG.

See also this issue on MarkerClusterGroup plugin site for the reasons and some extra examples. Do the reverse for adding markers back into your MCG.

我已经发布了一个Leaflet.FeatureGroup.SubGroup 插件，它解决了这个确切的用例.另请参阅使用多个标记集群组显示重叠集群

I have published a Leaflet.FeatureGroup.SubGroup plugin since then, which addresses this exact use case. See also Using several Marker Cluster Groups displays overlapping Clusters

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

As for point 2, simply refer to the Customising the Clustered Markers section of the plugin documentation. Basically, you use option iconCreateFunction when initializing your MCG. You pass in a function, which takes a single argument (e.g. cluster) and you can use cluster.getAllChildMarkers(); to get the array of contained markers in the cluster being styled. Then simply iterate through this array to count the number of each type of markers, and create an icon accordingly.

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

You could also try this other plugin: q-cluster. But it does not animate, so it is far less eye-candy than MCG…

这篇关于使用markercluster对多个图层进行聚类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！