Question

我有5万个帐户，必须在地图上显示为标记。如果我只要求最多2万个帐户，但对于大量帐户页面，则无响应，一切都很好。我发现遍历所有对象数组花费的时间太长。但是我不知道如何进一步优化代码。

循环中的元素并没有真正影响循环的遍历。我在运行时没有任何内容，但仍然需要花费相同的时间才能变得无响应。问题在于元素太多。

更新：我使用markerCluster对所有标记进行聚类。我使用画布以便更快地渲染。我也读到addLayers比addLayer好，这就是为什么我使用普通列表添加所有元素并且仅在将其添加到markerClusterGroup之后的原因。地图是自动更新的，因为即使我添加了markersGroup，即使放在首位为空，地图也会注意到对该组的任何修改（默认情况下它具有观察者）。

当我测试时，我只是看到for太慢了。地图来自传单

提前谢谢

var map = L.map('map', {zoomControl: true, tap: false, preferCanvas:true});
    var accounts = event.getParam('accounts');

    var markerList = [];
    //create a group of markers in order to have control over markers from map
    var myRenderer = L.canvas({ padding: 0.5 }); 
    var markers = L.markerClusterGroup( { 
        chunkedLoading: true,
        renderer: myRenderer,
        iconCreateFunction: function  (cluster) {
        var childCount = cluster.getChildCount();

        var c = ' marker-cluster-';
        if (childCount < 10) {
            c += 'small';
        } 
        else if (childCount < 100) {
            c += 'medium';
        } 
            else {
                c += 'large';
            }

        return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', 
                              className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
      }
    });

     map.addLayer(markers);


    var markerColor;


    var marker_blue =  helper.initMarkers ('/resource/markers/markers/marker_blue.png',[30, 40], [22, 44], [-5, -43]);

    markerColor = marker_blue;

    for (var i=0, len = accounts.length; i<len; i++) {

        var account = accounts[i];
        var latLng = [account.Latitude, account.Longitude];
        var marker = L.marker(latLng, {icon:markerColor},{account: account},{renderer: myRenderer});

        markerList.push(marker);

    }


        markers.addLayers(markerList);

如何遍历5万个帐户并在传单地图上显示它们？

0 个答案: