1

我正在使用一个名为 Leaflet 的地图应用程序。我使用的一些代码如下：

var layer1 =L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/7540/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 12

}).addTo(map);

// 上面的代码只是在 DIV 标记中放置了一个基础层。但关键是 //addTo 方法。

我还从 Aeris 获取天气雷达数据，并使用以下方法在传单上创建一个图层：

var radar_img_arr = createVariables();

和 createVariables() 看起来像这样：

function createVariables(){
  var radar_images = [];

  for (var i = 0; i <= 99; ++i) {
      radar_images[i] = L.tileLayer('http://tile2.aerisapi.com/QjvmoFnKc1Wj94aDULEX_8Y7R8eagwQKlUusR5WZk6JTBdz6zlCm3KIP15CLG/radar/{z}/{x}/{y}/'+data.files[i].time +'.png', {opacity: 0.6, format: 'image/png',   maxZoom: 12,attribution: "FOSM"}).addTo(map).setZIndex(999);
  }

  return radar_images;
}

以上将所有数据一次添加到地图中只是为了测试。

我真正想要的是一个循环，它可以从地图中删除旧图层并用新图层替换它。

两个重要的方法如下： map.removeLayer(radar_img_arr[i]); map.addLayer(radar_img_arr[i+1]);

我正在尝试编写一个循环来执行此操作，但时间混乱了。其他天气网站使用 Flex 或 Flash 为雷达循环设置动画，但我想尝试使用 Javascript 解决方案。

有谁知道如何在 JS 或 jQuery 中创建这个循环？

谢谢，吉姆

4

1 回答 1

1

您应该使用 set timeout 来遍历循环...类似于：

// function for setTimeout
var updateImage = function() {

  //gets the current image & update place
  var img = radar_img_arr[place++] 

  // code to update display here.
  ...

  // call the function again in 1 second 
  setTimeout(updateImage, 1000)

  // reset place to 0 if need be
  if (step == radar_img_arr.length-1) 
    place = 0;

}

// variable to store where we are in the array.
var place = 0

// array of images
var radar_img_arr = createVariables()

//start the process in 1 second:
setTimeout(updateImage, 1000)

// or, start it right away:
updateImage()

我不喜欢使用 setInterval，它会一遍又一遍地自动调用你的函数，无论你经过多少毫秒。原因是，如果您的函数运行时间比计时器花费的时间长，那么您会创建一个竞争条件，在您的情况下，这会导致图像奇怪地更新。

于 2012-10-10T18:12:48.257 回答