数据在每次平移和缩放时加载

Data Loads On Every Pan and Zoom

本文关键字：缩放 加载 数据      更新时间：2023-09-26

我正在根据地图的当前边界框(或视口(将JSON数据添加到Google地图中。问题在于，即使是最轻微的平移或缩放也会重绘该数据。我怎样才能做到一旦加载数据，它就不需要重绘(或重新加载(？

这是我正在使用的事件：

google.maps.event.addListener(map, 'idle', function () {
  if (map.getZoom() > 12) {
    bBox = getBB(); // get current bounding box
      $.ajax({
        url: '/getdata',
        type: 'POST',
        data: JSON.stringify(bBox),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (ai) {
          addToMap(ai);
        }
     });
   } else {
     map.data.forEach(function(feature) {
       map.data.remove(feature);
     });
   }
});

我认为一个双重解决方案会起作用：修改选择要加载到地图的数据的方法，然后在地图处于非活动状态的短暂时间后加载数据。

也许在触发idle事件和地图重新加载数据之间添加延迟。这可以通过全局setTimeout来实现，该全局每次地图空闲时都会更新。

var loadDelay = setTimeout(function(){},0);
google.maps.event.addListener(map, 'idle', function(){
  clearTimeout(loadDelay);
  loadDelay = setTimeout(function(args){old_function(args)}, delayTime); //choose time between idle and load
});

此外，您可以将数据分成正方形区域，并检查地图边界内的哪些区域已被加载，然后不将它们传送到地图上。

编辑

跟踪数据将是一个两步过程。首先是更改单个查询的边界。其次是保留一组已加载的统一大小的区域。像这样：

var loaded = [];
function load(bounds){
  var north = bounds.getNorthEast().lat();
  var south = bounds.getSouthWest().lat();
  var east = bounds.getNorthEast().lng();
  var west = bounds.getSouthWest().lng();
  for(var lat=parseFloat(south.toFixed(1)); lat<north; lat += 0.1){ //or some other interval
    for(var lng=parseFloat(west.toFixed(1)); lng<east; lng += 0.1){
      if(!(south+','+west in loaded)){
        import(south, west); //function to get and display information
        loaded.push(south+','+west);
      }
    }
  }
}

像这样的系统应该加载尚未加载的部分数据。

相关文章：