I have the current set up here: fully functional fiddle example and I need to animate the point feature... make it pulse like a GPS location on Google etc. I have found this article: .html but find it really confusing and have no idea how to apply it to my code.

This the the part of the fiddle that creates the point feature and applies it to the map...

function locate_me() {
    var locationPoint = new ol.Feature({
        geometry: new ol.geom.Point([0.3901863098144531, 52.803332200169166])
    });
    locationPoint.getGeometry().transform('EPSG:4326', 'EPSG:3857');

    // A vector layer to hold the location point
    var locationLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                locationPoint
            ]
        })
    });
    map.addLayer(locationLayer);
}

I have the current set up here: fully functional fiddle example and I need to animate the point feature... make it pulse like a GPS location on Google etc. I have found this article: http://openlayers/en/master/examples/feature-animation.html but find it really confusing and have no idea how to apply it to my code.

This the the part of the fiddle that creates the point feature and applies it to the map...

function locate_me() {
    var locationPoint = new ol.Feature({
        geometry: new ol.geom.Point([0.3901863098144531, 52.803332200169166])
    });
    locationPoint.getGeometry().transform('EPSG:4326', 'EPSG:3857');

    // A vector layer to hold the location point
    var locationLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                locationPoint
            ]
        })
    });
    map.addLayer(locationLayer);
}

• javascript
• openlayers-3

Share Improve this question Follow asked Aug 18, 2016 at 10:15 Helen Danger BurnsHelen Danger Burns 44122 gold badges1111 silver badges2929 bronze badges 2

• Better you show exactly what animation you want to implement. – Jonatas Walker Commented Aug 18, 2016 at 14:30
• @JonatasWalker The one on the OL Example would be fine, but with a blue circle instead of red... I just don't know where to start! – Helen Danger Burns Commented Aug 18, 2016 at 14:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Isolating and menting the function which creates the flash effect to a feature:

/*
 * @param {ol.Feature}
 * @param {Number} Duration in milliseconds.
 */
function flash(feature, duration) {
  var start = +new Date();
  var listenerKey; // to remove the listener after the duration

  function animate(event) {
    // canvas context where the effect will be drawn
    var vectorContext = event.vectorContext;
    var frameState = event.frameState;

    // create a clone of the original ol.Feature
    // on each browser frame a new style will be applied
    var flashGeom = feature.getGeometry().clone();
    var elapsed = frameState.time - start;
    var elapsedRatio = elapsed / duration;
    // radius will be 5 at start and 30 at end.
    var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
    var opacity = ol.easing.easeOut(1 - elapsedRatio);

    // you can customize here the style
    // like color, width
    var style = new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        snapToPixel: false,
        stroke: new ol.style.Stroke({
          color: [51, 51, 51, opacity],
          width: 0.25 + opacity
        })
      })
    });

    vectorContext.setStyle(style);
    vectorContext.drawGeometry(flashGeom);
    if (elapsed > duration) { // stop the effect
      ol.Observable.unByKey(listenerKey);
      return;
    }
    // tell OL3 to continue postpose animation
    map.render();
  }

  listenerKey = map.on('postpose', animate);
}

Usage:

var marker = new ol.Feature(new ol.geom.Point([0, 0]));
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [marker]
  })
});
map.addLayer(vectorLayer);

flash(marker, 2000);