Google Map Animate ImageMapType Overlay

Question

Я читал и изучал, как анимировать оверлеи. Я не нашел ничего, связанного с тем, что я ищу. В основном это было связано с маркерами. У меня есть наложение, которое я применяю так, и оно отлично работает.

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

Источник данных также предлагает 10 других изображений прошлых лет. Поэтому я хотел бы создать анимированный цикл с этими фидами. Этот вариант доступен в V3, поскольку я прочитал некоторые конфликты с этим. Я имею в виду, что это должно быть возможно, потому что я видел других. Как я могу загружать несколько слоев, а затем их анимировать?

-Спасибо!

Answer 1

Я знаю, что это уже давно, но я надеюсь, что это поможет кому-то еще искать то же самое. Это, вероятно, не самое элегантное решение, но оно поставило задачу. Я просто сопоставляю предопределенные URL-адреса изображений, создавая свои ImageMapTypes, а затем передаю их в цикл анимации, который проверяет, есть ли на карте слой, очищается, если он есть, а затем устанавливает новый слой на основе количества циклов. Надеюсь это поможет.

var map; 
// Weather tile url from Iowa Environmental Mesonet (IEM): http://mesonet.agron.iastate.edu/ogc/ 
var urlTemplate = 'http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-{timestamp}/{zoom}/{x}/{y}.png'; 
// The time stamps values for the IEM service for the last 50 minutes broken up into 5 minute increments. 
var timestamps = ['900913-m50m', '900913-m45m', '900913-m40m', '900913-m35m', '900913-m30m', '900913-m25m', '900913-m20m', '900913-m15m', '900913-m10m', '900913-m05m', '900913']; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 38.0781, lng: -97.7030}, 
    zoom: 5 
    }); 

    let tileSources = timestamps.map((timestamp) => { 
    return new google.maps.ImageMapType({ 
     getTileUrl: function(tile, zoom) { 
      const { x, y} = tile; 
      return `https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-${timestamp}/${zoom}/${x}/${y}.png?`+ (new Date()).getTime(); 
     }, 
     tileSize: new google.maps.Size(256, 256), 
     opacity:0.60, 
     name : 'NEXRAD', 
     isPng: true 
    }); 
    }); 

    startAnimation(map, tileSources); 
} 

function startAnimation(map, layers) { 
    // create empty overlay entry 
    map.overlayMapTypes.push(null); 
    var count = 0; 
    window.setInterval(() => { 
    if(map.overlayMapTypes.getLength() > 0) 
     map.overlayMapTypes.clear(); 

    map.overlayMapTypes.setAt("0",layers[count]); 
    count = (count + 1) % layers.length;   
    },800); 
}