Leaflet实现轨迹播放动画效果

最新推荐文章于 2025-04-03 16:34:02 发布
Lucky@czj
最新推荐文章于 2025-04-03 16:34:02 发布
阅读量1.2k
点赞数
文章标签： Leaflet GIS 轨迹动画
本文链接：https://blog.csdn.net/czj_com/article/details/134557575
版权
效果图如下：
<!DOCTYPE html>
<html>

<head>
	<title>轨迹</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- 引入样式 -->
	<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
	<link rel="stylesheet" href="../../lib/element-ui@2.13.0/index.css" />
	<style>
		html,
		body,
		#map {
			height: 100%;
			padding: 0;
			margin: 0;
		}

		.menuBar {
			position: absolute;
			text-align: center;
			top: 10px;
			margin: 0 50px;
			padding: 5px;
			border-radius: 3px;
			z-index: 999;
			color: #ffffff;
			background-color: rgba(0, 168, 0, 1);
		}

		.timeslider {
			position: absolute;
			z-index: 999;
			width: 100%;
			height: 100px;
			background: lightseagreen;
			bottom: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.block {
			width: 80%;
		}

		.timeslider .slider-demo-block {
			display: flex;
			align-items: center;
		}

		.slider-demo-block .el-slider {
			margin-top: 0;
			margin-left: 12px;
		}

		.el-slider__marks-text {
			position: absolute;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			font-size: 14px;
			color: #fff;
			margin-top: 15px;
		}
	</style>
	<script src="../../lib/vue@2.6.11/vue.js"></script>
	<!-- <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> -->
	<!-- 引入组件库 -->
	<!-- <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script> -->
	<script src="../../lib/element-ui@2.13.0/index.js"></script>
	<script src="../../js/prjconfig.js" maptype="leaflet"></script>
	<!-- 引入插件 -->
	<script src="../../lib/leaflet/plugins/leaflet.polylineDecorator.js"></script>
	<script src="../../lib/leaflet/plugins/Leaflet.AnimatedMarker.js"></script>
</head>

<body>
	<div id="map"></div>
	<div class="menuBar">
		<input type="button" value="开始" onclick="startClick()" />
		<input type="button" value="暂停" onclick="pauseClick()" />
		<input type="button" value="加速" onclick="speetUp()" />
		<input type="button" value="减速" onclick="speetDown()" />
		<input type="button" value="停止" onclick="stopClick()" />
	</div>
	<div id="app" class="timeslider">
		<div class="block">
			<el-slider v-model="value" :max="120" :step="10" :marks="marks" :show-tooltip="false" @change="change">
			</el-slider>
		</div>
	</div>
	<script>
		//'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
		var map = L.map("map", {
			crs: L.CRS.EPSG4326, //L.CRS.EPSG3857
			center: [MAPINIT.Location.lat, MAPINIT.Location.lon], //[40.76339, 106.9477844],
			zoom: MAPINIT.Location.zoom,
			minZoom: MAPINIT.zoomsExtent[0],
			maxZoom: MAPINIT.zoomsExtent[1],
			zoomControl: true,
		});
		// 使用WMTS Key-Value加载地图服务
		let _getc =
			"http://192.168.1.212:8095/server/default/getTile/wmts?request=GetCapabilities&service=wmts&layer=yx";
		MAPCONFIG.MAPWMTS_IMG =
			"http://192.168.1.212:8095/server/vtile/getTile/wmts";
		let ls =
			"http://192.168.1.212:8095/server/vtile/getTile/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=yx&STYLE=default&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=''";
		L.tileLayer(ls, {
			zoomOffset: 1,
		}).addTo(map);
		map.setView(L.latLng(37.550339, 104.114129), 4); //设置缩放级别及中心点

		let speetX = 1; // 默认速度倍数
		// 加速
		function speetUp() {
			speetX = speetX * 2;
			animatedMarker.setSpeetX(speetX);
		}

		// 减速
		function speetDown() {
			speetX = speetX / 2;
			animatedMarker.setSpeetX(speetX);
		}

		// 开始
		function startClick() {
			animatedMarker.start();
		}

		// 暂停
		function pauseClick() {
			animatedMarker.pause();
		}

		// 停止
		function stopClick() {
			newLatlngs = [];
			animatedMarker.stop();
		}

		var routeLine;
		var realRouteLine;
		var decorator;
		var animatedMarker;
		var newLatlngs;
		// 初始化轨迹
		function initTrack(coor) {
			let latlngs = coor;
			// 小车速度
			var speedList = [
				1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 5, 5, 4, 4, 4, 3, 2, 2, 1, 1,
				1,
			];
			// 轨迹线
			routeLine = L.polyline(latlngs, {
				weight: 8,
			}).addTo(map);
			// 实时轨迹线
			realRouteLine = L.polyline([], {
				weight: 8,
				color: "#FF9900",
			}).addTo(map);
			// 轨迹方向箭头
			decorator = L.polylineDecorator(routeLine, {
				patterns: [
					{
						repeat: 50,
						symbol: L.Symbol.arrowHead({
							pixelSize: 5,
							headAngle: 75,
							polygon: false,
							pathOptions: {
								stroke: true,
								weight: 2,
								color: "#FFFFFF",
							},
						}),
					},
				],
			}).addTo(map);

			var carIcon = L.icon({
				iconSize: [37, 26],
				iconAnchor: [19, 13],
				iconUrl: "../../image/car.png",
			});
			// 动态marker
			animatedMarker = L.animatedMarker(routeLine.getLatLngs(), {
				speedList: speedList,
				interval: 200, // 默认为100mm
				icon: carIcon,
				playCall: updateRealLine,
			}).addTo(map);

			newLatlngs = [routeLine.getLatLngs()[0]];

			// 绘制已行走轨迹线（橙色那条）
			function updateRealLine(latlng) {
				newLatlngs.push(latlng);
				realRouteLine.setLatLngs(newLatlngs);
			}
		}

		// 清除polyline线
		function clearPolylineGroup(polyline_group) {
			latlngs = [];
			if (polyline_group) {
				map.removeLayer(polyline_group);
			}
		}

		// 清除轨迹方向箭头
		function clearArrow() {
			map.removeLayer(decorator);
		}

		// 清除marker
		function clearMarker() {
			map.removeLayer(animatedMarker);
		}

		// 重置清空地图上的轨迹、marker
		function resetMap() {
			clearPolylineGroup(routeLine);
			clearArrow(decorator);
			clearMarker(animatedMarker);
		}

		let app = new Vue({
			el: "#app",
			data: {
				message: "Hello Vue!",
				value: 0,
				marks: {
					0: "2023-01",
					10: "2023-02",
					20: "2023-03",
					30: "2023-04",
					40: "2023-05",
					50: "2023-06",
					60: "2023-07",
					70: "2023-08",
					80: "2023-09",
					90: "2023-10",
					100: "2023-11",
					110: "2023-12",
				},
				latlngs: [
					[39.898457, 116.391844],
					[39.898595, 116.377947],
					[39.898341, 116.368001],
					[39.898063, 116.357144],
					[39.899095, 116.351934],
					[39.905871, 116.35067],
					[39.922329, 116.3498],
					[39.931017, 116.349671],
					[39.939104, 116.349225],
					[39.942233, 116.34991],
					[39.947263, 116.366892],
					[39.947568, 116.387537],
					[39.947764, 116.401988],
					[39.947929, 116.410824],
					[39.947558, 116.42674],
					[39.9397, 116.427338],
					[39.932404, 116.427919],
					[39.923109, 116.428377],
					[39.907094, 116.429583],
					[39.906858, 116.41404],
					[39.906622, 116.405321],
					[39.906324, 116.394954],
					[39.906308, 116.391264],
					[39.916611, 116.390748],
				],
			},
			mounted() {
				this.getMonth();
				initTrack(this.latlngs);
			},
			methods: {
				change(e) {
					let step = e.toString();
					// console.log(Object.keys(this.marks));
					if (Object.keys(this.marks).indexOf(step) > -1) {
						console.log(this.marks[step]);
					}
					// console.log(this.value);
					if (this.value == 20) {
						resetMap();
					} else {
						resetMap();
						initTrack(this.latlngs);
					}
				},
				getMonth() {
					let dataArr = [];
					let data = new Date();
					let year = data.getFullYear();
					data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
					for (let i = 0; i < 12; i++) {
						data.setMonth(data.getMonth() - 1); //每次循环一次,月份值减1
						let m = data.getMonth() + 1;
						m = m < 10 ? "0" + m : m;
						dataArr.push(data.getFullYear() + "-" + m);
					}
					let list = dataArr.reverse();
					let obj = {};
					let labelArr = Object.keys(this.marks);
					labelArr.forEach((item, index) => {
						obj[item] = list[index];
					});
					this.marks = obj;
				},
			},
		});
	</script>
</body>

</html>