Question

我有几组相对较大的数据（大约86.000纬度和经度点），显示了不同年份的全球温度分布。我用热图表示这些数据，为此我使用谷歌地图库。我的目标是在X年的范围内显示/动画全球温度变化。因此，对于每个选定的年份，我需要更改/更新显示该年度全球温度分布的新热图。我设法编写了一个代码，通过滚动范围栏或按向前/向后按钮来更新热图。我面临的问题是，更新需要很长时间（大约3-4秒）。所以，我的问题是，有没有办法加快更新？

这是我更新热图的方法：首先，我的数据是一个数组（长度86.000），其中每个元素具有以下值：纬度，经度，年x1的温度，年x2的温度，...，年xn的温度。因此，纬度和经度坐标每年都是固定的。

这是我初始化热图的代码：

var map, heatmap, heatmapData;

function initialize() {
    heatmapData = new google.maps.MVCArray();
    var mapOptions = {
            zoom: 2,
            center: new google.maps.LatLng(5,45),
            mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

    //Take data of 1st year
    for (var i = 1; i < data.length; i+=1) {
            var latLng = new google.maps.LatLng(data[i][2], data[i][1]);
            var temperature = data[i][3]
            var weightedLoc = {
                    location: latLng,
                    weight:temperature
            };
            heatmapData.push(weightedLoc);
    };

    heatmap = new google.maps.visualization.HeatmapLayer({
            data: heatmapData,
            dissipating: false,
            map: map,
            opacity: 0.8,
            radius: 1.2
    });

    heatmap.setMap(map);

}

我的更新功能如下所示：

function update(year){

    var index = year-firstYear+3;

    //just change value of temperature
    heatmapData.forEach(function(elm, i){
        elm.weight=data[i+1][index];
    });

    heatmap.set('data',heatmapData);
}

为了获得更快的性能，我如何改进此代码？ Thx提前！

Answer 1

渲染热图所消耗的大部分时间实际上都在谷歌地图热图功能上，除非你想建立自己的热图功能，否则你几乎无法做到这一点。

您可以通过使用简单的for循环加速更新功能来改进代码，而不是使用foreach。

//just change value of temperature
    heatmapData.forEach(function(elm, i){
        elm.weight=data[i+1][index];
    });

//you could use instead:
  for(var i=0, len=heatmapData.length; i< len; i++) {
      heatmapData[i].weight = data[i+1][index];
  }

看看这里比较不同循环选项的效果：http://jsperf.com/for-vs-foreach/37

由于你已经拥有内存中的DATA，用少量数组替换那个大数组并处理原始数据阵列不会成为一个很大的内存问题。

var heatbyyear = [];
for (var j=3 ; j < yearsOfData; j++) {
    heatbyyear.push([]);
}
for (var i = 1; i < data.length; i+=1) {
        //Take data of 1st year
        var thisyear = [];
        var latLng = new google.maps.LatLng(data[i][2], data[i][1]);
        var temperature = data[i][3]
        var weightedLoc = {
                location: latLng,
                weight:temperature
        };
        heatmapData.push(weightedLoc);
        for (var j=3 ; j < yearsOfData; j++) {
            heatbyyear[j].push(data[i][j]);
        }
};
data = null;

然后你只需致电：

function update(year){

    var index = year-firstYear+3;


    heatmap.set('data',heatbyyear[index]);
}

加快热图的更新速度

1 个答案: