Javascript 或 jQuery png 播放器

Question

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

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 中只是为了测试。

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

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

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

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

谢谢， 吉姆

Answer 1

您应该使用设置超时来迭代循环...类似:

// 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，无论您经过多少毫秒，它都会自动一遍又一遍地调用您的函数。原因是，如果您的函数运行时间比计时器花费的时间长，您就会创建一个竞争条件，在您的情况下，这会导致图像奇怪地更新。