处理大量值的平均值

Question

我正在通过传单将具有特定值的标记插入 Openstreetmap。此外，我希望这些标记在缩小地图时得到聚集。 Clustericon 应该显示集群的平均值。 到目前为止，没有任何问题。我遍历每个集群中的所有标记，将这些值相加，然后除以标记的数量。然后我创建了一个自定义图标，它的颜色取决于值，并有一个带有平均值的标签。这适用于少量标记。问题是，我必须在德国北部地区插入很多标记。我的意思是至少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)
    })
}