更改传单标记簇图标颜色，继承其余默认 CSS 属性

Question

因此，我正在尝试更改传单地图中标记簇图标的颜色。我只想更改继承其余默认属性（即形状、文本属性等）的颜色。

在这个示例中，有一些与我想要的类似的东西，但是他们定义了一个全新的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

Answer 2

非常简单，只需在您的 global.css 或 style.css 文件中添加 CSS 即可

.marker-cluster-small {
  background-color: #49afa5 !important;
}

.marker-cluster-small div {
  background-color: #1c9489 !important;
  color: #fff !important;
}