我正在尝试在Google map 上实现循环雷达动画。该站点:http://mesonet.agron.iastate.edu/ogc/提供当前时间到60分钟前的雷达图像。
目前，我正在加载这些图像，并使用计时器将每个图像添加/删除到 map 上。从技术上讲这是可行的，但结果非常不稳定。没有明显的时间在 map 上看不到雷达图像。降低超时时间只会使效果更糟，因为雷达图像在删除之前没有足够的时间加载。
是否有任何使动画平滑的技术？还是我要解决所有这些错误？
代码
var map;
var imageArray = [];
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(42.5, -95.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//Load Images and add them to imageArray
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD',
isPng: true,
});
imageArray.push(tileNEX);
tileNEX5 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m05m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD5',
isPng: true,
});
imageArray.push(tileNEX5);
tileNEX10 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m10m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD10',
isPng: true,
optimized: false
});
imageArray.push(tileNEX10);
tileNEX15 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m15m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD15',
isPng: true,
});
imageArray.push(tileNEX15);
tileNEX20 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m20m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD20',
isPng: true,
});
imageArray.push(tileNEX20);
animateRadar(imageArray);
}
google.maps.event.addDomListener(window, 'load', initialize);
function animateRadar(images) {
map.overlayMapTypes.push(images[0]);//Add first image
var index = 0;
window.setInterval(function(){
map.overlayMapTypes.pop();//Remove previous image
index++;
if(index >= images.length){
index = 0;
}
map.overlayMapTypes.push(images[index]);//Add new image
}, 1000);
}
最佳答案
希望对其他人有所帮助，以下是我最终解决问题的方法。我只是添加了不透明度，而没有添加/删除覆盖图像。这给了我一个更加流畅的动画。以下示例将循环显示雷达图像的最后30分钟。
var map;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(42.5, -95.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//Load Images and add them to imageArray
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD',
isPng: true,
});
map.overlayMapTypes.push(tileNEX);
tileNEX5 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m05m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD5',
isPng: true,
});
map.overlayMapTypes.push(tileNEX5);
tileNEX10 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m10m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD10',
isPng: true,
optimized: false
});
map.overlayMapTypes.push(tileNEX10);
tileNEX15 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m15m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD15',
isPng: true,
});
map.overlayMapTypes.push(tileNEX15);
tileNEX20 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m20m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD20',
isPng: true,
});
map.overlayMapTypes.push(tileNEX20);
tileNEX25 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m25m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD25',
isPng: true,
});
map.overlayMapTypes.push(tileNEX25);
tileNEX30 = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m30m/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.00,
name : 'NEXRAD30',
isPng: true,
});
map.overlayMapTypes.push(tileNEX30);
animateRadar();
}
google.maps.event.addDomListener(window, 'load', initialize);
function animateRadar() {
var index = map.overlayMapTypes.getLength() - 1;
window.setInterval(function(){
map.overlayMapTypes.getAt(index).setOpacity(0.00);
index--;
if(index < 0){
index = map.overlayMapTypes.getLength() - 1;
}
map.overlayMapTypes.getAt(index).setOpacity(0.60);
}, 400);
}
}
关于javascript - Google Maps API 3上的天气雷达回路，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26066141/