openlayers 3 可以使用 gif 渲染动画标记吗

Question

我想问一下如何让标记像 openlayers 2 那样显示动画 gif 图片...它可以显示动画标记..我想要的是显示动画 gif 标记而不是让标记移动..这可能吗？

style = {
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                anchor: anchor,
                opacity: 1,
                src: 'https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif',
                scale: 1,
            };

var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ (style))
        });

var iconFeature = new ol.Feature({
            position: data.coordinate,
            geometry: new ol.geom.Point([0,0]),
        });

iconFeature.setStyle(iconStyle);

如何使https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif在地图中显示为 gif 动画？是否可以在 openlayers 3 中创建动画功能..我没有找到任何包含此解决方案的文章...谢谢

Answer 1

是的，有一种方法可以做到这一点，但有点棘手，所以我不确定它是否适合您的需求。您需要添加一个标记并使用 css 来设置标记的样式。检查这个

你的 html 带有 dom 元素

<div id="map" class="map"></div>
<div id="marker" title="Marker"></div>

你的js在这里

var layer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [layer],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});
// the position of your marker
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);

和你的CSS在这里

#marker {
  width: 365px;
  height: 360px;
  background: url("https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif") no-repeat scroll 0% 0% transparent;
}

还有一个小提琴和跳舞的香蕉（不过很好的 gif :)））））