Question

我通过传单将具有特定值的标记插入到Openstreetmap中。此外，我希望那些标记在缩小地图时获得群集。 Clustericon应显示群集的平均值。到目前为止，没有问题。我遍历每个群集中的所有标记，将值一起添加，然后除以标记的数量。然后我创建一个自定义图标，它取决于值的颜色，并具有平均值的标签。这适用于少量标记。问题是，我必须在德国北部地区插入大量标记。我的意思是至少50000。

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

＆＃13;

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

＆＃13;

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

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

处理很多值的平均值

1 个答案: