leaflet快速实现精美的轨迹回放功能

大家好，欢迎来到IT知识分享网。

本文介绍如何通过插件Leaflet.TrackPlayer来简洁高效的在leaflet上实现轨迹回放功能，以下仅做基础示意，更多功能和用法请参见文档。

1.搭建基础的leaflet开发环境

—— Leaflet.TrackPlayer支持在多个环境下使用，本文通过vue3来演示。创建index.vue并写入：

<template> <div id="map"></div> </template> <script setup> import L from "leaflet"; import "leaflet/dist/leaflet.css"; import { onMounted } from "vue"; onMounted(() => { let map = L.map("map", { zoom: 14, center: [34.532,108.4], }); L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map); }); </script> <style scoped> #map { height: 800px; width: 800px; } </style> 

2.安装并引入Leaflet.TrackPlayer

cmd执行：

npm install leaflet-trackplayer 

引入：

import "leaflet-trackplayer"; 

3.将播放器对象添加至地图

在map对象创建后添加轨迹播放器到地图上：

//模拟一段轨迹数据 let path = [ { lat: 34.744, lng: 108.363, }, { lat: 34.0855, lng: 108.374, }, { lat: 34.0855, lng: 108.374, }, { lat: 34.744, lng: 108.043, }, { lat: 34.0156, lng: 108.707, }, { lat: 34.5405, lng: 108.762, }, { lat: 34.626, lng: 108.713, }, { lat: 34.856, lng: 108.014, }, { lat: 34.856, lng: 108.014, }, { lat: 34.108, lng: 108.357, }, { lat: 34.5885, lng: 108.152, }, { lat: 34.71, lng: 108.826, }, { lat: 34.2086, lng: 108.609, }, { lat: 34.5925, lng: 108.506, }, { lat: 34.153, lng: 108.042, }, { lat: 34.2156, lng: 108.532, }, { lat: 34.8585, lng: 108.813, }, { lat: 34.199, lng: 108.819, }, { lat: 34.015, lng: 108.344, }, { lat: 34.0776, lng: 108.133, }, { lat: 34.673, lng: 108.137, }, { lat: 34.4085, lng: 108.336, }, { lat: 34.241, lng: 108.235, }, { lat: 34.3134, lng: 108.48, }, { lat: 34.76, lng: 108.282, }, { lat: 34.19, lng: 108.538, }, { lat: 34.571, lng: 108.209, }, { lat: 34.13, lng: 108.716, }, { lat: 34.847, lng: 108.98, }, { lat: 34.8556, lng: 108.68, }, { lat: 34.8306, lng: 108.017, }, { lat: 34.055, lng: 108.179, }, { lat: 34.8865, lng: 108.83, }, { lat: 34.8384, lng: 108.179, }, { lat: 34.356, lng: 108.523, }, { lat: 34.7035, lng: 108.133, }, { lat: 34.7436, lng: 108.839, }, { lat: 34.4014, lng: 108.667, }, { lat: 34.296, lng: 108.917, }, { lat: 34.379, lng: 108.928, }, { lat: 34.8346, lng: 108.57, }, { lat: 34.138, lng: 108.677, }, { lat: 34.77, lng: 108., }, { lat: 34.291, lng: 108.407, }, { lat: 34.9045, lng: 108.484, }, { lat: 34.2025, lng: 108.632, }, { lat: 34.332, lng: 108.717, }, { lat: 34.246, lng: 108.984, }, { lat: 34.727, lng: 108.233, }, { lat: 34.456, lng: 108.685, }, { lat: 34.456, lng: 108.685, }, { lat: 34.1245, lng: 108.264, }, { lat: 34.706, lng: 108.812, }, { lat: 34.1195, lng: 108.26, }, { lat: 34.4265, lng: 108.795, }, { lat: 34.3936, lng: 108.152, }, { lat: 34.891, lng: 108.248, }, { lat: 34.933, lng: 108.01, }, { lat: 34.497, lng: 108.815, }, { lat: 34.032, lng: 108.708, }, { lat: 34.0856, lng: 108.98, }, { lat: 34.5785, lng: 108.954, }, { lat: 34.142, lng: 108.011, }, { lat: 34.8785, lng: 108.353, }, { lat: 34.6124, lng: 108.685, }, { lat: 34.8574, lng: 108.843, }, { lat: 34.006, lng: 108.112, }, { lat: 34.669, lng: 108.777, }, { lat: 34.2816, lng: 108.59, }, { lat: 34., lng: 108.631, }, { lat: 34.574, lng: 108.936, }, { lat: 34.723, lng: 108.933, }, { lat: 34.721, lng: 108.467, }, { lat: 34.897, lng: 108.464, }, { lat: 34.37, lng: 108.553, }, { lat: 34.733, lng: 108.63, }, { lat: 34.836, lng: 108.066, }, { lat: 34.836, lng: 108.066, }, { lat: 34.3054, lng: 108.054, }, { lat: 34.758, lng: 108.58, }, { lat: 34.7326, lng: 108.166, }, { lat: 34., lng: 108.831, }, { lat: 34.2736, lng: 108.797, }, { lat: 34.363, lng: 108.239, }, { lat: 34.7114, lng: 108.763, }, { lat: 34.241, lng: 108.194, }, { lat: 34.976, lng: 108.992, }, { lat: 34.049, lng: 108.702, }, { lat: 34.475, lng: 108.133, }, { lat: 34.9126, lng: 108.818, }, { lat: 34.252, lng: 108.094, }, { lat: 34.748, lng: 108.198, }, { lat: 34.8765, lng: 108.212, }, { lat: 34.522, lng: 108.06, }, { lat: 34.202, lng: 108.609, }, { lat: 34.6745, lng: 108.593, }, { lat: 34.317, lng: 108.059, }, { lat: 34.143, lng: 108.266, }, { lat: 34.983, lng: 108.304, }, { lat: 34.252, lng: 108.423, }, { lat: 34.252, lng: 108.423, }, { lat: 34.6544, lng: 108.462, }, { lat: 34.0934, lng: 108.951, }, { lat: 34.869, lng: 108.597, }, { lat: 34.173, lng: 108.386, }, { lat: 34.009, lng: 108.001, }, { lat: 34.852, lng: 108.834, }, { lat: 34.852, lng: 108.834, }, { lat: 34.137, lng: 108.015, }, { lat: 34.342, lng: 108.149, }, { lat: 34.7865, lng: 108.171, }, { lat: 34.423, lng: 108.085, }, { lat: 34.423, lng: 108.085, }, { lat: 34.7524, lng: 108.012, }, { lat: 34.951, lng: 108.164, }, { lat: 34.587, lng: 108.481, }, { lat: 34.58, lng: 108.181, }, { lat: 34.263, lng: 108.023, }, { lat: 34.298, lng: 108.113, }, { lat: 34.298, lng: 108.113, }, { lat: 34.584, lng: 108.535, }, { lat: 34.677, lng: 108.593, }, { lat: 34.318, lng: 108.468, }, { lat: 34.534, lng: 108.388, }, { lat: 34.868, lng: 108.85, }, { lat: 34.293, lng: 108.814, }, { lat: 34.7175, lng: 108.113, }, { lat: 34.886, lng: 108.238, }, { lat: 34.951, lng: 108.726, }, { lat: 34.1015, lng: 108.632, }, { lat: 34.873, lng: 108.645, }, { lat: 34.906, lng: 108.063, }, { lat: 34.4165, lng: 108.32, }, { lat: 34.0914, lng: 108.237, }, { lat: 34.031, lng: 108.46, }, { lat: 34.907, lng: 108.41, }, { lat: 34.554, lng: 108.566, }, { lat: 34.652, lng: 108.4, }, { lat: 34.652, lng: 108.4, }, { lat: 34.9814, lng: 108.745, }, { lat: 34.703, lng: 108.851, }, { lat: 34.566, lng: 108.548, }, { lat: 34.566, lng: 108.548, }, { lat: 34.883, lng: 108.069, }, ]; //定义沿着轨迹移动的Icon let markerIcon = L.icon({ iconSize: [27, 54], iconUrl: new URL("./assets/car.png", import.meta.url).href, iconAnchor: [13.5, 27], }); //创建播放器对象并添加至地图 let track = new L.TrackPlayer(path, { markerIcon }).addTo(map); 

