我想问如何让标记像 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://铰接英雄.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif在地图中以 gif 形式显示动画?是否可以在 openlayers 3 中创建动画功能..我没有找到任何包含此解决方案的文章...谢谢
是的,有一种方法可以做到这一点,但有点棘手,所以我不确定它是否适合您的需求。
您需要添加一个标记并使用 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;
}
和一把小提琴here https://jsfiddle.net/dkwxb2L7/和跳舞的香蕉(虽然GIF不错:)))))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)