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

}