使用markercluster群集多个图层 [英] Cluster multiple Layers with markercluster

查看:317
本文介绍了使用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.

所以我现在的问题是:

我在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中,以便它们可以聚在一起.如果您已经将它们放在不同的LayerGroups中,则只需执行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点,只需参考

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群集多个图层的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