Leafletという地図アプリを使っています。私が使用するコードの一部を以下に示します。
var layer1 =L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/7540/256/{z}/{x}/{y}.png', {
attribution: 'Map data © <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でこのループを作成する方法を知っている人はいますか?
ありがとう、ジム