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具有相同的背景颜色（选择最后一种颜色相同），当我返回初始变焦时，我有两种不同的颜色。如果我想在不同的缩放中使用不同的背景颜色，我必须在添加第一个markerClusterGroup之后和添加第二个markerClusterGroup之前转到每个缩放。

有人可以帮我理解这个问题。日Thnx

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

2 个答案: