openlayer 轨迹动画（方式一）使用ol-ext

ol-ext官方示例地址：ol-ext

示例代码实测可用

javascript 复制代码

<!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，可以参考做以下修改

javascript 复制代码

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