添加不同颜色的markerClusterGroup

Question

我在地图上工作，我想在 markerClusterGroup 中显示标记，每个 markerClusterGroup 必须有不同的背景颜色。

if (isChecked) {
    color_html=$widget.data('colorhtml');
    add_contacts(file);
}



add_contacts(file){
   my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
        iconCreateFunction: function(cluster) {
            return new L.DivIcon({ 
              html: '<div style="color: white; background: '+color_html+'; border-radius:5px;  text-align: center; font-size: 18px;  box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color_html+'; display: inline-block; vertical-align:middle;">' + cluster.getChildCount() +'</div>',
              iconSize: [0,0]
           });
        },
    }).addTo(map);
}           
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);

我有一个清单，我可以在其中选择要显示的文件。当我检查第一个文件时，markerClusterGroup 以所选背景色显示，当我选择第二个文件时，第二个 markerClusterGroup 以不同的背景色显示，但是当我放大或缩小时，这两个 markerClusterGroup 具有相同的背景颜色（与最后选择的颜色相同）并且当我 return 初始缩放时，我有两种不同的颜色。如果我想在不同的缩放中使用不同的背景颜色，我必须在添加第一个 markerClusterGroup 之后和添加第二个 markerClusterGroup 之前进行每个缩放。

有人可以帮助我理解这个问题。谢谢

Answer 1

解决办法就是放这样的东西

if (isChecked) {
color_html=$widget.data('colorhtml');
add_contacts(file);
}

add_contacts(file){
  my_objects["style_"+file]=style="color: white; background: '+color_html+'; border-radius:5px;  text-align: center; font-size: 18px;  box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color_html+'; display: inline-block; vertical-align:middle;"'

  my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        return new L.DivIcon({ 
          html: '<div '+ my_objects["style_"+file]+'>' + cluster.getChildCount() +'</div>',
          iconSize: [0,0]
       });
    },
}).addTo(map);
}           
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);

Answer 2

您还可以将颜色作为参数添加到您的函数中：

if (isChecked) {
    color_html=$widget.data('colorhtml');
    add_contacts(file, color);
}



add_contacts(file, color){
   my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
        iconCreateFunction: function(cluster) {
            return new L.DivIcon({ 
              html: '<div style="color: white; background: '+color+'; border-radius:5px;  text-align: center; font-size: 18px;  box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color+'; display: inline-block; vertical-align:middle;">' + cluster.getChildCount() +'</div>',
              iconSize: [0,0]
           });
        },
    }).addTo(map);
}           
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);

添加不同颜色的markerClusterGroup

Add markerClusterGroup with different color

leaflet

leaflet.markercluster