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实现自动化Word文档样式复制与内容生成

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现：样式与表格的深度复制1. 表格复制（含样式与内容）2
阅读更多...
python获取cmd环境变量值的实现代码

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》：本文主要介绍在Python中获取命令行（cmd）环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中，总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061
阅读更多...
Python中bisect_left 函数实现高效插入与有序列表管理

Python中bisect_left 函数实现高效插入与有序列表管理

《Python中bisect_left函数实现高效插入与有序列表管理》Python的bisect_left函数通过二分查找高效定位有序列表插入位置,与bisect_right的区别在于处理重复元素时... 目录一、bisect_left 基本介绍1.1 函数定义1.2 核心功能二、bisect_left 与
阅读更多...
VSCode设置python SDK路径的实现步骤

VSCode设置python SDK路径的实现步骤

《VSCode设置pythonSDK路径的实现步骤》本文主要介绍了VSCode设置pythonSDK路径的实现步骤,包括命令面板切换、settings.json配置、环境变量及虚拟环境处理,具有一定... 目录一、通过命令面板快速切换（推荐方法）二、通过 settings.json 配置（项目级/全局）三、
阅读更多...
pandas实现数据concat拼接的示例代码

pandas实现数据concat拼接的示例代码

《pandas实现数据concat拼接的示例代码》pandas.concat用于合并DataFrame或Series,本文主要介绍了pandas实现数据concat拼接的示例代码,具有一定的参考价值,... 目录语法示例：使用pandas.concat合并数据默认的concat：参数axis=0，join=
阅读更多...
java中BigDecimal里面的subtract函数介绍及实现方法

java中BigDecimal里面的subtract函数介绍及实现方法

《java中BigDecimal里面的subtract函数介绍及实现方法》在Java中实现减法操作需要根据数据类型选择不同方法,主要分为数值型减法和字符串减法两种场景,本文给大家介绍java中BigD... 目录Java中BigDecimal里面的subtract函数的意思？一、数值型减法（高精度计算）1.
阅读更多...
C#代码实现解析WTGPS和BD数据

C#代码实现解析WTGPS和BD数据

《C#代码实现解析WTGPS和BD数据》在现代的导航与定位应用中,准确解析GPS和北斗（BD）等卫星定位数据至关重要,本文将使用C#语言实现解析WTGPS和BD数据,需要的可以了解下... 目录一、代码结构概览1. 核心解析方法2. 位置信息解析3. 经纬度转换方法4. 日期和时间戳解析5. 辅助方法二、L
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...
使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键
阅读更多...
C/C++中OpenCV 矩阵运算的实现

C/C++中OpenCV 矩阵运算的实现

《C/C++中OpenCV矩阵运算的实现》本文主要介绍了C/C++中OpenCV矩阵运算的实现,包括基本算术运算（标量与矩阵）、矩阵乘法、转置、逆矩阵、行列式、迹、范数等操作,感兴趣的可以了解一下... 目录矩阵的创建与初始化创建矩阵访问矩阵元素基本的算术运算 ➕➖✖️➗矩阵与标量运算矩阵与矩阵运算 (逐元
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2