Question

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

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

有谁知道我应该使用什么来制作动画图片gif的来源？任何这样做的例子也很棒。谢谢！

Answer 1

在您的html文档中添加div。

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

使用css配置div以包含动画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动画

1 个答案: