可以openlayers 3呈现使用gif的动画标记

我想问如何使标记显示动画的gif图片像openlayers 2做...它可以显示动画的标记..我想要的是显示动画gif标记不作出标记移动..这是可能的或不是？可以openlayers 3呈现使用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创建动画功能..我没有找到任何包含此解决方案的文章...谢谢

来源

2017-04-07 Yung Fei

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

您的HTML与DOM元素

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

这里

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);

您的JS，在这里你的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与舞蹈香蕉（不错的gif虽然:)））））

来源

2017-04-07 16:59:03 pavlos

嗨，感谢您的诀窍，但有没有使用覆盖任何解决方案吗？我想使用它作为图层中的功能，而不是覆盖...感谢 –

恐怕你没有其他选择。至少我不知道任何。 – pavlos

可以openlayers 3呈现使用gif的动画标记

回答

相关问题