Javascript Openlayers 3：点动画功能

我在这里设置了电流：我需要设置点特征的动画。。。让它像谷歌上的GPS定位一样跳动。我发现了这篇文章：但我发现它确实令人困惑，不知道如何将它应用到我的代码中

这是小提琴中创建点特征并将其应用于地图的部分

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

---

隔离和注释为功能创建闪光效果的功能：

/*
 * @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 postcompose animation
    map.render();
  }

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

用法：

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

---

最好能准确地显示您想要实现的动画。@JonatasWalker OL示例中的那个可以，但是用蓝色圆圈代替红色。。。我只是不知道从哪里开始！非常感谢这个。。。我把它用在小提琴上了。。。但是继续获取错误

vectorContext.setStyle不是一个函数

。有什么想法吗？非常感谢你的帮助！！您正在使用旧的OL版本。使用最新的。太棒了！！！非常感谢。我可以很高兴地从您的代码中调整它的外观，但是如何让动画一次又一次地重复呢？非常感谢你！！告诉map渲染每个函数调用-so

function make_point_flash（）{map.render（）；flash（locationPoint，2000）；}