openlayers实现路径动画

article/2025/10/24 13:36:47

实现效果如下
请添加图片描述

主要代码

import {Feature} from 'ol';
import {LineString, Point} from 'ol/geom';
import {Icon, Stroke, Fill, Style} from 'ol/style';
import {getVectorContext} from 'ol/render';// 路径动画图层
let traceSource = new VectorSource({});
let moveLayer = new VectorLayer({source: traceSource
});
let lastTime;
let distance;/*** @description 创建路径动画图层* @param {*} map 地图对象* @param {*} lineFeature 路径线段要素*/
function createMarkAnimation(map, lineFeature){// 根据路径线段的起点，创建移动元素点let personGeo = new Point(lineFeature.getGeometry().getFirstCoordinate());const markFeature = new Feature({type: 'moveMark',geometry: personGeo});const markStyle = new Style({image: new Icon({anchor: [0.5, 0.9],src: person_run	//---自行设置移动元素点的图片路径})});markFeature.setStyle(markStyle);traceSource.addFeature(markFeature);map.addLayer(moveLayer);// 开始路径动画lastTime = Date.now();distance = 0;moveLayer.on('postrender', e => {startRunAnimation(map, e, 300, lineFeature, personGeo, markStyle);});
}/*** @description 开始路径动画* @param {*} map_ol 地图* @param {*} e postrender事件参数* @param {*} speed 移动速度* @param {*} feature 路径线段元素* @param {*} geometry 运动元素几何对象*/
function startRunAnimation(map_ol, e, speed, feature, geometry, style) {const time = e.frameState.time;const elapsedTime = time - lastTime;distance = (distance + (speed * elapsedTime) / 1e6) % 2;if (distance >= 1) distance = 0; //从头重新开始运动lastTime = time;const currentCoordinate = feature.getGeometry().getCoordinateAt(distance > 1 ? 2 - distance : distance);geometry.setCoordinates(currentCoordinate);const vectorContext = getVectorContext(e);vectorContext.setStyle(style);vectorContext.drawGeometry(geometry);//告诉OpenLayers继续postrender动画map_ol.render();
}