多くの値の平均を処理する

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