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。

相关文章

Python使用python-can实现合并BLF文件

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库：CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合
阅读更多...
Python使用OpenCV实现获取视频时长的小工具

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文
阅读更多...
golang版本升级如何实现

golang版本升级如何实现

《golang版本升级如何实现》：本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola
阅读更多...
SpringBoot中SM2公钥加密、私钥解密的实现示例详解

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具
阅读更多...
Mysql实现范围分区表(新增、删除、重组、查看)

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型（范围、哈希、列表、键值）,主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区（Range Partitioning1、新建分区表：2、分
阅读更多...
MySQL 定时新增分区的实现示例

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后，有时候会需要自动创建分区。比如，一些表数据量非常大，有些数据是热点数据，按照日期分区MululbU
阅读更多...
MySQL中查找重复值的实现

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一：使用GROUP BY和HAVING子句方法二：仅返回重复值方法三：返回完整记录方法四：
阅读更多...
IDEA中新建/切换Git分支的实现步骤

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提：项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的
阅读更多...
Python实现对阿里云OSS对象存储的操作详解

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os
阅读更多...
关于集合与数组转换实现方法

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》：本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2