vue3+mapv实现百度地图路书功能

2024-05-24 17:36
文章标签 javascript 实现 百度 功能 vue vue3 地图 frontend mapv 路书

本文主要是介绍vue3+mapv实现百度地图路书功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3+mapv实现百度地图路书功能

前期写了一篇博客，介绍在vue项目中如何使用mapv

说实话，在vue项目中使用mapv是一如既往的艰难，我在使用vue开发电子地图相关项目时，一般都会用vue-baidu-map-3x这个开源包，确实提供了不少便利，但有一说一，目前还有很多bug，而且百度官方提供的很多可视化功能中，这个包并没有提供

现在，我想在百度地图上显示车辆的动态轨迹，百度js api已经提供了可用的方案，但总感觉原生的效果不怎么理想，mapv提供了效果炫酷的汽车模型路书，效果就是我想要的，但前面提到，想要在vue中使用mapv，确实不容易

折腾了一上午，总算把效果实现了，记录一下过程

一、mapv及百度地图的安装与引入

我在我之前的博客中已经已经介绍了在vue项目中如何安装和引入mapv，这次因为有动态效果，所以还需引入更复杂的内容

先上一下我的index.html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title>
</head><body><div id="app"></div><script type="module" src="/src/main.js"></script><script type="text/javascript"src="https://api.map.baidu.com/getscript?v=1.0&type=webgl&ak=你自己的ak"async="async"></script><script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你自己的ak"></script><script type="text/javascript" src="https://bj.bcebos.com/v1/mapopen/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
</body></html>

解释一下：

  • https://api.map.baidu.com/getscript?v=1.0&type=webgl&ak=你自己的ak其实在引入百度地图，它的作用与https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你自己的ak是一样的，但是下面的那个，控制台会报警（不是报错），所以在做写简单的mapv时，只用引入上面的，可以确保控制台不报警，但是，如果组件中用到了BMapGL的话，就必须引入下面的了。换句话说，下面的包含上面的，引入下面的了，就不需要引入上面的了，但引入下面的，控制台会报警。所以，就这个项目而言，可以把<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.0&type=webgl&ak=你自己的ak" async="async"></script>这个引入删除
  • src="https://bj.bcebos.com/v1/mapopen/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"这个是控制动画的脚本引入

另外，想正常使用mapv，必须安装好mapvgl和mapv

npm i mapvgl
npm i mapv

二、vue组件实现路书功能

确保正确引入后，可以在相关的组件中写功能了

我先直接上代码，然后具体解释

