在Openlayers 6中移动点

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    image: new ol.style.Circle({
      radius: 6,
      fill: new ol.style.Fill({ color: 'red' }),
      stroke: new ol.style.Stroke({ color: 'white', width: 2 })
    })
  })
});

var point = new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude]));
var feature = new ol.Feature(point);

vectorLayer.getSource().addFeature(feature);

var duration = 2000; // 动画持续时间（毫秒）
var start = new Date().getTime(); // 动画开始时间

function animatePoint(event) {
  var vectorContext = event.vectorContext;
  var frameState = event.frameState;
  var elapsedTime = frameState.time - start;

  if (elapsedTime > duration) {
    elapsedTime = duration;
  }

  // 计算当前位置
  var currentPoint = new ol.geom.Point([
    startPoint[0] + (endPoint[0] - startPoint[0]) * (elapsedTime / duration),
    startPoint[1] + (endPoint[1] - startPoint[1]) * (elapsedTime / duration)
  ]);

  // 清空图层
  vectorContext.clearRect(frameState.extent);

  // 绘制移动点
  vectorContext.setStyle(new ol.style.Style({
    image: new ol.style.Circle({
      radius: 6,
      fill: new ol.style.Fill({ color: 'red' }),
      stroke: new ol.style.Stroke({ color: 'white', width: 2 })
    })
  }));
  vectorContext.drawGeometry(currentPoint);

  // 继续动画
  if (elapsedTime < duration) {
    map.render();
  }
}

// 注册动画事件
map.on('postcompose', animatePoint);
map.render();