openlayer点沿线动画

dragonzoebai

已于 2023-11-27 09:36:17 修改

阅读量299

点赞数

分类专栏： openlayer GIS 文章标签： openlayers webgis

于 2023-02-08 09:04:50 首次发布

本文链接：https://blog.csdn.net/dragonzoebai/article/details/128929259

版权

GIS 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

openlayer

2 篇文章 0 订阅

订阅专栏

Marker Animation

核心代码：

		// 开始动画
		let lastTime = Date.now();
		let distance = 0;
		function moveFeature(event) {
			const speed = 100;
			const time = event.frameState.time;
			const elapsedTime = time - lastTime;
			distance = (distance + (speed * elapsedTime) / 1e6) % 2;
			lastTime = time;
			const currentCoordinate = polyline.getCoordinateAt(
				distance > 1 ? 2 - distance : distance
			);
			position.setCoordinates(currentCoordinate);
			const vectorContext = ol.render.getVectorContext(event);
			vectorContext.setStyle(styles.geoMarker);
			vectorContext.drawGeometry(position);
			map.render();
		}
		vectorLayer.on('postrender', moveFeature);

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>点沿线动画</title>
		<!-- 
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
		<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
		 -->
		<link rel="stylesheet" href="./js/ol.css" />
		<script type="text/javascript" src="./js/ol.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: './summary/node_blue.gif',
				}),
			}),
			'geoMarker': new ol.style.Style({
				image: new ol.style.Circle({
					radius: 7,
					fill: new ol.style.Fill({
						color: 'black'
					}),
					stroke: new ol.style.Stroke({
						color: 'white',
						width: 2,
					}),
				}),
			}),
		};

		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);
		
		// 开始动画
		let lastTime = Date.now();
		let distance = 0;
		function moveFeature(event) {
			const speed = 100;
			const time = event.frameState.time;
			const elapsedTime = time - lastTime;
			distance = (distance + (speed * elapsedTime) / 1e6) % 2;
			lastTime = time;
			const currentCoordinate = polyline.getCoordinateAt(
				distance > 1 ? 2 - distance : distance
			);
			position.setCoordinates(currentCoordinate);
			const vectorContext = ol.render.getVectorContext(event);
			vectorContext.setStyle(styles.geoMarker);
			vectorContext.drawGeometry(position);
			map.render();
		}
		vectorLayer.on('postrender', moveFeature);
		
	</script>
</html>