Question

我想问一下如何让标记显示动画gif图像像openlayers 2 ...它可以显示动画标记..我想要的是显示动画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
  })
});
//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);

和你的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 :)））））

Answer 2

另一种方法是使用两个png图像。如果使用带有setInterval（）函数的setStyle（）方法将两个不同的样式应用于同一图层，则可以获得类似于gif图像的效果。 EJ：

Style1 = {
        ...
                src: '../image1.png',
        ...
            };
Style2 = {
        ...
                src: '../image2.png',
        ...
            };


iconFeature.setStyle(Style1);

然后

var n = 0; // global
function changeStyleEvery (){
    if (n == 0){
        n = 1;
        iconFeature.setStyle(Style1);

    }else{
        n = 0;
        iconFeature.setStyle(Style2);
    };
};

function applyInterval (){
    setInterval(function(){changeStyleEvery(); }, 500);
};

Answer 3

在gif解码器的帮助下，绝对可以使用要素或图层样式完成此操作，该解码器从gif中提取帧并控制动画。使用gifler，相关代码可能如下所示：

reverse

以上代码在现有功能上设置了带有动画gif的图标样式。该功能存储在变量_messages = _messaged.reversed.toList();中。

有关有效的示例，请参见https://codesandbox.io/s/beautiful-fire-cdrou?file=/main.js。

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

3 个答案: