openlayers 3 可以使用 gif 渲染动画标记吗 [英] can openlayers 3 render the animated marker using gif
问题描述
我想问一下如何让标记像 openlayers 2 那样显示动画 gif 图片...它可以显示动画标记..我想要的是显示动画 gif 标记而不是使标记移动..可能与否?
style = {anchorXUnits: '分数',anchorYUnits: '像素',锚:锚,不透明度:1,src: 'https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif',规模:1,};var iconStyle = new ol.style.Style({图片:new ol.style.Icon(/** @type {olx.style.IconOptions} */(style))});var iconFeature = new ol.Feature({位置:数据坐标,几何:新 ol.geom.Point([0,0]),});iconFeature.setStyle(iconStyle);
如何制作 https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif 在地图中显示为 gif 动画?是否可以在 openlayers 3 中创建动画功能..我没有找到任何包含此解决方案的文章...谢谢
是的,有一种方法可以做到,但有点棘手,所以我不确定它是否适合您的需求.您需要添加一个标记,并使用 css 来设置标记的样式.检查这个
带有 dom 元素的 html
<div id="marker" title="Marker"></div>
你的js在这里
var layer = new ol.layer.Tile({来源:新 ol.source.OSM()});var map = new ol.Map({层:[层],目标:'地图',视图:新 ol.View({中心:[0, 0],变焦:2})});//这是你的标记的位置var pos = ol.proj.fromLonLat([23.3725, 35.208889]);var 标记 = 新的 ol.Overlay({职位: pos,定位:'中心-中心',元素:document.getElementById('marker'),停止事件:假});map.addOverlay(标记);
和你的 css 在这里
#marker {宽度:365px;高度:360px;背景: url("https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif") 无重复滚动 0% 0% 透明;}
和小提琴 这里 跳舞香蕉(虽然 gif 不错 :)))))>
I wanna ask how to make the marker show animated gif picture like openlayers 2 do...it can show the animated marker..what I want is show animated gif marker not make a marker move..it is possible or not?
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);
How to make https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif displayed animated as a gif in a map? is it possible or not create animated features in openlayers 3..I don't find any article with contain this solving...thanks
Yes there is a way do it but is a bit tricky so I am not sure whether it fit to your needs. You need to add a marker instead and use css to style the marker. check this
your html with the dom element
<div id="map" class="map"></div>
<div id="marker" title="Marker"></div>
your js here
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
})
});
//this the postion 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);
and your css here
#marker {
width: 365px;
height: 360px;
background: url("https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif") no-repeat scroll 0% 0% transparent;
}
and a fiddle here with the dancing banana (nice gif though :)))) )
这篇关于openlayers 3 可以使用 gif 渲染动画标记吗的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!