car.png

查看运行结果，轨迹播放器已经成功添加至地图上了：

4.开始播放

//地图设置到合适的缩放级别 map.setZoom(17,{animate: false}); //开始播放 track.start(); 

只需要调用start()方法就能开始播放了：

5.其他情况

假设要播放人行走的轨迹，那通常情况下不需要使marker随行进方向旋转，改写创建播放器相关代码：

//定义沿着轨迹移动的marker let markerIcon = L.icon({ iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png", iconAnchor: [12.5, 41] }); //创建播放器对象并添加至地图//markerRotation:false 使marker不自动旋转 let track = new L.TrackPlayer(path, { markerIcon,markerRotation:false }).addTo(map); 

在这里插入图片描述

6.完整代码

<template> <div id="map"></div> </template> <script setup> import L from "leaflet"; import "leaflet/dist/leaflet.css"; import "leaflet-trackplayer"; import { onMounted } from "vue"; onMounted(() => { let map = L.map("map", { zoom: 14, center: [34.532,108.4], }); L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map); //模拟一段轨迹数据 let path = [ { lat: 34.744, lng: 108.363, }, { lat: 34.0855, lng: 108.374, }, { lat: 34.0855, lng: 108.374, }, { lat: 34.744, lng: 108.043, }, { lat: 34.0156, lng: 108.707, }, { lat: 34.5405, lng: 108.762, }, { lat: 34.626, lng: 108.713, }, { lat: 34.856, lng: 108.014, }, { lat: 34.856, lng: 108.014, }, { lat: 34.108, lng: 108.357, }, { lat: 34.5885, lng: 108.152, }, { lat: 34.71, lng: 108.826, }, { lat: 34.2086, lng: 108.609, }, { lat: 34.5925, lng: 108.506, }, { lat: 34.153, lng: 108.042, }, { lat: 34.2156, lng: 108.532, }, { lat: 34.8585, lng: 108.813, }, { lat: 34.199, lng: 108.819, }, { lat: 34.015, lng: 108.344, }, { lat: 34.0776, lng: 108.133, }, { lat: 34.673, lng: 108.137, }, { lat: 34.4085, lng: 108.336, }, { lat: 34.241, lng: 108.235, }, { lat: 34.3134, lng: 108.48, }, { lat: 34.76, lng: 108.282, }, { lat: 34.19, lng: 108.538, }, { lat: 34.571, lng: 108.209, }, { lat: 34.13, lng: 108.716, }, { lat: 34.847, lng: 108.98, }, { lat: 34.8556, lng: 108.68, }, { lat: 34.8306, lng: 108.017, }, { lat: 34.055, lng: 108.179, }, { lat: 34.8865, lng: 108.83, }, { lat: 34.8384, lng: 108.179, }, { lat: 34.356, lng: 108.523, }, { lat: 34.7035, lng: 108.133, }, { lat: 34.7436, lng: 108.839, }, { lat: 34.4014, lng: 108.667, }, { lat: 34.296, lng: 108.917, }, { lat: 34.379, lng: 108.928, }, { lat: 34.8346, lng: 108.57, }, { lat: 34.138, lng: 108.677, }, { lat: 34.77, lng: 108., }, { lat: 34.291, lng: 108.407, }, { lat: 34.9045, lng: 108.484, }, { lat: 34.2025, lng: 108.632, }, { lat: 34.332, lng: 108.717, }, { lat: 34.246, lng: 108.984, }, { lat: 34.727, lng: 108.233, }, { lat: 34.456, lng: 108.685, }, { lat: 34.456, lng: 108.685, }, { lat: 34.1245, lng: 108.264, }, { lat: 34.706, lng: 108.812, }, { lat: 34.1195, lng: 108.26, }, { lat: 34.4265, lng: 108.795, }, { lat: 34.3936, lng: 108.152, }, { lat: 34.891, lng: 108.248, }, { lat: 34.933, lng: 108.01, }, { lat: 34.497, lng: 108.815, }, { lat: 34.032, lng: 108.708, }, { lat: 34.0856, lng: 108.98, }, { lat: 34.5785, lng: 108.954, }, { lat: 34.142, lng: 108.011, }, { lat: 34.8785, lng: 108.353, }, { lat: 34.6124, lng: 108.685, }, { lat: 34.8574, lng: 108.843, }, { lat: 34.006, lng: 108.112, }, { lat: 34.669, lng: 108.777, }, { lat: 34.2816, lng: 108.59, }, { lat: 34., lng: 108.631, }, { lat: 34.574, lng: 108.936, }, { lat: 34.723, lng: 108.933, }, { lat: 34.721, lng: 108.467, }, { lat: 34.897, lng: 108.464, }, { lat: 34.37, lng: 108.553, }, { lat: 34.733, lng: 108.63, }, { lat: 34.836, lng: 108.066, }, { lat: 34.836, lng: 108.066, }, { lat: 34.3054, lng: 108.054, }, { lat: 34.758, lng: 108.58, }, { lat: 34.7326, lng: 108.166, }, { lat: 34., lng: 108.831, }, { lat: 34.2736, lng: 108.797, }, { lat: 34.363, lng: 108.239, }, { lat: 34.7114, lng: 108.763, }, { lat: 34.241, lng: 108.194, }, { lat: 34.976, lng: 108.992, }, { lat: 34.049, lng: 108.702, }, { lat: 34.475, lng: 108.133, }, { lat: 34.9126, lng: 108.818, }, { lat: 34.252, lng: 108.094, }, { lat: 34.748, lng: 108.198, }, { lat: 34.8765, lng: 108.212, }, { lat: 34.522, lng: 108.06, }, { lat: 34.202, lng: 108.609, }, { lat: 34.6745, lng: 108.593, }, { lat: 34.317, lng: 108.059, }, { lat: 34.143, lng: 108.266, }, { lat: 34.983, lng: 108.304, }, { lat: 34.252, lng: 108.423, }, { lat: 34.252, lng: 108.423, }, { lat: 34.6544, lng: 108.462, }, { lat: 34.0934, lng: 108.951, }, { lat: 34.869, lng: 108.597, }, { lat: 34.173, lng: 108.386, }, { lat: 34.009, lng: 108.001, }, { lat: 34.852, lng: 108.834, }, { lat: 34.852, lng: 108.834, }, { lat: 34.137, lng: 108.015, }, { lat: 34.342, lng: 108.149, }, { lat: 34.7865, lng: 108.171, }, { lat: 34.423, lng: 108.085, }, { lat: 34.423, lng: 108.085, }, { lat: 34.7524, lng: 108.012, }, { lat: 34.951, lng: 108.164, }, { lat: 34.587, lng: 108.481, }, { lat: 34.58, lng: 108.181, }, { lat: 34.263, lng: 108.023, }, { lat: 34.298, lng: 108.113, }, { lat: 34.298, lng: 108.113, }, { lat: 34.584, lng: 108.535, }, { lat: 34.677, lng: 108.593, }, { lat: 34.318, lng: 108.468, }, { lat: 34.534, lng: 108.388, }, { lat: 34.868, lng: 108.85, }, { lat: 34.293, lng: 108.814, }, { lat: 34.7175, lng: 108.113, }, { lat: 34.886, lng: 108.238, }, { lat: 34.951, lng: 108.726, }, { lat: 34.1015, lng: 108.632, }, { lat: 34.873, lng: 108.645, }, { lat: 34.906, lng: 108.063, }, { lat: 34.4165, lng: 108.32, }, { lat: 34.0914, lng: 108.237, }, { lat: 34.031, lng: 108.46, }, { lat: 34.907, lng: 108.41, }, { lat: 34.554, lng: 108.566, }, { lat: 34.652, lng: 108.4, }, { lat: 34.652, lng: 108.4, }, { lat: 34.9814, lng: 108.745, }, { lat: 34.703, lng: 108.851, }, { lat: 34.566, lng: 108.548, }, { lat: 34.566, lng: 108.548, }, { lat: 34.883, lng: 108.069, }, ]; //定义沿着轨迹移动的marker let markerIcon = L.icon({ iconSize: [27, 54], iconUrl: new URL("./assets/car.png", import.meta.url).href, iconAnchor: [13.5, 27], }); //创建播放器对象并添加至地图 let track = new L.TrackPlayer(path, { markerIcon }).addTo(map); //地图设置到合适的缩放级别 map.setZoom(17,{animate: false}); //开始播放 track.start(); }); </script> <style scoped> #map { height: 800px; width: 800px; } </style> 

car.png

总结

本文使用插件Leaflet.TrackPlayer实现了一个基础的轨迹回放功能，另外该插件还支持自定义线路样式、设置行进速度、事件监听等相关功能。具体请参阅插件文档。

对于该插件的有任何建议或意见，可以在Issues里提出。如果有帮助到你，请点个star。