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()，而是通过调用_defaultIconCreateFunction()上的markerClusterGroup来获取默认图标，例如trucksGroup._defaultIconCreateFunction(cluster)。
在该默认图标中添加一个新类，以表示它所在的组。例如，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组分配不同的颜色？

1 个答案: