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屋！