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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/423922.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【时时三省】(C语言基础)指针进阶 例题7

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 二维数组 第一个a 因为它有12个元素 每个元素占4个字节 所以就打印48 第二个a&#xff3b;0&#xff3d;&#xff3b;0&#xff3d; 表示是第一行第一个元素 所…

滑动窗口算法—最小覆盖子串

题目 ”最小覆盖子串“问题&#xff0c;难度为Hard&#xff0c;题目如下&#xff1a; 给你两个字符串 S 和 T&#xff0c;请你在 S 中找到包含 T 中全部字母的最短子串。如果 S 中没有这样一个子串&#xff0c;则算法返回空串&#xff0c;如果存在这样一个子串&#xff0c;则可…

Codeforces practice C++ 2024/9/11 - 2024/9/13

D. Mathematical Problem Codeforces Round 954 (Div. 3) 原题链接&#xff1a;https://codeforces.com/contest/1986/problem/D 题目标签分类&#xff1a;brute force&#xff0c;dp&#xff0c;greedy&#xff0c;implementation&#xff0c;math&#xff0c;two pointers…

[数据集][目标检测]乱堆物料检测数据集VOC+YOLO格式1143张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1143 标注数量(xml文件个数)&#xff1a;1143 标注数量(txt文件个数)&#xff1a;1143 标注…

Java高级Day41-反射入门

115.反射 反射机制 1.根据配置文件re.properties指定信息&#xff0c;创建Cat对象并调用hi方法 SuppressWarnings({"all"}) public class ReflectionQuestion {public static void main(String[] args) throws IOException {//根据配置文件 re.properties 指定信息…

交叉编译工具链的安装及带wiringPi库的交叉编译实现

交叉编译工具链的安装及带wiringPi库的交叉编译实现 交叉编译的概念交叉编译工具链的安装下载交叉编译工具链配置环境遍变量编译程序到ARM平台 带wiringPi库的交叉编译下载编译wiringPi库调用树莓派的wringPi库 交叉编译的概念 交叉编译是在一个平台上生成另一个平台上的可执行…

xshell密钥方式连接阿里云Linux

前提条件 有阿里云ECS linux实例安装好xshell工具 步骤 创建密钥对并绑定ECS实例 浏览器登录阿里云-->控制台-->ECS服务器-->网络与安全-->密钥对-->创建密钥对 根据提示填写密钥名称-->选中默认资源组-->创建 创建完成&#xff0c;会自动下载密钥对的…

WPF实现Hammer 3D入门学习

代码下载&#xff1a;https://download.csdn.net/download/bjhtgy/89748674

【Python】生成图片验证码

1. 首先安装第三方库PIL&#xff08;图像处理库&#xff09; pip install pillow 2. 编写生成验证码代码 这里字体 SimHei.ttf 文件要放在该文件目录下。 import random from PIL import Image, ImageDraw, ImageFont, ImageFilterdef check_code(width128, height30, char…

PowerShell install 一键部署Oracle21c-xe

Oracle21c-xe前言 无论您是开发人员、DBA、数据科学家、教育工作者,还是仅仅对数据库感兴趣,Oracle Database Express Edition (XE) 都是理想的入门方式。它是全球企业可依赖的强大的 Oracle Database,提供简单的下载、易于使用和功能齐全的体验。您可以在任何环境中使用该…

Redis:发布(pub)与订阅(sub)实战

前言 Redis发布订阅&#xff08;Pub/Sub&#xff09;是Redis提供的一种消息传递机制&#xff0c;它使用“发布者-订阅者”&#xff08;publisher-subscriber&#xff09;模式来处理消息传递。在这种模式下&#xff0c;发布者将消息发布到一组订阅者中&#xff0c;而无需关心谁…

基于MATLAB的图像融合设计

摘 要 图像融合能够将不同类型传感器获取的同一对象的图像数据进行空间配准。并且采用一定的算法将不同类型的传感器获取的同一对象的图像数据所含用的信息优势或互补性有机地结合起来产生的新的图像数据。这种新数据含有所研究对象的更多信息表征&#xff0c;与单一图像相对比…

learn C++ NO.13——list

前言 本文将从list的使用&#xff0c;再到根据sgi库对于list实现作为参考模拟实现一下list。通过模拟实现来增加对它的理解。 介绍list list是一个由带头双向循环链表实现的STL容器&#xff0c;它提供常规时间内对数据进行插入和删除操作。 list在内存中存储不连续的空间存储…

计算机组成原理(第二次笔记)

各种码 真值 (书写用)&#xff1a; 将用“”、“-” 表示正负的二进制数称为真值 机器不能识别书写格式&#xff0c;故用“0/1”表示“/-”符号。 机器码 (机器内部使用)&#xff1a; 将符号和数值一起编码表示的二进制数称为机器码。 常用机器码&#xff1a;原码、 反码、 补…

SpringCloud Alibaba之Nacos服务注册和配置中心

&#xff08;学习笔记&#xff09;nacos-server版本&#xff1a;2.2.3 总体介绍&#xff1a; 1、Nacos介绍 官网&#xff1a;Nacos官网| Nacos 配置中心 | Nacos 下载| Nacos 官方社区 | Nacos 官网 Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的首字…

前端网页代码编辑器 Monaco Editor

前端网页代码编辑器 Monaco Editor Monaco Editor Monaco Editor 是由 Microsoft 开发的一款基于 Web 技术的开源代码编辑器&#xff0c;它是 Visual Studio Code 编辑器的核心。Monaco Editor 可以嵌入到网页中&#xff0c;提供类似于 Visual Studio Code 的编辑体验。 官方…

MySQL聚合统计

【数据库】MySQL聚合统计 王笃笃-CSDN博客https://blog.csdn.net/wangduduniubi?typeblog显示平均工资低于2000的部门和它的平均工资 mysql> select deptno,avg(sal) deptavg from emp group by deptno; --------------------- | deptno | deptavg | --------------…

信通院发布首个《大模型媒体生产与处理》标准,阿里云智能媒体服务作为业界首家“卓越级”通过

中国信通院近期正式发布《大模型驱动的媒体生产与处理》标准&#xff0c;阿里云智能媒体服务&#xff0c;以“首批首家”通过卓越级评估&#xff0c;并在9大模块50余项测评中表现为“满分”。 当下&#xff0c;AI大模型的快速发展带动了爆发式的海量AI运用&#xff0c;这其中&a…

职场女性的心灵救赎:数业智能心大陆照亮新曙光

近年来&#xff0c;职场女性抑郁问题愈发凸显。数业智能心大陆的AI心理疗愈平台数据显示&#xff0c;超八成职场女性曾感到抑郁。90 后职场女性的心理健康状况尤其令人担忧&#xff0c;随着年龄层的下降&#xff0c;职场女性中出现抑郁状态的比例呈现明显的上升趋势。 职场女性…

Jetpack Compose Side Effects in Details 副作用的详细信息

What is Side Effect’s? 副作用是什么&#xff1f; Side Effects is a change in the state of the application that occurs outside the scope of the composable function and is not related to the UI. In non-UI related state changes, our screen may recompose mor…