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。

相关文章

Golang实现基于角色的访问控制(RBAC)的项目实践

Golang实现基于角色的访问控制(RBAC)的项目实践

《Golang实现基于角色的访问控制(RBAC)的项目实践》基于角色的访问控制（RBAC）是一种安全机制,通过角色来管理用户权限,本文介绍了一种可落地、易扩展的GolangRBAC实现方案,具有一定... 目录一、RBAC 核心模型设计二、RBAC 核心逻辑实现RBAC 管理器定义基础 CRUD：添加用户
阅读更多...
Python使用Spire.PDF实现为PDF添加水印

Python使用Spire.PDF实现为PDF添加水印

《Python使用Spire.PDF实现为PDF添加水印》在现代数字化办公环境中,PDF已成为一种广泛使用的文件格式,尤其是在需要保持文档格式时,下面我们就来看看如何使用Python为PDF文件添加水... 目录一、准备工作二、实现步骤1. 导入必要的库2. 创建 PdfDocument 对象3. 设置水印
阅读更多...
python在word中插入目录和更新目录实现方式

python在word中插入目录和更新目录实现方式

《python在word中插入目录和更新目录实现方式》文章主要介绍了如何在Word文档中插入和更新目录,并提供了具体的代码示例,插入目录时,需要使用`TablesOfContents`对象,并设置使用... 目录1、插入目录2、更新目录总结1、插入目录需要用到对象：TablesOfContents目录的
阅读更多...
PostgreSQ数据库实现在Windows上异地自动备份指南的详细教程

PostgreSQ数据库实现在Windows上异地自动备份指南的详细教程

《PostgreSQ数据库实现在Windows上异地自动备份指南的详细教程》这篇文章主要为大家详细介绍了如何在Windows系统上实现PostgreSQL数据库的异地自动备份,文中的示例代码讲解详细,... 目录前期准备实现步骤步骤一：创建备份脚本步骤二：配置免密登录（可选但推荐）步骤三：设置任务计划程序步
阅读更多...
基于C++的UDP网络通信系统设计与实现详解

基于C++的UDP网络通信系统设计与实现详解

《基于C++的UDP网络通信系统设计与实现详解》在网络编程领域,UDP作为一种无连接的传输层协议,以其高效、低延迟的特性在实时性要求高的应用场景中占据重要地位,下面我们就来看看如何从零开始构建一个完整... 目录前言一、UDP服务器UdpServer.hpp1.1 基本框架设计1.2 初始化函数Init详解
阅读更多...
Java中Map的五种遍历方式实现与对比

Java中Map的五种遍历方式实现与对比

《Java中Map的五种遍历方式实现与对比》其实Map遍历藏着多种玩法,有的优雅简洁,有的性能拉满,今天咱们盘一盘这些进阶偏基础的遍历方式,告别重复又臃肿的代码,感兴趣的小伙伴可以了解下... 目录一、先搞懂：Map遍历的核心目标二、几种遍历方式的对比1. 传统EntrySet遍历（最通用）2. Lambd
阅读更多...
springboot+redis实现订单过期(超时取消)功能的方法详解

springboot+redis实现订单过期(超时取消)功能的方法详解

《springboot+redis实现订单过期(超时取消)功能的方法详解》在SpringBoot中使用Redis实现订单过期（超时取消）功能,有多种成熟方案,本文为大家整理了几个详细方法,文中的示例代... 目录一、Redis键过期回调方案（推荐）1. 配置Redis监听器2. 监听键过期事件3. Redi
阅读更多...
SpringBoot全局异常拦截与自定义错误页面实现过程解读

SpringBoot全局异常拦截与自定义错误页面实现过程解读

《SpringBoot全局异常拦截与自定义错误页面实现过程解读》本文介绍了SpringBoot中全局异常拦截与自定义错误页面的实现方法,包括异常的分类、SpringBoot默认异常处理机制、全局异常拦... 目录一、引言二、Spring Boot异常处理基础2.1 异常的分类2.2 Spring Boot默
阅读更多...
基于SpringBoot实现分布式锁的三种方法

基于SpringBoot实现分布式锁的三种方法

《基于SpringBoot实现分布式锁的三种方法》这篇文章主要为大家详细介绍了基于SpringBoot实现分布式锁的三种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、基于Redis原生命令实现分布式锁1. 基础版Redis分布式锁2. 可重入锁实现二、使用Redisso
阅读更多...
SpringBoo WebFlux+MongoDB实现非阻塞API过程

SpringBoo WebFlux+MongoDB实现非阻塞API过程

《SpringBooWebFlux+MongoDB实现非阻塞API过程》本文介绍了如何使用SpringBootWebFlux和MongoDB实现非阻塞API,通过响应式编程提高系统的吞吐量和响应性能... 目录一、引言二、响应式编程基础2.1 响应式编程概念2.2 响应式编程的优势2.3 响应式编程相关技术
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2