3

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

我想使用默认的 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);
}`
4

1 回答 1

3

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

  1. 不要L.divIcon()从你的函数返回，而是通过调用_defaultIconCreateFunction()你的来获取默认图标markerClusterGroup，例如，trucksGroup._defaultIconCreateFunction(cluster)。
  2. 向该默认图标添加一个新类以表示它所在的组。例如，icon.options.className += ' trucks-group'。
  3. .truck-group.marker-cluster-small在 CSS 中为、.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;
    }
});
于 2017-01-19T20:18:25.047 回答