Vòng radar thời tiết trên API Google Maps 3

Question

Tôi đang cố gắng triển khai hoạt ảnh radar lặp trên bản đồ google. Trang web này: http://mesonet.agron.iastate.edu/ogc/ cung cấp hình ảnh ra-đa từ thời điểm hiện tại đến 60 phút trước.

Hiện tại, tôi đang tải những hình ảnh này và sử dụng bộ hẹn giờ để thêm/xóa từng hình ảnh vào bản đồ. Kỹ thuật này hoạt động, nhưng kết quả là rất hay thay đổi. Có thời gian đáng chú ý khi không có hình ảnh ra-đa có thể hiển thị trên bản đồ. Giảm thời gian chờ, chỉ làm trầm trọng thêm hiệu ứng vì hình ảnh ra-đa không có đủ thời gian để tải trước khi bị xóa.

Có kỹ thuật nào để làm nổi bật hoạt ảnh không? Hoặc tôi đang đi về điều này tất cả các sai?

Mã

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

Trong hy vọng rằng điều này sẽ giúp người khác, dưới đây là cách tôi đã kết thúc giải quyết vấn đề. Thay vì thêm/xóa hình ảnh lớp phủ, tôi chỉ thay đổi độ mờ đục. Điều này đã cho tôi một hoạt hình mượt mà hơn nhiều. Ví dụ dưới đây sẽ quay vòng qua 30 phút ảnh radar cuối cùng.

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

câu hỏi mà bạn biết nếu trang web mesonet này có một số loại lớp mịn ở mức nhỏ hơn nếu zoom là 12

trừ khi tôi có thể lặp hiệu ứng động với

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

Answer 3

Không phải là câu trả lời, và xin lỗi vì đã necro'ing này, nhưng có anyway để có lớp phủ khác (nói bất kỳ hình ảnh GOES của họ) được hiển thị withou t thực sự "hoạt hình" chúng?

Về cơ bản tôi có mã đó trông như thế (và sau đó tôi kiểm soát show/hide với selectors với 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); 
} 

vấn đề này xuất phát từ thực tế, tôi không thể dường như tìm cách chỉ chọn một số ô để thực sự hoạt ảnh và không phải mọi lớp phủ trong map.overlayMapTypes.getLength()