複数のマルタークラスターグループに異なる色を割り当てる方法は？

Question

私はleaflet.markercluster pluginと一緒に働いていて、マーカをクラスタリングするように機能しています。複数のクラスタグループに特定の色を割り当てることは可能ですか？今、すべてのクラスターマーカーの色はさまざまなレイヤーグループ間で同じで、どのレイヤーがどのレイヤーを表すかを区別することは難しいです。

私はデフォルトのmarkerClusterマーカースタイルを使用したいと思いますが、私は各グループに異なる背景色を割り当てたいと思います。

例：デフォルトのマーカーCSS 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?? */ }); 
    } 
}); 

グループ：

.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. は、最初の2つのステップを一緒に置くなど、.truck-group.marker-cluster-small、.truck-group.marker-cluster-mediumのためにあなたのCSSに

を新しいスタイルを追加します。

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; 
    } 
});