openlayers-3 - OpenLayers 3 中的动画 gif

Question

有一个 gif，它可以对我想在 openlayers 3 map 中使用的雷达图像进行动画处理。我将图层定义为 ol.layer.Image，源为 ol.source.ImageStatic。当我这样做时，雷达没有动画。

我假设这是因为我将其定义为 ImageStatic，但当我尝试使用任何其他源选项将图像添加到 map 时，我收到错误。

有谁知道我应该使用什么作为动画图像 gif 的源？任何已经完成此操作的例子也都很棒。谢谢!

Answer 1

1. 将 div 添加到您的 html 文档中。

    <div id="map" class="map"></div>
    <div style="display: none;">
    <div id="marker" title="Marker"></div>
    </div>
   

2. 使用 css 配置您的 div 以包含动画 gif

   #marker {
   width: 150px;
   height: 150px;
   background: url("http://netanimations.net/animated_earth_84.gif") no-repeat scroll 0% 0% transparent;
   }
   

3. 将 div 元素作为 ol.Overlay 添加到 map

   var pos = ol.proj.fromLonLat([23.3725, 35.208889]);
   var marker = new ol.Overlay({
   position: pos,
   positioning: 'center-center',
   element: document.getElementById('marker'),
   stopEvent: false
   });
   map.addOverlay(marker);
   

和一个fiddle看看它的实际效果