使用markercluster群集多个图层

时间:2015-10-15 08:12:01

标签: javascript leaflet leaflet.markercluster

我目前正在使用http://jmeter.apache.org/usermanual/component_reference.html#ForEach_Controller库进行地图可视化。我也使用Leaflet插件来聚集我的观点。

所以我现在的问题如下:

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

目前条目是分开聚集的,但我想将它们聚集在一起。

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

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

1 个答案:

答案 0 :(得分:1)

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

  1. 有3种不同类型的标记,但都应该聚集在一起。如果你想隐藏/显示特定类型(可能通过图层控制),那么棘手的部分就是。
  2. 根据每种类型中包含的标记数量自定义群集外观。
  3. 对于第1点,您显然可以将所有3种类型的标记添加到同一个MarkerClusterGroup,以便它们可以聚集在一起。如果您已将它们放在不同的LayerGroup中,则只需执行myMCG.addLayers([layerGroup1, layerGroup2, layerGroup3]);,MCG将添加所有单个标记。但以后不要在地图上添加/删除这些LayerGroup!

    困难的部分是您希望能够从地图动态添加/删除特定类型的标记。您需要遍历所有单个标记并将其从中删除,而不是仅使用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那么引人注目......