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

于 2024-05-23 11:27:17 发布
阅读量787 收藏 29
点赞数 29
文章标签： 前端 vue mapv
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012848304/article/details/139142978
版权

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实现路书效果

栀椩
关注
  • 29
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue项目中：百度地图引用mapV，实现两点间的曲线，及曲线上点的流动。
05-06
vue项目中：百度地图引用mapV，实现两点间的曲线，及曲线上点的流动。
vue-baidu-map地图定位和轨迹路书
qq_16785561的博客
10-20 1268
项目需求接入第三方接口获取车辆的实时定位信息和历史轨迹，记录一下使用vue-baidu-map开发的过程。安装vue-baidu-map，参考。1、地图定位组件，更换标点图标，设置动画效果。2、轨迹组件及设置起始点坐标图片。
Vue3使用vue-baidu-map-3x百度地图
张晓健的博客
12-04 1495
【代码】Vue3使用vue-baidu-map-3x绘制地图。
Vue3+百度地图的使用--实现地图的渲染、自动定位（点击控件定位）、地图搜索位置并定位、百度地图logo去掉、坐标图像标注（坐标跳动动画）和坐标点击弹窗，setup语法糖，element-plus
最新发布
weixin_43373009的博客
05-14 720
最近在赶新的项目，用了百度地图去开发，涉及地图的操作太多，目前就摸清标题所写的功能，趁今晚有空记录下来先，因为在开发的的过程找了许多帖子，因为我基于Vue3去开发的，发现很多都是基于vue2开发的，Vue3的比较少，改成Vue3时改的吃力或者修改后运行不了，所以折腾一了段时间。所以把目前完成的代码发出来，供大家参考，涉及后端的接口的数据，我也模拟了一些数据在上面了，可以开箱即用。
vue3引入百度地图（两种方法）
m0_74060440的博客
12-30 3564
vue3引入百度地图
vue3使用百度地图点聚合
m0_60142433的博客
09-07 4257
点聚合BmlMarkerClusterer能够聚合它包含的所有BmMarker组件。
vue3使用百度地图实现个性化地图和轨迹
Dnn01的博客
02-29 1462
vue3使用百度地图实现个性化地图和轨迹
vue结合百度地图api实现地址检索、路线规划等功能
oi
01-23 6869
vue+百度地图api引入百度地图api获取用户当前位置地址检索（定位）路线规划修改提示框等样式 引入百度地图api 找到项目的根目录index.html位置： 在项目的根目录下的index.html文件中添加如下代码： <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥"></script> 创建一个div用于地图展示 <template> <
vue里使用百度地图绘制行进路线展示或者起始点展示
m0_52611940的博客
05-24 671
vue里使用百度地图绘制行进路线展示或者起始点展示
vue+地图选点组件（百度地图）
08-10
本组件是用于在地图上选点、回显坐标等
vue3+ts实现drag/draggable拖拽任务看板taskboard
07-05
ganttchart(甘特图) taskboard(任务看板) jsoneditor(JSON编辑器)
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
Vue使用百度地图以及实现轨迹回放 附完整代码
咕噜咕噜wy的博客
12-07 2703
百度地图开放平台百度地图实例Vue Baidu Map文档效果图:支持放大缩小 调动播放进度 搜索轨迹时段 调整播放速度等。
前端VUE使用百度地图 、vue-baidu-map
Smile_666666的博客
04-14 770
前端VUE使用百度地图 捣鼓了好几天的地图，小白入手，记录一下下！具体的可以查看https://dafrok.github.io/vue-baidu-map 一、安装依赖 npm install vue-baidu-map --save 二、引入 在main.js中全局注册使用 import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://
vue3项目中引入百度地图
qq_43751614的博客
08-07 994
vue3项目中引入百度地图
Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
热门推荐
qq_37029373的博客
06-06 4万+
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求，记录一下： vue-baidu-map 官方地址 一.插件的安装 1.npm 安装 $ npm install vue-baidu-map --save 2.js 引入 index.html 中 <script src="https://unpkg.com/vue-baidu-map"></s...
vue3中简单的使用百度地图
qq_57399113的博客
05-19 8672
1、申请百度开发者账号 百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口，包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本，提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API，一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力，另一方面彻底解决所有LBS开发者基于位置数据的高并发检
vue-baidu-map-3x 使用记录
Lyrelion的博客
08-05 4443
为了解决上一个问题，采用了BmControl这些变量尽量比如 mapCenter 里，一开始就应该定义 lng、lat，后面具体的值可以是 0 state.mapCenter = { lng: 0, lat: 0}如果直接初始化成 state.mapCenter = {}，会导致发生不可预知的错误我最开始没初始化 单个点位 searchPoint 的对象结构时，没报错我最开始没初始化 点位信息弹窗 spInfoWindow 的对象结构时，就报错找不到 lng 属性了// 地图缩放级别。
vue 使用 Vue Baidu Map使用 选择坐标、设置范围 百度地图
weixin_50885665的博客
06-15 978
template>data() {return {center: {lng: 0, lat: 0}, // 设置中心点信息zoom: 3, // 地图初始放大倍数markerPoint: {lng: 118.7995, lat: 31.9663}, // 点的位置dragging: true, // 是否可以拖拽点raiseOnDrag: true, // 拖拽时是否有动画效果pointIcon: require('自定义的点的图片地址')},methods: {// 创建地图。
vue3 +ts实现高德地图的展示
05-12
Vue3和TypeScript都是现代化前端开发技术，相结合可以大大提高开发效率...总之，在Vue3中使用TypeScript实现高德地图的展示，可以借助高德地图的JavaScript API，通过类似上述的方法进行相关操作，实现地图的各种功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

栀椩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值