更改传单标记集群图标颜色,继承其余的默认CSS属性

Question

所以,我正在尝试更改传单地图中的markercluster图标的颜色.我只想更改继承其余默认属性的颜色(即形状,文本属性等).

在这个例子中,有类似于我想要的东西,但它们定义了一个全新的CSS类,而没有使用默认的图标样式.我需要的是这样的东西,但有自定义颜色:

我知道我必须自定义iconCreateFunction.我正在尝试这种方式:

CSS

.foo { background-color: red;}
.bar { background-color: blue;}

JavaScript的

var markers = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        // here there is a piece code that determines the value of the variable 'class_name' is either foo or bar
        return L.divIcon({ className: "marker-cluster-medium "+class_name});
    }
});

不幸的是,该解决方案不起作用并导致丑陋的图标渲染.

如何更改默认标记集群图标的颜色？

Answer 1

你 iconCreateFunction应该看看这样的事情

iconCreateFunction: function (cluster) {
 var childCount = cluster.getChildCount();
 var c = ' marker-cluster-';
 if (childCount < 10) {
   c += 'small';
 } 
 else if (childCount < 100) {
   c += 'medium';
 } 
 else {
   c += 'large';
 }

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

并给css这样的东西

.marker-cluster-small {
background-color: rgba(218, 94, 94, 0.6);
}
.marker-cluster-small div {
background-color: rgba(226, 36, 36, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}

请参阅下面的plunker以获取完整的工作示例

https://plnkr.co/edit/GvDbB1rzIZ4bvIkQjM0p?p=preview