問題描述
我目前正在使用 Leaflet 庫(kù)進(jìn)行地圖可視化.我也在使用 markercluster 插件來聚類我的觀點(diǎn).
I am currently working on a map visualization with the Leaflet library. I am also using the markercluster plugin to cluster my points.
所以我現(xiàn)在的問題如下:
So my question now is the following:
我在 3 個(gè)不同的層中有 3 個(gè)不同類別的標(biāo)記.例如餐廳、咖啡館和酒吧層.我想將所有活動(dòng)層組合到一個(gè)特定的集群.
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.
目前這些條目是單獨(dú)聚集的，但我想將它們聚集在一起.
At the moment the entries are clustered separately but I want to cluster them together.
下一步是根據(jù) childMarkers 為集群著色.例如.集群包括餐廳和酒吧標(biāo)記 => 半紅/半綠，僅餐廳 => 僅紅色等.
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 個(gè)不同的請(qǐng)求:
You mention 2 different requests in your question:
- 有 3 種不同類型的標(biāo)記，但都應(yīng)該聚集在一起.棘手的部分是如果您想隱藏/顯示特定類型(可能通過圖層控制).
- 根據(jù)每種類型包含的標(biāo)記數(shù)自定義集群外觀.
至于第 1 點(diǎn)，你顯然可以將所有 3 種類型的標(biāo)記添加到同一個(gè) MarkerClusterGroup 中，這樣它們就可以聚集在一起.如果您已經(jīng)將它們放在不同的圖層組中，您可以簡(jiǎn)單地執(zhí)行 myMCG.addLayers([layerGroup1, layerGroup2, layerGroup3]); 并且 MCG 將添加所有單獨(dú)的標(biāo)記.但是以后不要在地圖中添加/刪除這些圖層組！
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!
困難的部分是當(dāng)您希望能夠從地圖中動(dòng)態(tài)添加/刪除特定類型的標(biāo)記時(shí).除了map.removeLayer(layerGroupX);，您還需要遍歷所有單獨(dú)的標(biāo)記并將它們從您的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);
});
另請(qǐng)參閱 MarkerClusterGroup 插件網(wǎng)站上的 此問題原因和一些額外的例子.反過來將標(biāo)記添加回您的 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.
我已經(jīng)發(fā)布了一個(gè)Leaflet.FeatureGroup.SubGroup 插件，它解決了這個(gè)確切的用例.另請(qǐng)參閱使用多個(gè)標(biāo)記集群組顯示重疊集群
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點(diǎn)，簡(jiǎn)單參考自定義插件文檔的集群標(biāo)記部分.基本上，您在初始化 MCG 時(shí)使用選項(xiàng) iconCreateFunction.您傳入一個(gè)函數(shù)，該函數(shù)采用單個(gè)參數(shù)(例如 cluster)，您可以使用 cluster.getAllChildMarkers(); 來獲取集群中包含的標(biāo)記數(shù)組風(fēng)格.然后簡(jiǎn)單地遍歷這個(gè)數(shù)組來計(jì)算每種標(biāo)記的數(shù)量，并相應(yīng)地創(chuàng)建一個(gè)圖標(biāo).
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.
你也可以試試這個(gè)其他插件:q-cluster.但是它沒有動(dòng)畫，所以它遠(yuǎn)不如 MCG 好看……
You could also try this other plugin: q-cluster. But it does not animate, so it is far less eye-candy than MCG…
這篇關(guān)于使用markercluster對(duì)多個(gè)圖層進(jìn)行聚類的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！