5

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

Yung Fei
  • 75
  • 1
  • 9

3 Answers3

3

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

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

m13r
  • 2,458
  • 2
  • 29
  • 39
pavlos
  • 3,001
  • 18
  • 23
  • hi, thanks for your trick, but are there any solution without using overlay?I wanna use that as feature in layer not as overlay...thanks – Yung Fei Apr 10 '17 at 03:16
  • 1
    I am afraid you have no other option. At least I am not aware of any. – pavlos Apr 10 '17 at 13:14
  • Overlays can be created and styled dynamically if necessary to correspond to features in a layer https://jsfiddle.net/fan85g34/ – Mike May 02 '19 at 14:16
1

This can definitely be done with a feature or layer style, with the help of a gif decoder that extracts the frames from the gif and controls an animation. Using gifler, the relevant code could look something like this:

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

The above code sets an icon style with the animated gif on an existing feature. The feature is stored in a variable iconFeature.

See https://codesandbox.io/s/beautiful-fire-cdrou?file=/main.js for a working example.

ahocevar
  • 5,448
  • 15
  • 29
  • See OpenLayers examples: https://openlayers.org/en/latest/examples/animated-gif.html – m13r Sep 02 '21 at 08:53
0

An alternative is to use two png images. An effect similar to a gif image can be obtained if you apply two different styles to the same layer using the setStyle () method with a setInterval () function. Ej:

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


iconFeature.setStyle(Style1);

then

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);
};
jtz
  • 1
  • 1