# 前言 **👉 [在线demo](https://zihelab.com/blog/examples/Leaflet/leaflet-trackplayer.html)👈** 本文介绍如何通过插件[Leaflet.TrackPlayer](https://github.com/weijun-lab/Leaflet.TrackPlayer)来简洁高效的在`leaflet`上实现轨迹回放功能，以下仅做基础示意，更多功能和用法请参见文档。这是我在工作之余开发的插件，对于该插件的有任何建议或意见，可以在[Issues](https://github.com/weijun-lab/Leaflet.TrackPlayer/issues)里提出。如果有帮助到你，请[点个star](https://github.com/weijun-lab/Leaflet.TrackPlayer)。 **喜报，已登录leaflet官网，如果有帮助到各位，请求[点个star](https://github.com/weijun-lab/Leaflet.TrackPlayer)。** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ea04b60628f47f69dbcdb0fd0569698~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=985&h=302&s=44268&e=png&b=fefefe) # 1.搭建基础的leaflet开发环境 —— Leaflet.TrackPlayer支持在多个环境下使用，本文通过vue3来演示。创建index.vue并写入： ```js ``` # 2.安装并引入Leaflet.TrackPlayer cmd执行： ```js npm install leaflet-trackplayer ``` 引入： ```js import "leaflet-trackplayer"; ``` # 3.将播放器对象添加至地图在`map`对象创建后添加轨迹播放器到地图上： ```js //模拟一段轨迹数据 let path = [ { lat: 34.25615548523744, lng: 108.91164044842363, }, { lat: 34.256155386830855, lng: 108.91179023713374, }, { lat: 34.256155386830855, lng: 108.91179023713374, }, { lat: 34.25607942383744, lng: 108.91177925878043, }, { lat: 34.255720609670156, lng: 108.91171038494707, }, { lat: 34.255607664345405, lng: 108.91169441655762, }, { lat: 34.25553269366626, lng: 108.91169442258713, }, { lat: 34.25544769867856, lng: 108.91173736885014, }, { lat: 34.25544769867856, lng: 108.91173736885014, }, { lat: 34.25541482067108, lng: 108.91157060617357, }, { lat: 34.255437230925885, lng: 108.91091151687152, }, { lat: 34.2554647726071, lng: 108.90999074936826, }, { lat: 34.255474922592086, lng: 108.90972209999609, }, { lat: 34.255470035735925, lng: 108.90952435653506, }, { lat: 34.25546585239153, lng: 108.90796530095042, }, { lat: 34.255466079902156, lng: 108.90748786950532, }, { lat: 34.255466139078585, lng: 108.90736001962813, }, { lat: 34.25546047844199, lng: 108.90659889522819, }, { lat: 34.25545553696015, lng: 108.90646504623344, }, { lat: 34.255455684520776, lng: 108.90610644487133, }, { lat: 34.25543990484673, lng: 108.90555904106137, }, { lat: 34.255434929044085, lng: 108.90550010453336, }, { lat: 34.25671044153241, lng: 108.90546803620235, }, { lat: 34.256994331993134, lng: 108.9054630187248, }, { lat: 34.2573861821876, lng: 108.90545199896282, }, { lat: 34.2583997892619, lng: 108.90543593456538, }, { lat: 34.25896857276571, lng: 108.90541491120209, }, { lat: 34.2600241555513, lng: 108.90541482639716, }, { lat: 34.26038901329847, lng: 108.9054088034598, }, { lat: 34.260957801498556, lng: 108.9053717970368, }, { lat: 34.261048767618306, lng: 108.90536579609017, }, { lat: 34.26174549083055, lng: 108.90536574011179, }, { lat: 34.262888033588865, lng: 108.9053716419483, }, { lat: 34.263321862668384, lng: 108.90536561345179, }, { lat: 34.26381066919356, lng: 108.90536057947523, }, { lat: 34.264314469827035, lng: 108.90535454535133, }, { lat: 34.264416428997436, lng: 108.90535453715839, }, { lat: 34.264545377344014, lng: 108.90535452679667, }, { lat: 34.26485025108296, lng: 108.90536549063917, }, { lat: 34.26494221420379, lng: 108.90536548324928, }, { lat: 34.265745895588346, lng: 108.9053544303257, }, { lat: 34.26596581086138, lng: 108.90534442324677, }, { lat: 34.2664006399377, lng: 108.90533339995, }, { lat: 34.26711335674291, lng: 108.90532235431407, }, { lat: 34.267682127119045, lng: 108.90532230860484, }, { lat: 34.267977007932025, lng: 108.90532228490632, }, { lat: 34.26842182796332, lng: 108.90532224915717, }, { lat: 34.26893662309246, lng: 108.90531221835984, }, { lat: 34.26961734908727, lng: 108.90530616999233, }, { lat: 34.27079687296456, lng: 108.90529608575685, }, { lat: 34.27079687296456, lng: 108.90529608575685, }, { lat: 34.270796835711245, lng: 108.90539697877264, }, { lat: 34.27080243135706, lng: 108.90641586657812, }, { lat: 34.270802076591195, lng: 108.9072299373526, }, { lat: 34.270812817234265, lng: 108.90777629238795, }, { lat: 34.270822675023936, lng: 108.90806094950152, }, { lat: 34.27082259586891, lng: 108.90822075550248, }, { lat: 34.27082849640933, lng: 108.9084135191401, }, { lat: 34.27083332877497, lng: 108.90873512064815, }, { lat: 34.27083823372032, lng: 108.90891189899708, }, { lat: 34.270843970260856, lng: 108.9093942860198, }, { lat: 34.270843671165785, lng: 108.90992459787954, }, { lat: 34.27084322644142, lng: 108.91067459821011, }, { lat: 34.270842940218785, lng: 108.91113596785353, }, { lat: 34.270842859216124, lng: 108.91126379113685, }, { lat: 34.270847625398574, lng: 108.91162328889843, }, { lat: 34.27084755144006, lng: 108.91173612991112, }, { lat: 34.27085335722669, lng: 108.91202471962777, }, { lat: 34.270852784122816, lng: 108.9128555142759, }, { lat: 34.27085267748, lng: 108.91300529292631, }, { lat: 34.27085254672574, lng: 108.91318702269936, }, { lat: 34.27085205628723, lng: 108.91385101989933, }, { lat: 34.27087119213721, lng: 108.91615435172467, }, { lat: 34.27087566746897, lng: 108.91675434843464, }, { lat: 34.2708814553737, lng: 108.91698994875553, }, { lat: 34.27085429757733, lng: 108.9171776307563, }, { lat: 34.27080602434836, lng: 108.91749908177066, }, { lat: 34.27080602434836, lng: 108.91749908177066, }, { lat: 34.270751948023054, lng: 108.91760590116054, }, { lat: 34.27073590010758, lng: 108.9176648001958, }, { lat: 34.270708807347326, lng: 108.91777660774166, }, { lat: 34.27070375357, lng: 108.91783650359831, }, { lat: 34.270708656282736, lng: 108.91793832501797, }, { lat: 34.27073056759363, lng: 108.91802317433239, }, { lat: 34.270778426427114, lng: 108.91815194371763, }, { lat: 34.27082633013241, lng: 108.91823279701194, }, { lat: 34.27090620143976, lng: 108.91833361195992, }, { lat: 34.27096613594049, lng: 108.91837653091702, }, { lat: 34.27103006872475, lng: 108.91841944945133, }, { lat: 34.271094016769126, lng: 108.91844639632818, }, { lat: 34.27115297737252, lng: 108.91846236313094, }, { lat: 34.27124992726748, lng: 108.91847333575198, }, { lat: 34.271362907088765, lng: 108.91844637465212, }, { lat: 34.27141590080522, lng: 108.9184303988106, }, { lat: 34.27146990941202, lng: 108.91839845127609, }, { lat: 34.271506924906745, lng: 108.91836650505593, }, { lat: 34.27161499324317, lng: 108.91824870518059, }, { lat: 34.27165204453143, lng: 108.91817882572266, }, { lat: 34.27169010556983, lng: 108.91809796526304, }, { lat: 34.27170014671252, lng: 108.91805004879423, }, { lat: 34.27170014671252, lng: 108.91805004879423, }, { lat: 34.271813130666544, lng: 108.91801809584462, }, { lat: 34.271926114560934, lng: 108.91798614283951, }, { lat: 34.27202208565869, lng: 108.91797515437597, }, { lat: 34.27211304847173, lng: 108.91797514704386, }, { lat: 34.27364144760009, lng: 108.91794807112001, }, { lat: 34.27430117651852, lng: 108.91794801793834, }, { lat: 34.27430117651852, lng: 108.91794801793834, }, { lat: 34.27452116643137, lng: 108.91786215053015, }, { lat: 34.27504196130342, lng: 108.91785212600149, }, { lat: 34.275856640147865, lng: 108.91783608824171, }, { lat: 34.27635543402423, lng: 108.91783604803085, }, { lat: 34.27635543402423, lng: 108.91783604803085, }, { lat: 34.277267066837524, lng: 108.91782499372012, }, { lat: 34.27870948266951, lng: 108.91780890532164, }, { lat: 34.27895038797587, lng: 108.91780289635481, }, { lat: 34.2793632206358, lng: 108.91779787178181, }, { lat: 34.28040878884263, lng: 108.91779279619023, }, { lat: 34.28146034867298, lng: 108.91779271140113, }, { lat: 34.28146034867298, lng: 108.91779271140113, }, { lat: 34.28263387644584, lng: 108.91777065508535, }, { lat: 34.28417326218677, lng: 108.91773359532593, }, { lat: 34.28442516136318, lng: 108.91772758544468, }, { lat: 34.28569565334534, lng: 108.91769553859388, }, { lat: 34.28609849266868, lng: 108.9176845252085, }, { lat: 34.28774477772293, lng: 108.91770036464814, }, { lat: 34.289932847077175, lng: 108.91769519685113, }, { lat: 34.29036166314886, lng: 108.91769516226238, }, { lat: 34.29064054341951, lng: 108.91769513976726, }, { lat: 34.291648114741015, lng: 108.91769006717632, }, { lat: 34.29183603934873, lng: 108.91768406243645, }, { lat: 34.29314945213906, lng: 108.91770591827063, }, { lat: 34.293712204034165, lng: 108.9177108641832, }, { lat: 34.294226985630914, lng: 108.91770583134237, }, { lat: 34.29428596006031, lng: 108.9177058265846, }, { lat: 34.29436110539907, lng: 108.9175131548741, }, { lat: 34.29435643485554, lng: 108.91715377349566, }, { lat: 34.29435732039652, lng: 108.916147466944, }, { lat: 34.29435732039652, lng: 108.916147466944, }, { lat: 34.294572232299814, lng: 108.91614145952745, }, { lat: 34.29463620453703, lng: 108.91614145436851, }, { lat: 34.29495306695566, lng: 108.91614142881548, }, { lat: 34.29495306695566, lng: 108.91614142881548, }, { lat: 34.29496736180883, lng: 108.91578701078069, }, ]; //定义沿着轨迹移动的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![car.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e056edffbd104a44b5702f352bf70229~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=27\&h=54\&s=3905\&e=png\&a=1\&b=313636) 查看运行结果，轨迹播放器已经成功添加至地图上了：![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/266076d94f404abcb8d1f42d952a838b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=715\&h=712\&s=538335\&e=png\&b=e9e3dc) # 4.开始播放 ```js //地图设置到合适的缩放级别 map.setZoom(17,{animate: false}); //开始播放 track.start(); ``` 只需要调用`start()`方法就能开始播放了： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b22a1ddd2ac0453abf5d5a1138bcb56f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=732\&h=560\&s=6386575\&e=gif\&f=110\&b=eeeae6) # 5.其他情况假设要播放人行走的轨迹，那通常情况下不需要使marker随行进方向旋转，改写创建播放器相关代码： ```js //定义沿着轨迹移动的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); ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4cff0ba1303b4e30b42e55ac668d0ec4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=732\&h=560\&s=6023813\&e=gif\&f=108\&b=eeeae6) # 6.完整代码 ```js ``` car.png![car.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6aa835522b094eb78b098e739b45d07e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=27\&h=54\&s=3905\&e=png\&a=1\&b=313636) # 总结本文使用插件[Leaflet.TrackPlayer](https://github.com/weijun-lab/Leaflet.TrackPlayer)实现了一个基础的轨迹回放功能，另外该插件还支持`自定义线路样式`、`设置行进速度`、`事件监听`等相关功能。具体请参阅[插件文档](https://github.com/weijun-lab/Leaflet.TrackPlayer)。对于该插件的有任何建议或意见，可以在[Issues](https://github.com/weijun-lab/Leaflet.TrackPlayer/issues)里提出。如果有帮助到你，请[点个star](https://github.com/weijun-lab/Leaflet.TrackPlayer)。往期文章推荐： ——[使用three-to-cesium.js轻松融合Three和Cesium场景](https://juejin.cn/post/7482003475900399668)