12簇，12個不同的圖標使用傳單庫的Javascript

Question

我想在地圖上顯示點/標記。有12個點的羣集，每個羣集應該有一個獨特的標記/圖標。

在這個example我已經在兩個集羣上顯示樣本數據，每個集羣都有自己的圖標。目前，每個集羣只有3-4個點。實際數據在每個羣集中包含100-200個點，所以顯然該解決方案不是最佳的。我想更容易閱讀12個羣集。考慮使用類語句，爲每個類（=集羣）分配一個圖標。不知道如何開始。

var map = L.map("map"); 

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 

map.setView([48.87, 2.35], 12); 

//STEP 1 
var leafIcons = L.Icon.extend({ 
    options: { 
     //shadowUrl: 'leaf-shadow.png', 
     iconSize:  [100, 100], 
     //shadowSize: [50, 64], 
     iconAnchor: [22, 94], 
     //shadowAnchor: [4, 62], 
     popupAnchor: [-3, -76] 
    } 
}); 

//STEP 2 
var greenIcon = new leafIcons({iconUrl: 'http://www.marchigiana.org.br/home/images/Diversas/Map-Marker-Marker-Outside-Chartreuse-icon.png'}), 
    blueIcon = new leafIcons({iconUrl: 'http://maps.google.com/mapfiles/ms/icons/blue.png'}); 

//STEP 3 
L.icon = function (options) { 
    return new L.Icon(options); 
}; 


//Green icon cluster 
L.marker([48.90, 2.35], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf."); 
L.marker([48.90, 2.36], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf."); 
L.marker([48.89, 2.34], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf."); 

//Blue icon cluster 
L.marker([48.84, 2.35], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon"); 
L.marker([48.85, 2.35], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon"); 
L.marker([48.84, 2.34], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon"); 
L.marker([48.83, 2.36], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon"); 

任何想法的方法？

Answer 1

實際上，在您的地圖上同時存在數百個點會使其不能真正讀取，並且會顯着減慢訪問者的瀏覽器速度。

如果我理解正確，除了數字之外，您還希望能夠區分不同類型的圖標（「羣集」）？

要減少同時顯示的點數，可以使用一些clustering plugin。

例如，與Leaflet.markercluster您可以創建1 L.markerClusterGroup每類分/集羣，使他們聚集只是相互（而不是幾種類型中），確定各組自定義組圖標（參見如何customize them/demo/demo source）

的JavaScript：

var mcgGreen = L.markerClusterGroup({ 
    iconCreateFunction: function(cluster) { 
    return L.divIcon({ 
     html: cluster.getChildCount(), 
     className: 'mycluster', 
     iconSize: L.point(40, 40) 
    }); 
    } 
}).addTo(map); 
var mcgBlue = L.markerClusterGroup({ 
    iconCreateFunction: function(cluster) { 
    return L.divIcon({ 
     html: cluster.getChildCount(), 
     className: 'mycluster mycluster-blue', 
     iconSize: L.point(40, 40) 
    }); 
    } 
}).addTo(map); 

L.marker([48.90, 2.35], { 
    icon: greenIcon 
}).addTo(mcgGreen); 

L.marker([48.84, 2.35], { 
    icon: blueIcon 
}).addTo(mcgBlue); 

CSS：

.mycluster { 
    width: 40px; 
    height: 40px; 
    background-color: greenyellow; 
    text-align: center; 
    font-size: 24px; 
} 

.mycluster-blue { 
    background-color: blue; 
} 

演示：https://jsfiddle.net/g1bh6sr1/2/