处理很多值的平均值

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