谷歌地图动画ImageMapType叠加层

Question

谷歌地图动画ImageMapType叠加层

4

我一直在阅读和研究如何制作叠加动画。但是，我没有找到任何与我所寻找的相关的内容。大多数都与标记有关。我有一个覆盖层，我像这样应用它，并且效果很棒。

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中是否有此选项？因为我读到有些冲突。但我已经看到其他人做到了，所以一定是可能的。我应该如何加载多个层并进行动画处理呢？

-谢谢！

- Texan78

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan · Accepted Answer

我知道这已经过时了，但我希望这能帮助其他寻找相同内容的人。这可能不是最优雅的解决方案，但它完成了任务。我简单地映射预定义的图像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);
}