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

【问题标题】：can openlayers 3 render the animated marker using gifopenlayers 3可以使用gif渲染动画标记吗
【发布时间】：2017-04-07 12:18:04
【问题描述】：

我想问如何让标记显示动画 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 中创建动画功能..我找不到任何包含此解决方案的文章...谢谢

【问题讨论】：

标签： openlayers-3

【解决方案1】：

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

带有 dom 元素的 html

<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 和跳舞的香蕉（虽然是漂亮的 gif :)))))

【讨论】：

嗨，谢谢你的技巧，但是有没有不使用覆盖的解决方案？我想将其用作图层中的功能而不是覆盖...谢谢
恐怕你别无选择。至少我不知道。
如果需要，可以动态创建叠加层并设置样式以对应层中的特征jsfiddle.net/fan85g34

【解决方案2】：

这绝对可以通过特征或图层样式来完成，借助 gif 解码器从 gif 中提取帧并控制动画。使用gifler，相关代码可能如下所示：

const gifUrl = "./data/kgrtehja_DancingBannana.gif";
const gif = gifler(gifUrl);
gif.frames(
  document.createElement("canvas"),
  (ctx, frame) => {
    if (!iconFeature.getStyle()) {
      iconFeature.setStyle(
        new Style({
          image: new Icon({
            img: ctx.canvas,
            imgSize: [frame.width, frame.height]
          })
        })
      );
    }
    ctx.clearRect(0, 0, frame.width, frame.height);
    ctx.drawImage(frame.buffer, frame.x, frame.y);
    map.render();
  },
  true
);

以上代码在现有功能上设置带有动画 gif 的图标样式。该特征存储在变量iconFeature中。

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

【讨论】：

查看 OpenLayers 示例：openlayers.org/en/latest/examples/animated-gif.html

【解决方案3】：

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

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

【讨论】：