处理大量值的平均值

Question

我通过传单将具有特定值的标记插入到 Openstreetmap 上。此外，我希望这些标记在缩小地图时进行聚类。簇图标应显示簇的平均值。

到目前为止，没有问题。我迭代每个集群中的所有标记，将值加在一起，然后除以标记的数量。然后，我创建一个自定义图标，该图标的颜色取决于值，并具有带有平均值的标签。这对于少量标记非常有用。

问题是，我必须在德国北部地区插入很多标记。我的意思是至少 50000。

在这种情况下，浏览器无法加载页面。但如果我将默认缩放设置为 18，它就会加载页面。并且缩小页面时也没有问题。我将我的代码粘贴在下面：

var markers = L.markerClusterGroup({
        chunkedLoading: true, 
        chunkProgress: updateProgressBar,
        showCoverageOnHover: false,
        maxClusterRadius: 100,
        iconCreateFunction : function(cluster) {
            var val = 0;
            for (i = 0; i < cluster.getAllChildMarkers().length; i++) {
                val = val
                        + parseInt(cluster.getAllChildMarkers()[i].options.speed)
            } 
            var avg = val / cluster.getAllChildMarkers().length;
            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)
            })
        }
    });  

现在我需要一个解决方案来使这张地图发挥作用。

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