Google Maps API上的天氣雷達迴路3

我正試圖在谷歌地圖上實現循環雷達動畫。本網站：http://mesonet.agron.iastate.edu/ogc/提供從當前時間到60分鐘前的雷達圖像。Google Maps API上的天氣雷達迴路3

目前，我正在加載這些圖像並使用計時器將每張圖像添加到地圖中。這在技術上有效，但結果非常不穩定。有一段時間，地圖上沒有可見的雷達圖像。降低超時時間只會使效果變差，因爲雷達圖像在移除之前沒有足夠的時間進行加載。

是否有任何技術來平滑動畫？或者，我是否全力以赴？

代碼

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

來源

2014-09-26 schn0573

，希望這可以幫助其他人，下面是我如何結束瞭解決問題。我只是改變了不透明度，而不是添加/刪除重疊圖像。這給了我一個更平滑的動畫。以下示例將循環顯示最近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); 
    }

}

來源

2014-09-30 16:04:04 schn0573

這完美的作品！隨着時間的推移它會自動更新嗎，還是必須在頁面上刷新間隔？ – Pat 2016-06-29 12:59:29

需要刷新天氣圖塊。 – schn0573 2016-07-05 18:35:19

問題，你知道，如果這個網站中尺度具有較小的一級某種平滑層，如果變焦是12

除非我能循環使用

http://radblast.wunderground.com/cgi-bin/radar/WUNIDS_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

動畫

來源

2014-10-11 20:22:35 j0hnny

請參閱http://mesonet.agron.iastate.edu/ogc/提供的所有內容。但我不相信他們擁有平滑的雷達。 – schn0573 2014-10-22 13:32:45

Ahhhhh很酷你知道我實際上使用你的方法相當棒。它一直工作的很好（當變焦爲12時，它確實像素化了），但我猜那個級別的任何東西都是像素。我可能會嘗試 tileNEX35 tileNEX40 http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m40m/ – j0hnny 2014-10-24 17:48:25

不是一個答案，並且爲這個壞消息感到抱歉，但是無論如何有其他覆蓋圖（比如他們的任何GOES圖像）都會被顯示實際上「動畫」他們？

基本上我有如下所示的代碼（然後我控制與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（）

來源

2016-08-10 04:29:06 alturic

Google Maps API上的天氣雷達迴路3

回答

相關問題