標記集羣小冊子：動態修改圖標

我正在使用Leaflet和標記集羣插件，並且想要動態修改子集內部的集羣圖標。標記集羣小冊子：動態修改圖標

首先我創建我的clusterGroups，然後添加一些標記。我創建了兩個組，但只顯示第一個「集羣」，如果他的一個子集也屬於組「ClusterBatterieFaible」，我想編輯此圖標。

我的代碼工作，但不想做我想要的：在函數iconCreateFunction我想計算「ClusterBatterieFaible」的標記，但我不知道如何將它作爲參數發送。有什麼建議嗎？

var ClusterBatterieFaible = L.markerClusterGroup({ }); 

var cluster = L.markerClusterGroup({ 
iconCreateFunction: function (cluster) { 
    var childCount = cluster.getChildCount(); 
    if (childCount > 1){ 
     var c = ' marker-cluster-large'; 
    } 
    else { 
     var c = ' marker-cluster-small'; 
    } 
    return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) }); 
} 

}); 

For loop 
    if batteryOk :  
    L.marker(latlng, {icon: mainIconE}).bindPopup("blabla");} }).addTo(cluster) 

    if batteryNotOk : 
    L.marker(latlng, {icon: mainIconE}).bindPopup("blabla");} }).addTo(ClusterBatterieFaible).addTo(cluster)

來源

2015-11-03 Bameza

Bienvenue sur SO！

避免將您的標記添加到多個MarkerClusterGroups（MCG）。這將打破他們的集羣，因爲他們將「混淆」標記屬於哪個集羣。

取而代之，您可以簡單地使用一組標記或一個L.LayerGroup，將您的標記添加到其中（但不要將其添加到地圖中！），對於要測試的組（如果我的理解是「batteryNotOk」是正確的）。並且只將剩餘的MCG添加到地圖中。

要測試一個給定的標記是否包含在一個數組中，只需使用myArray.indexOf(marker) >= 0。

要測試一個給定的標誌已經在圖層組被添加，只需使用myLayerGroup.hasLayer(marker)

所以你iconCreateFunction將是這樣的：

function (cluster) { 
    var markers = clusters.getAllChildMarkers(), 
     iconClass = "allBatteriesOk"; 

    for (var i = 0; i < markers.length; i += 1) { 
     if (myArray.indexOf(markers[i]) >= 0) { 
      iconClass = "atLeastOneBatteryNotOk"; 
      break; 
     } 
    } 

    return L.divIcon({ 
     html: '<div><span>' + childCount + '</span></div>', 
     className: iconClass, 
     iconSize: new L.Point(40, 40) 
    }); 
}

來源

2015-11-03 15:52:41 ghybs

好感謝的答案，最好先用數組！我不得不定製它，因爲我使用geoJson來創建我的標記。

我不是JavaScript專家，但我的代碼正在工作。這是我的完整代碼，適合任何需要它的人。

var lowBatt = []; 
var cluster = L.markerClusterGroup({ 
    iconCreateFunction: function (cluster) { 
     var iconClass = "marker-cluster marker-cluster-small"; 
     var markers = cluster.getAllChildMarkers(); 

     for (var i = 0; i < markers.length; i += 1) { 
      if (lowBatt.indexOf(markers[i]) >= 0) { 
       iconClass = "marker-cluster marker-cluster-large"; 
       break; 
      } 
     } 

     return new L.DivIcon({ html: '<div><span>' + cluster.getChildCount() + '</span></div>', 
           className: iconClass, 
           iconSize: new L.Point(40, 40) }); 
    } 
});

For循環：

coords = geojsonFeature.geometry.coordinates; 
    var temp = coords[1]; 
    coords[1]=coords[0]; 
    coords[0]=temp; 

    var m = L.marker(coords, {icon: lowBattIconE}); 
    L.geoJson(geojsonFeature, { 
     pointToLayer: function (feature, latlng) { 
      return m.bindPopup("blabla");} 
    }).addTo(cluster).addTo(group); 
    lowBatt.push(m);

來源

2015-11-04 13:40:54 Bameza

標記集羣小冊子：動態修改圖標

回答

相關問題