3天气雷达回路

Question

我正试图在谷歌地图上实现一个循环雷达动画。这个站点：http://mesonet.agron.iastate.edu/ogc/提供从当前时间到60分钟前的雷达图像。

目前，我正在加载这些图像，并使用计时器将每个图像添加/删除到地图中。这在技术上是可行的，但结果却很不稳定。在地图上没有雷达图像可访问的时间是可以注意的。降低超时，只会使效果恶化，因为雷达图像在移除之前没有足够的时间加载。

有什么技术来平滑动画吗？还是我搞错了？

代码

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

Answer 1

希望这对其他人有所帮助，下面是我如何解决问题的原因。而不是添加/删除重叠图像，我只是改变了不透明度。这给了我一个更流畅的动画。下面的例子将循环通过最后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);
  }

}

Answer 2

如果变焦为12，你知道这个站点介子是否有某种较小的平滑层。

除非我能用

composite?maxlat=34.96496076302826&maxlon=-89.51954101562501&minlat=29.38958076527275&minlon=-98.30860351562501&type=00Q&frame=0&num=7&delay=25&width=800&height=600&png=0&smooth=1&min=0&noclutter=1&rainsnow=1&nodebug=0&theext=.gif&merge=elev&reproj.automerc=1&timelabel=1&timelabel.x=200&timelabel.y=12&brand=wundermap&rand=4564

Answer 3

没有答案，很抱歉这样做，但是否有其他覆盖(例如，任何他们的去图像)显示，而没有真正的“动画”他们？

基本上，我有类似的代码(然后我用jQuery的选择器控制显示/隐藏)：

    overlayMaps = [{
    //NEXRAD
    getTileUrl: function(tile, zoom) {
        return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0r-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.60,
    name: 'NEXRAD',
    isPng: true
}, {
    //MRMS Hybrid-Scan Reflectivity Composite
    getTileUrl: function(tile, zoom) {
        return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/q2-hsr-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.60,
    name: 'GOES Water Vapor',
    isPng: true
}, {
    //GOESVIS
    getTileUrl: function(tile, zoom) {
        return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-vis-1km-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.60,
    name: 'GOES Visible',
    isPng: true
}, {
    //GOESIR
    getTileUrl: function(tile, zoom) {
        return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-ir-4km-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.60,
    name: 'GOES Infrared',
    isPng: true
}, {
    //GOESWaterVapor
    getTileUrl: function(tile, zoom) {
        return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-wv-4km-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.9,
    name: 'GOES Water Vapor',
    isPng: true
}];

    $('.overlay_layer').click(function() {
        var layerID = parseInt($(this).attr('id'));
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            if (map.overlayMapTypes.getLength() > 0) {
                map.overlayMapTypes.setAt(layerID, null);
            }
        } else {
            $(this).addClass('active');
            var overlayMap = new google.maps.ImageMapType(overlayMaps[layerID]);
            map.overlayMapTypes.setAt(layerID, overlayMap);
        }
    });

for (i = 0; i < overlayMaps.length; i++) {
    var overlayMap = new google.maps.ImageMapType(overlayMaps[00]);
    map.overlayMapTypes.setAt(00, overlayMap);
    //map.overlayMapTypes.push(null);
}

这个问题来自于这样一个事实，我似乎无法找到一种方法，只选择某些瓷砖来进行实际的动画，而不是在map.overlayMapTypes.getLength()中选择每个覆盖层。