mapbox点位动态连线

<template>
	<div class="trajectory">
		<div id="container" class="trajectory-container"></div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import mapboxgl from 'mapbox-gl';
import imgPoint from '../../../../assets/images/map/point12.png';
import * as turf from '@turf/turf';
const publick = `${import.meta.env.BASE_URL}`;
const coordinates = [
	[104.0668, 30.5728],
	[104.0709, 30.5738],
	[104.067, 30.5748],
	[104.0691, 30.5758],
	[104.0651, 30.5768],
	[104.0691, 30.5798],
	[104.0701, 30.5818],
	[104.0671, 30.5838],
	[104.0671, 30.5808],
];
const pointsGeoJSON = {
	type: 'FeatureCollection',
	features: coordinates.map((coord) => ({
		type: 'Feature',
		geometry: {
			type: 'Point',
			coordinates: coord,
		},
		properties: {}, // 可以在此处添加任何需要的属性
	})),
};
let pointIndex = 0;
let index = 0;
const init = () => {
	mapboxgl.accessToken = null;
	class Cjmapbox extends mapboxgl.Map {}
	// eslint-disable-next-line @typescript-eslint/no-empty-function
	Cjmapbox.prototype.__proto__._authenticate = function () {};
	const map = new mapboxgl.Map({
		container: 'container',
		style: {
			version: 8,
			name: 'BlankMap',
			glyphs: `${publick}lib/glyphs/{fontstack}/{range}.pbf`,
			sources: {},
			layers: [
				{
					id: 'background',
					type: 'background',
					paint: {
						'background-color': '#08294A',
					} /* 背景颜色 */,
				},
			],
		},
		center: [104.0668, 30.5728], // Set the initial center of the map
		zoom: 14,
	});
	map.on('load', () => {
		map.addSource('DZDT_Vector_BZB', {
			type: 'raster',
			tiles: [
				'http://t3.tianditu.com/DataServer?T=vec_w&tk=915de993ea6873664830bf5d8217723c&x={x}&y={y}&l={z}',
			],
			tileSize: 256,
		});
		map.addLayer({
			id: 'DZDT_Vector_BZB',
			type: 'raster',
			source: 'DZDT_Vector_BZB',
			paint: {},
		});
		map.addSource('point', {
			type: 'geojson',
			data: pointsGeoJSON,
		});

		// 添加点图层
		map.addLayer({
			id: 'pointLayer',
			type: 'circle',
			source: 'point',
			paint: {
				'circle-radius': 8,
				'circle-color': '#B42222',
			},
		});
		map.addSource('line', {
			type: 'geojson',
			data: {
				type: 'FeatureCollection',
				features: [],
			},
		});

		// 添加线条图层
		map.addLayer({
			id: 'lineLayer',
			type: 'line',
			source: 'line',
			layout: {
				'line-join': 'round',
				'line-cap': 'round',
			},
			paint: {
				'line-color': '#4682B4',
				'line-width': 3,
			},
		});
		animateLine();
		function animateLine() {
			if (index < coordinates.length) {
				// 更新线条数据
				const currentLine = {
					type: 'Feature',
					geometry: {
						type: 'LineString',
						coordinates: coordinates.slice(0, index + 1),
					},
				};

				// 更新点数据
				// const currentPoint = {
				// 	type: 'Feature',
				// 	geometry: {
				// 		type: 'Point',
				// 		coordinates: coordinates[index],
				// 	},
				// };

				// 更新地图上的数据源
				map.getSource('line').setData(currentLine);
				// map.getSource('point').setData({
				// 	type: 'FeatureCollection',
				// 	features: [currentPoint],
				// });

				index++;
				setTimeout(animateLine, 100); // 设置延迟1秒
			}
		}
		setInterval(() => {
			if (map.getLayer('lineLayer')) {
				map.removeLayer('lineLayer');
				map.removeSource('line');
			}

			map.addSource('line', {
				type: 'geojson',
				data: {
					type: 'FeatureCollection',
					features: [],
				},
			});

			// 添加线条图层
			map.addLayer({
				id: 'lineLayer',
				type: 'line',
				source: 'line',
				layout: {
					'line-join': 'round',
					'line-cap': 'round',
				},
				paint: {
					'line-color': '#4682B4',
					'line-width': 3,
				},
			});
			index = 0;
			// 开始动画绘制轨迹
			animateLine();
		}, 2000);
	});
};
onMounted(() => {
	init();
});
</script>
<style lang="scss" scoped>
.trajectory {
	width: 100%;
	height: 100%;
	position: relative;
	&-container {
		width: 100%;
		height: 100%;
	}
}
</style>