處理很多值的平均值

Question

我通過傳單將具有特定值的標記插入到Openstreetmap中。此外，我希望這些標記在縮小地圖的同時獲取Clusterd。 Clustericon應顯示羣集的平均值。 到目前爲止，沒有問題。我遍歷每個羣集中的所有標記，將這些值相加，然後除以標記的數量。然後我創建一個自定義圖標，根據值取決於顏色，並具有平均值的標籤。這適用於少量標記。問題是，我必須在德國的北部地區插入很多標記。我的意思是像至少50000

在這種情況下，瀏覽器無法加載的頁面。但是，如果我將默認縮放設置爲18，它會加載頁面。在縮小頁面時沒有問題。我粘貼下面我的代碼：

var markers = L.markerClusterGroup({ 
 
\t \t chunkedLoading: true, 
 
\t \t chunkProgress: updateProgressBar, 
 
\t \t showCoverageOnHover: false, 
 
\t \t maxClusterRadius: 100, 
 
\t \t iconCreateFunction : function(cluster) { 
 
\t \t \t var val = 0; 
 
\t \t \t for (i = 0; i < cluster.getAllChildMarkers().length; i++) { 
 
\t \t \t \t val = val 
 
\t \t \t \t \t \t + parseInt(cluster.getAllChildMarkers()[i].options.speed) 
 
\t \t \t } 
 
\t \t \t var avg = val/cluster.getAllChildMarkers().length; 
 
\t \t \t avg = Math.round(avg * 10)/10; 
 
\t \t \t \t \t 
 
\t \t \t 
 
\t \t \t return new L.divIcon({ 
 
\t \t \t \t html: "<div style='background-color: " + generateColor(avg) + "'><span>" + avg + "</span></div>", 
 
\t \t \t \t className: ' marker-cluster', 
 
\t \t \t \t iconSize: new L.point(40, 40) 
 
\t \t \t }) 
 
\t \t } 
 
\t });

現在我需要一個解決方案，使這個地圖功能。

Answer 1

如果沒有適當的案例複製，很難準確地判斷出您的瓶頸。

你可以通過緩存標記陣列至少開始：

function iconCreateFunction(cluster) { 
    var val = 0, 
     childMarkers = cluster.getAllChildMarkers(), // Store in local variable to avoid having to execute it many times. 
     total = childMarkers.length; 

    for (i = 0; i < total; i++) { 
     val = val + parseInt(childMarkers[i].options.speed) 
    } 
    var avg = val/total; 
    avg = Math.round(avg * 10)/10; 


    return new L.divIcon({ 
     html: "<div style='background-color: " + generateColor(avg) + "'><span>" + avg + "</span></div>", 
     className: ' marker-cluster', 
     iconSize: new L.point(40, 40) 
    }) 
}