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。

相关文章

详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
Oracle查询优化之高效实现仅查询前10条记录的方法与实践

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》：本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI
阅读更多...
Python脚本实现自动删除C盘临时文件夹

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
Java中Springboot集成Kafka实现消息发送和接收功能

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf
阅读更多...
使用Python实现在Word中添加或删除超链接

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中，超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...
Python实现高效地读写大型文件

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作（适用于大文件）四、使用 pand
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2