Google मानचित्र एपीआई 3

Question

पर मौसम रडार पाश मैं एक Google मानचित्र पर लूपिंग रडार एनीमेशन को लागू करने की कोशिश कर रहा हूं। यह साइट: 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

सवाल आप इस साइट mesonet छोटे स्तर पर चिकनी परत किसी प्रकार का है, तो अगर है ज़ूम पता 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

साथ एनीमेशन

Answer 3

कोई जवाब नहीं है, और यह necro'ing के लिए खेद है, लेकिन वैसे भी वहाँ अन्य ओवरले है (उनके किसी भी 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); 
} 

समस्या तथ्य से आता है, मैं नहीं कर पा रहे वास्तव में एनिमेट करने के लिए केवल कुछ टाइल्स चुनने का तरीका ढूंढें और मानचित्र में हर ओवरले नहीं .overlayMapTypes.getLength()