openlayers使用postcompose事件實現一個點的光暈動畫，並且去除動畫

1.前言

在webGI開發過程中，可能需要進行對點的定位，或者突出某一個點的位置，所以使用postcompose事件實現一個點的光暈動畫讓功能更加直觀。

2.代碼實現

//傳入xy坐標
function featureLocationByLonLat(x,y) {
  var geom = new ol.geom.Point([x, y]);
//構建feature
  var feature = new ol.Feature(geom);
//定位過去
  map.getView().fit(geom,{maxZoom:17} );
//閃爍
  flash(feature);
}

//光暈擴散的周期
let duration=1500;
function flash(feature) {
//開始時間
  let start = new Date().getTime();
//注冊事件
  var listenerKey = map.on('postcompose', animate)；
//事件函數
  function animate(event) {
    var vectorContext = event.vectorContext；
    var frameState = event.frameState；
    var flashGeom = feature.getGeometry().clone()；
    var elapsed = frameState.time - start；
    var elapsedRatio = elapsed / duration；
    var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5；
    var opacity = ol.easing.easeOut(1 - elapsedRatio)；

    var style = new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 0, 0, ' + opacity + ')',
          width: 1 + opacity,
        }),
      }),
    })

    vectorContext.setStyle(style)；
    vectorContext.drawGeometry(flashGeom)；
//重新設置起始時間，開始下一個周期
    if (elapsed > duration) {
      start=new Date().getTime()；
    }
    // 開始渲染
    map.render()；
  }
}

效果圖

3.去除動畫

function unFlash(){
　　//去除事件
　　map.removeEventListener('postcompose', animate)；

}