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

上記は、テストのためにすべてのデータを一度にマップに追加します。

私が本当に欲しいのは、マップから古いレイヤーを削除して新しいレイヤーに置き換えることができるループです。

以下に 2 つの重要なメソッドを示します。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 に答える