<template><div id="map_container" class="map"></div>
</template><script setup>
import roadData from '@/assets/json/data.json'
import { ref, onMounted } from 'vue'
import * as mapv from 'mapv'
import * as mapvgl from 'mapvgl'
import { initMap, purpleStyle } from '@/utils/mapvCommon'const init = () => {const map = initMap({tilt: 60,heading: 0,center: [112.164779, 37.212845],zoom: 14,// style: whiteStyle,style: purpleStyle,skyColors: [// 地面颜色'rgba(226, 237, 248, 0)',// 天空颜色'rgba(186, 211, 252, 1)']})const view = new mapvgl.View({map: map});const data = [{geometry: {type: 'LineString',coordinates: roadData}}]const lineLayer = new mapvgl.LineLayer({width: 10,color: 'rgba(55, 71, 226, 0.9)',style: 'road',enablePicked: true,onClick: e => {console.log(e);}});view.addLayer(lineLayer);lineLayer.setData(data);const carlineLayer = new mapvgl.CarLineLayer({url: '/mapv/gl/examples/model/car.gltf',autoPlay: true,scale: 200,});view.addLayer(carlineLayer);carlineLayer.setData(data);map.setDefaultCursor('default');const coordinates = data[0].geometry.coordinates;const point = [];for (var i = 0; i < coordinates.length; i += 5) {point.push(new BMapGL.Point(coordinates[i][0], coordinates[i][1]));}var pl = new BMapGL.Polyline(point, { strokeWeight: 1, strokeColor: '#f00000', strokeOpacity: 0 });var trackAni = new BMapGLLib.TrackAnimation(map, pl, {overallView: true,tilt: 70,heading: 130,zoom: 15,duration: 20000,delay: 100});trackAni.start();
}onMounted(() => {init()
})</script><style lang="scss" scoped>
.map {height: 100vh;width: 100%;
}
</style>

1、数据引入

import roadData from '@/assets/json/data.json'其实就是车辆轨迹数据，在mapv官方提供的例子中就有，数据如下：

[[112.257777, 37.295026],[112.253782, 37.290389],[112.253782, 37.290389],[112.253489, 37.290051],[112.253489, 37.290051],[112.253195, 37.28971],[112.253195, 37.28971],[112.251845, 37.288149],[112.251845, 37.288149],[112.25146, 37.287706],[112.25146, 37.287706],[112.246837, 37.282147],[112.246837, 37.282147],[112.246496, 37.281681],[112.246496, 37.281681],[112.246044, 37.281022],[112.246044, 37.281022],[112.245732, 37.280544],[112.245732, 37.280544],[112.244621, 37.278847],[112.244621, 37.278847],[112.244307, 37.278369],[112.244307, 37.278369],[112.242814, 37.276089],[112.242814, 37.276089],[112.242504, 37.275616],[112.242504, 37.275616],[112.240411, 37.27234],[112.240411, 37.27234],[112.240095, 37.271841],[112.240095, 37.271841],[112.239918, 37.27156],[112.239918, 37.27156],[112.239613, 37.271078],[112.239613, 37.271078],[112.235741, 37.26637],[112.235741, 37.26637],[112.235258, 37.265992],[112.235258, 37.265992],[112.234288, 37.26538],[112.234288, 37.26538],[112.233852, 37.265109],[112.233852, 37.265109],[112.233412, 37.264836],[112.233412, 37.264836],[112.232757, 37.264438],[112.232757, 37.264438],[112.232228, 37.264116],[112.232228, 37.264116],[112.230065, 37.262802],[112.230065, 37.262802],[112.229536, 37.26248],[112.229536, 37.26248],[112.225786, 37.260195],[112.225786, 37.260195],[112.225248, 37.259867],[112.225248, 37.259867],[112.223184, 37.258605],[112.223184, 37.258605],[112.22272, 37.258322],[112.22272, 37.258322],[112.222076, 37.257928],[112.222076, 37.257928],[112.221612, 37.257644],[112.221612, 37.257644],[112.220567, 37.257004],[112.220567, 37.257004],[112.220103, 37.25672],[112.220103, 37.25672],[112.21857, 37.255774],[112.21857, 37.255774],[112.218035, 37.255444],[112.218035, 37.255444],[112.2166, 37.254557],[112.2166, 37.254557],[112.216019, 37.254197],[112.216019, 37.254197],[112.215502, 37.253878],[112.215502, 37.253878],[112.21492, 37.253517],[112.21492, 37.253517],[112.209979, 37.250443],[112.209979, 37.250443],[112.209397, 37.25008],[112.209397, 37.25008],[112.202775, 37.24592],[112.202775, 37.24592],[112.202239, 37.245581],[112.202239, 37.245581],[112.19887, 37.243442],[112.19887, 37.243442],[112.198342, 37.243106],[112.198342, 37.243106],[112.1954, 37.241215],[112.1954, 37.241215],[112.194875, 37.240875],[112.194875, 37.240875],[112.19372, 37.240106],[112.19372, 37.240106],[112.193202, 37.239758],[112.193202, 37.239758],[112.192405, 37.239205],[112.192405, 37.239205],[112.191892, 37.238847],[112.191892, 37.238847],[112.187648, 37.235554],[112.187648, 37.235554],[112.187182, 37.23517],[112.187182, 37.23517],[112.178875, 37.22794],[112.178875, 37.22794],[112.178411, 37.227533],[112.178411, 37.227533],[112.173182, 37.222956],[112.173182, 37.222956],[112.172726, 37.222558],[112.172726, 37.222558],[112.171414, 37.221411],[112.171414, 37.221411],[112.170933, 37.22099],[112.170933, 37.22099],[112.167452, 37.217897],[112.167452, 37.217897],[112.167126, 37.217422],[112.167126, 37.217422],[112.166488, 37.216547],[112.166488, 37.216547],[112.166183, 37.216066],[112.166183, 37.216066],[112.165335, 37.214612],[112.165335, 37.214612],[112.165054, 37.214127],[112.165054, 37.214127],[112.16438, 37.212965],[112.16438, 37.212965],[112.164098, 37.21248],[112.164098, 37.21248],[112.16406, 37.212415],[112.16406, 37.212415],[112.163871, 37.212088],[112.163871, 37.212088],[112.163708, 37.211808],[112.163708, 37.211808],[112.16348, 37.211417],[112.16348, 37.211417],[112.163232, 37.210989],[112.163232, 37.210989],[112.163009, 37.210606],[112.163009, 37.210606],[112.162723, 37.210128],[112.162723, 37.210128],[112.162631, 37.209984],[112.162631, 37.209984],[112.162318, 37.209506],[112.162318, 37.209506],[112.161277, 37.208024],[112.161277, 37.208024],[112.160892, 37.207541],[112.160892, 37.207541],[112.160628, 37.207206],[112.160628, 37.207206],[112.160249, 37.206736],[112.160249, 37.206736],[112.151795, 37.199586],[112.151795, 37.199586],[112.151278, 37.199223],[112.151278, 37.199223],[112.14806, 37.196923],[112.14806, 37.196923],[112.147531, 37.196547],[112.147531, 37.196547],[112.141672, 37.192405],[112.141672, 37.192405],[112.141194, 37.192069],[112.141194, 37.192069],[112.135544, 37.188112],[112.135544, 37.188112],[112.135035, 37.187756],[112.135035, 37.187756],[112.133411, 37.186623],[112.133411, 37.186623],[112.132901, 37.186269],[112.132901, 37.186269],[112.132068, 37.185689],[112.132068, 37.185689],[112.131558, 37.185334],[112.131558, 37.185334],[112.130035, 37.184278],[112.130035, 37.184278],[112.129652, 37.184012],[112.129652, 37.184012],[112.129273, 37.183749],[112.129273, 37.183749],[112.125923, 37.181431],[112.125923, 37.181431],[112.125412, 37.181078],[112.125412, 37.181078],[112.12354, 37.179786],[112.12354, 37.179786],[112.123029, 37.179433],[112.123029, 37.179433],[112.118159, 37.176102],[112.118159, 37.176102],[112.117642, 37.175755],[112.117642, 37.175755],[112.117113, 37.175469],[112.117113, 37.175469],[112.116613, 37.175104],[112.116613, 37.175104],[112.112613, 37.172251],[112.112613, 37.172251],[112.112007, 37.171819],[112.112007, 37.171819],[112.10611, 37.167774],[112.10611, 37.167774],[112.105505, 37.167359],[112.105505, 37.167359],[112.102207, 37.165093],[112.102207, 37.165093],[112.101699, 37.164743],[112.101699, 37.164743],[112.101192, 37.164393],[112.101192, 37.164393],[112.10068, 37.164041],[112.10068, 37.164041],[112.100436, 37.163873],[112.100436, 37.163873],[112.099925, 37.16352],[112.099925, 37.16352],[112.093563, 37.159105],[112.093563, 37.159105],[112.093055, 37.158749],[112.093055, 37.158749],[112.088776, 37.15573],[112.088776, 37.15573],[112.088273, 37.155378],[112.088273, 37.155378],[112.08764, 37.154931],[112.08764, 37.154931],[112.087134, 37.154573],[112.087134, 37.154573],[112.085264, 37.153244],[112.085264, 37.153244],[112.08476, 37.152885],[112.08476, 37.152885],[112.082501, 37.15123]
]

import { initMap, purpleStyle } from '@/utils/mapvCommon'这是在引入地图，也可以从mapv提供的方法中找到

2、路书方法实现

实现路书的方法，我写在init方法中，init方法大概做了这么几件事

  1. 自定义地图，也就是调用initMap方法，注意，这个initMap方法设置了地图的一些基本要素，比如允许地图缩放，允许地图拖拽等等，同时也绑定了dom元素，也就是map_container，通过传入options参数完成一些额外的参数设置，如地图中心，地图样式，天空和地面的颜色等等

  2. 设置了mapv视图，也就是view变量

  3. 导入数据，也就是data变量

  4. mapv添加线图层，也就是lineLayer，实际上就是在地图上画出那条轨迹线，并为这个线图层板顶上面的data数据

  5. 添加汽车路书图层，这是非常关键的一步，这里也和例子上的写法不一样

        const carlineLayer = new mapvgl.CarLineLayer({url: '/mapv/gl/examples/model/car.gltf',  // 汽车模型，百度提供的，如果直接引入报跨域错误autoPlay: true,scale: 200,});view.addLayer(carlineLayer);carlineLayer.setData(data);

    • 跨域报错的解决方案：因为这是vite创建的vue3项目，所以需要在vite.config.js中设置代理服务器，写法如下：

      export default defineConfig({server: {proxy: {"/mapv": {target: "https://mapv.baidu.com",changeOrigin: true,rewrite: (path) => path.replace(/^\/mapv/, ""),},},},// 其他配置
});

    • 设置自动播放

    • 为汽车路书模型添加数据，也就是第3步的data

  6. 添加摄像头动画视角，这个写不写影响不大

        const coordinates = data[0].geometry.coordinates;const point = [];for (var i = 0; i < coordinates.length; i += 5) {point.push(new BMapGL.Point(coordinates[i][0], coordinates[i][1]));}var pl = new BMapGL.Polyline(point, { strokeWeight: 1, strokeColor: '#f00000', strokeOpacity: 0 });var trackAni = new BMapGLLib.TrackAnimation(map, pl, {overallView: true,tilt: 70,heading: 130,zoom: 15,duration: 20000,delay: 100});trackAni.start();

  7. 挂载组件时，运行init方法

3、添加路由

在对应的路由中，映射路书组件，这是vue的基础，就不在介绍了

三、演示效果

视频已经上传到B站了，其实和官方提供的效果是一样的

vue3+mapv实现路书效果

这篇关于vue3+mapv实现百度地图路书功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/999077。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
百度/小米/滴滴/京东，中台架构比较

百度/小米/滴滴/京东，中台架构比较

小米中台建设实践 01 小米的三大中台建设：业务+数据+技术 业务中台--从业务说起 在中台建设中，需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况，判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等，再结合其业务发展历程及业务现状，整理了中台架构的核心方法论，一是企业如何共享服务，二是如何为业务提供便利。
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2