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

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>

js

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);
  //定义沿着轨迹移动的marker
  let 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>

TrackPlayer轨迹动画的更多配置网站
https://github.com/weijun-lab/Leaflet.TrackPlayer/blob/master/README.zh-CN.md

其实就是在地图上盖了一层你所需要的市场图片 轨迹还是按照真实经纬度走的 (哭笑不得)
希望对你有帮助