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

Posted 2023-05-06

【中文标题】更改传单标记群集图标颜色，继承其余默认 CSS 属性

【英文标题】：Changing leaflet markercluster icon color, inheriting the rest of the default CSS properties

【发布时间】：2018-09-07 08:56:19

【问题描述】：

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

在example 中，有一些类似于我想要得到的东西，但它们定义了一个全新的 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);
    
);

不幸的是，该解决方案不起作用并导致图标呈现丑陋。

我怎样才能改变默认markercluster图标的颜色？

【参考方案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

【讨论】：

你好，这样你就没有默认的气泡图标了。我在原始问题中添加了一张图片以进行澄清。

@floatingpurr 你有你放置的图像的工作示例的链接

是的，你可以找到一个例子here。这是库的默认行为。

你有没有发现如何维护默认气泡等，只更改图标 colo(u)r？

【参考方案2】：

只需在 global.css 或 style.css 文件中添加 CSS 即可

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


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

【讨论】：

这将影响 所有 个集群组。 OP希望一个是默认的，另一个具有不同的颜色（u），以便能够区分。