처리 많은 값의 평균

Question

특정 가치가있는 마커를 리플릿을 통해 Openstreetmap에 삽입합니다. 더 나아가지도를 축소하는 동안 Markers가 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) 
    }) 
}