当前位置：首页 > news >正文

vue3使用leaflet+trackplayer实现非地图动画轨迹(市场平面图动态轨迹)

news 来源：原创 2024/9/19 16:11:40

vue3使用leaflet+trackplayer实现非地图动画轨迹(市场平面图动态轨迹)

在这里插入图片描述

先下载 leaflet 和 leaflet-trackplayer两个主要库

leaflet官方文档

npm install leaflet 
npm install leaflet-trackplayer

然后在页面中引用

html

<template><button @click="playMap">播放</button><div id="map"></div>
</template>

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-trackplayer';

引用完成后我们开始写主要逻辑

<script setup>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-trackplayer';
import { onMounted, ref } from 'vue';
//背景图遮盖地图的图片(市场图片)
function getImageUrl() {return new URL(`./map.png`, import.meta.url).href;
}
//trackplayern播放器
let track = null;
//测试的点位
const testList = ref([]);
//生命周期挂载
onMounted(() => {let bounds = [[34.255, 108.885], // 左上角的坐标[34.27, 108.918], // 右下角的坐标];//创建地图对象let map = L.map('map', { attributionControl: false });//添加地图图层L.imageOverlay(getImageUrl(), bounds).addTo(map);//模拟一段轨迹数据 (真实经纬度地址哦~)let path = [ { lat: 34.257766231787095, lng: 108.90156984329225 },{ lat: 34.257854907014014, lng: 108.90483140945435 },{ lat: 34.257854907014014, lng: 108.90822172164918 },{ lat: 34.260745668218206, lng: 108.90820026397706 },{ lat: 34.26298017628813, lng: 108.90813589096071 },{ lat: 34.262944708369695, lng: 108.90485286712648 },{ lat: 34.262944708369695, lng: 108.90156984329225 },{ lat: 34.26514369102872, lng: 108.90154838562013 },{ lat: 34.26512595752755, lng: 108.89824390411378 },{ lat: 34.26516142452615, lng: 108.8950252532959 },{ lat: 34.265055023485516, lng: 108.8917636871338 },{ lat: 34.260887543511274, lng: 108.89180660247804 },{ lat: 34.257376059678286, lng: 108.89172077178956 },{ lat: 34.257447000196315, lng: 108.89508962631227 },];//根据背景图片的坐标设置地图的显示范围map.fitBounds(bounds);//定义沿着轨迹移动的markerlet markerIcon = L.icon({iconSize: [24, 54], // marker的大小iconUrl: new URL('/public/tool/arco.png', import.meta.url).href, // marker的图片iconAnchor: [11.5, 27], // marker的偏移});//创建播放器对象并添加至地图track = new L.TrackPlayer(path, { markerIcon, panTo: false }).addTo(map);//地图设置到合适的缩放级别map.setZoom(16, { animate: false });//点击地图添加点位map.on('click', function (e) {testList.value.push(e.latlng); //获取的经纬度console.log(JSON.stringify(testList.value));});
});
//播放轨迹
const playMap = () => {track.start();
};
</script>
<style scoped>
#map {height: 100vh;width: 100%;
}
</style>