百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

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

ztj100 2025-06-12 19:08 10 浏览 0 评论

本文介绍如何通过插件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.27519341726532,108.911884710754],
  });
  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.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);

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

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.27519341726532,108.911884710754],
  });
  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

  //模拟一段轨迹数据
  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,
    },
  ];
  //定义沿着轨迹移动的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>

总结

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

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

相关推荐

其实TensorFlow真的很水无非就这30篇熬夜练

好的!以下是TensorFlow需要掌握的核心内容,用列表形式呈现,简洁清晰(含表情符号,<300字):1.基础概念与环境TensorFlow架构(计算图、会话->EagerE...

交叉验证和超参数调整:如何优化你的机器学习模型

准确预测Fitbit的睡眠得分在本文的前两部分中,我获取了Fitbit的睡眠数据并对其进行预处理,将这些数据分为训练集、验证集和测试集,除此之外,我还训练了三种不同的机器学习模型并比较了它们的性能。在...

机器学习交叉验证全指南:原理、类型与实战技巧

机器学习模型常常需要大量数据,但它们如何与实时新数据协同工作也同样关键。交叉验证是一种通过将数据集分成若干部分、在部分数据上训练模型、在其余数据上测试模型的方法,用来检验模型的表现。这有助于发现过拟合...

深度学习中的类别激活热图可视化

作者:ValentinaAlto编译:ronghuaiyang导读使用Keras实现图像分类中的激活热图的可视化,帮助更有针对性...

超强,必会的机器学习评估指标

大侠幸会,在下全网同名[算法金]0基础转AI上岸,多个算法赛Top[日更万日,让更多人享受智能乐趣]构建机器学习模型的关键步骤是检查其性能,这是通过使用验证指标来完成的。选择正确的验证指...

机器学习入门教程-第六课:监督学习与非监督学习

1.回顾与引入上节课我们谈到了机器学习的一些实战技巧,比如如何处理数据、选择模型以及调整参数。今天,我们将更深入地探讨机器学习的两大类:监督学习和非监督学习。2.监督学习监督学习就像是有老师的教学...

Python教程(三十八):机器学习基础

...

Python 模型部署不用愁!容器化实战,5 分钟搞定环境配置

你是不是也遇到过这种糟心事:花了好几天训练出的Python模型,在自己电脑上跑得顺顺当当,一放到服务器就各种报错。要么是Python版本不对,要么是依赖库冲突,折腾半天还是用不了。别再喊“我...

超全面讲透一个算法模型,高斯核!!

...

神经网络与传统统计方法的简单对比

传统的统计方法如...

AI 基础知识从0.1到0.2——用“房价预测”入门机器学习全流程

...

自回归滞后模型进行多变量时间序列预测

下图显示了关于不同类型葡萄酒销量的月度多元时间序列。每种葡萄酒类型都是时间序列中的一个变量。假设要预测其中一个变量。比如,sparklingwine。如何建立一个模型来进行预测呢?一种常见的方...

苹果AI策略:慢哲学——科技行业的“长期主义”试金石

苹果AI策略的深度原创分析,结合技术伦理、商业逻辑与行业博弈,揭示其“慢哲学”背后的战略智慧:一、反常之举:AI狂潮中的“逆行者”当科技巨头深陷AI军备竞赛,苹果的克制显得格格不入:功能延期:App...

时间序列预测全攻略,6大模型代码实操

如果你对数据分析感兴趣,希望学习更多的方法论,希望听听经验分享,欢迎移步宝藏公众号...

AI 基础知识从 0.4 到 0.5—— 计算机视觉之光 CNN

...

取消回复欢迎 发表评论: