OpenLayers 3 中的动画 gif

Question

有一个 gif 动画我想在我的 openlayers 3 地图中使用的雷达图像。我将层定义为 ol.layer.Image，源是 ol.source.ImageStatic。当我这样做时，雷达没有动画。

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

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

Answer 1

将 div 添加到您的 html 文档。

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

将 div 配置为 css 以包含动画 gif

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

将 div 元素作为 ol.Overlay

添加到您的地图

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 来查看它的实际效果

OpenLayers 3 中的动画 gif

Animated gif in OpenLayers 3

openlayers-3

animated-gif