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

Question

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

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

例子：

第一组

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

我还没有尝试过，但这是我建议尝试的方法：

1. 不要从您的函数中返回L.divIcon()，而是通过在您的markerClusterGroup 上调用_defaultIconCreateFunction() 来获取默认图标，例如trucksGroup._defaultIconCreateFunction(cluster)。
2. 为该默认图标添加一个新类以表示它所在的组。例如，icon.options.className += ' trucks-group'。
3. 在 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;
    }
});