leaflet-trackplayer 轨迹回放
使用 leaflet 、leaflet-trackplayer、vue 实现轨迹回放。
支持轨迹颜色、轨迹线宽度、运动速度、已行驶轨迹部分的颜色、未行驶轨迹部分的颜色、地图视图是否跟随移动标记等配置
同时也支持通过方法设置相关属性及事件的监听,更多请查看GitHub 仓库地址
示例
安装依赖
shell
pnpm install leaflet-trackplayer
项目引入
js
import 'leaflet-trackplayer';
代码实现
vue
<script setup>
import { ref, defineAsyncComponent } from 'vue';
import 'leaflet'
import 'leaflet-trackplayer';
import { list } from './trajectoryData.js';
const InitMap = defineAsyncComponent(() =>
import('../../components/InitMapTianditu.vue')
);
const mapObj = ref();
const track = ref(null);
function start() {
track.value.start();
}
function stop() {
track.value.pause();
}
function mapLoad(map) {
mapObj.value = map;
// 地图设置到合适的缩放级别
map.setZoom(16, { animate: false });
// 定义沿着轨迹移动的marker
const markerIcon = L.icon({
iconSize: [27, 54],
iconUrl: new URL('/img/car.png', import.meta.url).href,
iconAnchor: [13.5, 27]
});
// 创建播放器对象并添加至地图
track.value = new L.TrackPlayer(list, { markerIcon }).addTo(map);
start();
}
</script>
<template>
<init-map
@map-load="mapLoad"
:center="[34.27519341726532, 108.911884710754]"
></init-map>
<div class="mt-10">
<CButton @click="start">开始</CButton>
<CButton @click="stop">暂停</CButton>
</div>
</template>
<style scoped></style>
js
export const list = [
{
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,
},
];