加快热图更新速度

Question

我有几组相对较大的数据(大约86.000个纬度和经度)，它们显示了不同年份的全球温度分布。我用热图表示这些数据，为此我使用了google地图库。我的目标是显示/动画全球气温在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);

}

我的update函数看起来像这样：

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

我如何改进这段代码以获得更快的性能？提前谢谢你！

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

由于内存中已经有数据，因此用几个数组替换一个大数组并处理原始数据数组不会造成很大的内存问题。

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