ol-ext官方示例地址：ol-ext
示例代码 实测可用
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>点沿线动画</title><!-- Openlayers --><link rel="stylesheet" href="./dist/ol.css" /><script type="text/javascript" src="./dist/ol.js"></script><!-- ol-ext --><link rel="stylesheet" href="./dist/ol-ext.css" /><script type="text/javascript" src="./dist/ol-ext.js"></script><style type="text/css">html,body,#map {margin: 0px;padding: 0px;width: 100%;height: 100%;}</style></head><body><div id="map"></div></body><script type="text/javascript">function transform(pois) {return ol.proj.transform(pois, 'EPSG:4326', 'EPSG:3857')}var tileLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'})});var map = new ol.Map({controls: [],target: 'map',layers: [tileLayer],view: new ol.View({center: transform([103.584297498027, 36.119086450265]),zoom: 4,})});// 线var lineCoord = [[79.78351732091059, 38.26132508806543],[91.24445696667777, 40.75626733863021],[95.39289017514336, 33.53665615186689],[101.72101517514338, 38.866081722355915],[106.7132069666778, 33.18429652688876],[115.29132982091058, 36.190051824120644]];var polyline = new ol.geom.LineString(lineCoord);polyline.transform('EPSG:4326', 'EPSG:3857');const routeFeature = new ol.Feature({type: 'route',geometry: polyline,});const startMarker = new ol.Feature({type: 'icon',geometry: new ol.geom.Point(polyline.getFirstCoordinate()),});const endMarker = new ol.Feature({type: 'icon',geometry: new ol.geom.Point(polyline.getLastCoordinate()),});const position = startMarker.getGeometry().clone();const geoMarker = new ol.Feature({type: 'geoMarker',geometry: position,});const styles = {'route': new ol.style.Style({stroke: new ol.style.Stroke({width: 6,color: [237, 212, 0, 0.8],}),}),'icon': new ol.style.Style({image: new ol.style.Icon({anchor: [0.5, 1],src: '../openlayer/summary/node_blue.gif',}),}),'geoMarker': new ol.style.Style({image: new ol.style.RegularShape({radius: 14,points: 3,fill: new ol.style.Fill({color: '#00f'}),stroke: new ol.style.Stroke({color: '#fff',width: 2})}),// image: new ol.style.Icon({// anchor: [0.5, 1],// src: '../openlayer/summary/node_blue.gif',// }),stroke: new ol.style.Stroke({color: [0, 0, 255],width: 2}),fill: new ol.style.Fill({color: [0, 0, 255, 0.3]})}),};const vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({features: [routeFeature, geoMarker, startMarker, endMarker],}),style: (feature) => {return styles[feature.get('type')];},})map.addLayer(vectorLayer);// 核心代码var anim, controler;function animateFeature() {if (routeFeature) {anim = new ol.featureAnimation.Path({path: routeFeature,rotate: true,easing: ol.easing.linear,speed: 500,// revers: true});anim.on('animationstart', (e) => {console.log('start')})/**anim.on('animating', (e) => {map.getView().setCenter(e.geom.getCoordinates())map.getView().setRotation(e.rotation || 0)})**/anim.on('animationend', (e) => {console.log('end')})controler = vectorLayer.animateFeature(geoMarker, anim);}}animateFeature()</script>
</html>本示例官方地址：ol-ext: Openlayers feature animation
如果是react或者vue组件式开发，示例中html部分需要使用import方式引入ol，可以参考做以下修改
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import Path from 'ol-ext/featureanimation/Path'
import { Style, Stroke, Fill, RegularShape, Icon } from 'ol/style.js';
import Feature from 'ol/Feature';
import { Point } from 'ol/geom';
import { easeOut, linear } from 'ol/easing';
import LineString from "ol/geom/LineString.js";// VectorLayer 、VectorSource
const vectorLayer = new VectorLayer({source: new VectorSource({features: [routeFeature, geoMarker, startMarker, endMarker],}),style: (feature) => {return styles[feature.get('type')];},
})
// 动画核心代码
var anim, controler;
function animateFeature() {if (routeFeature) {anim = new Path({path: routeFeature,rotate: true,easing: linear,speed: 500,// revers: true});anim.on('animationstart', (e) => {console.log('start')})/**anim.on('animating', (e) => {map.getView().setCenter(e.geom.getCoordinates())map.getView().setRotation(e.rotation || 0)})**/anim.on('animationend', (e) => {console.log('end')})controler = vectorLayer.animateFeature(geoMarker, anim);}
}
animateFeature()
页交换算法)
