Openlayers 3：動畫點功能

Question

我目前在這裏設置：fully functional fiddle example，我需要動畫點功能...使它像Google等GPS位置脈衝我已經找到這篇文章：http://openlayers.org/en/master/examples/feature-animation.html但找到它非常混亂，不知道如何將其應用於我的代碼。

這將創建點要素，並將其應用到地圖的小提琴部分...

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

Answer 1

隔離和留言，這創造了閃光效果的功能函數：

/* 
* @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);