如何为多个markercluster组分配不同的颜色？

Question

我正在使用 leaflet.markercluster plugin 并让它工作，以便它聚集我的标记。是否可以为多个集群组分配特定颜色？现在，不同层组之间的所有聚类标记颜色都相同，很难区分哪些层代表哪些。

我想使用默认的 markerCluster 标记样式，但我想为每个组分配不同的背景颜色。

示例：

第 1 组

var trucksGroup = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        return L.divIcon({ /* assign color here?? */ });
    }
});

var carsGroup = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        return L.divIcon({ /* assign color here?? */ });
    }
});

默认标记CSS:

.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 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);
}`

Answer 1

我还没有尝试过这个，但我建议您尝试一下：

不是从您的函数返回 L.divIcon()，而是通过在您的 markerClusterGroup 上调用 _defaultIconCreateFunction() 获取默认图标，例如 trucksGroup._defaultIconCreateFunction(cluster).
向该默认图标添加一个新的 class 以表示它所在的组。例如，icon.options.className += ' trucks-group'。
在 CSS 中为 .truck-group.marker-cluster-small、.truck-group.marker-cluster-medium 等添加新样式

将前两个步骤放在一起：

var trucksGroup = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        var icon = trucksGroup._defaultIconCreateFunction(cluster);
        icon.options.className += ' trucks-group';
        return icon;
    }
});

var carsGroup = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        var icon = carsGroup._defaultIconCreateFunction(cluster);
        icon.options.className += ' cars-group';
        return icon;
    }
});

如何为多个markercluster组分配不同的颜色？

How to assign different colors to multiple markercluster groups?

css

leaflet

leaflet.markercluster