百度路书做轨迹回放-vue

最新推荐文章于 2024-07-30 11:12:13 发布
最新推荐文章于 2024-07-30 11:12:13 发布
阅读量9.4k 收藏 21
点赞数 5
分类专栏： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wodebokecsdn/article/details/88107588
版权
js 同时被 2 个专栏收录
43 篇文章 0 订阅
订阅专栏
vue
16 篇文章 0 订阅
订阅专栏

其实不管是vue还是其他框架 还是jq  都是用原生js写 都一样的。

首先第一步众所周知

<script src="http://api.map.baidu.com/api?v=2.0&ak=你的K"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

这里注意ak后面不要加别的东西，否则会报错。

我先说一下思路，就是首先要根据GPS点画一条轨迹，然后将这些GPS点喂给百度lushu，然后小车按着我们规定好的轨迹运动。

话不多说上代码：

data(){
    return{
        gpsArr:[],//后台拿到的gps点数组
        speed:4000
    }
}
initMap(){
    var map = new BMap.Map("mymap");
    map.enableScrollWheelZoom(new BMap.Point(116.404, 39.915), 13);
    map.centerAndZoom();
    var arrPois = [];

    for (let i = 0; i < this.gpsArr.length; i++) {
      var p0 = this.gpsArr[i].longtitude;
      var p1 = this.gpsArr[i].latitude;
      // var checksum = makerArry[i].checksum;
      var point = new BMap.Point(p0, p1); //118.230272,33.482474
      arrPois.push(point);
    }
    //画轨迹
      var polyLine = new BMap.Polyline(arrPois, {
        strokeColor: "blue", //设置颜色
        strokeWeight: 5, //宽度
        strokeOpacity: 0.5 //透明度
      });
      map.addOverlay(polyLine);
      //画轨迹结束
}

此时在地图中已经看到我们画的线了，接下来创建路书

initLushu(map, arrPois, mycaiId) {
      this.lushu = new BMapLib.LuShu(map, arrPois, {
        defaultContent: mycaiId, //"从天安门到百度大厦"
        autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
        icon: new BMap.Icon(
          "http://developer.baidu.com/map/jsdemo/img/car.png",
          new BMap.Size(52, 26),
          {
            anchor: new BMap.Size(27, 13)
          }
        ),
        speed: this.speed,
        enableRotation: true, //是否设置marker随着道路的走向进行旋转
        landmarkPois: [
          {
            lng: 116.306954,
            lat: 40.05718,
            html: "加油站",
            pauseTime: 2
          }
        ]
      });
    },

接下来 生成路书，在这里我们生成路书之前可能要重新写一下路书的move函数，因为我们各自的需求不一样，可能需要修改

BMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) {
        var pointsArr = [initPos, targetPos]; //点数组
        var me = this,
          //当前的帧数
          currentCount = 0,
          //步长，米/秒
          timer = 10,
          step = this._opts.speed / (1000 / timer),
          //初始坐标
          init_pos = this._projection.lngLatToPoint(initPos),
          //获取结束点的(x,y)坐标
          target_pos = this._projection.lngLatToPoint(targetPos),
          //总的步长
          count = Math.round(me._getDistance(init_pos, target_pos) / step);
        //显示折线 syj201607191107
        //如果想显示小车走过的痕迹，放开这段代码就行
        // this._map.addOverlay(
        //   new BMap.Polyline(pointsArr, {
        //     strokeColor: "#111",
        //     strokeWeight: 5,
        //     strokeOpacity: 0.5
        //   })
        // ); // 画线
        //如果小于1直接移动到下一点
        if (count < 1) {
          me._moveNext(++me.i);
          return;
        }
        me._intervalFlag = setInterval(function() {
          //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
          if (currentCount >= count) {
            clearInterval(me._intervalFlag);
            //移动的点已经超过总的长度
            if (me.i > me._path.length) {
              return;
            }
            //运行下一个点
            me._moveNext(++me.i);
          } else {
            currentCount++;
            var x = effect(init_pos.x, target_pos.x, currentCount, count),
              y = effect(init_pos.y, target_pos.y, currentCount, count),
              pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
            //设置marker
            if (currentCount == 1) {
              var proPos = null;
              if (me.i - 1 >= 0) {
                proPos = me._path[me.i - 1];
              }
              if (me._opts.enableRotation == true) {
                me.setRotation(proPos, initPos, targetPos);
              }
              if (me._opts.autoView) {
                if (!me._map.getBounds().containsPoint(pos)) {
                  me._map.setCenter(pos);
                }
              }
            }
            //正在移动
            me._marker.setPosition(pos);
            //设置自定义overlay的位置
            me._setInfoWin(pos);
          }
        }, timer);
      };

重写完之后就可以调用路书的api来控制小车移动还是停止了

lushu.start()   pause()  stop() 

好最后整理一遍

<template>
    <div>
        <div id='mymap'></div>
        <button @click='play(1)'>播放</button>
        <button @click='play(2)'>暂停</button>
        <button @click='play(3)'>停止</button>
    </div>
    
</template>
<script>
    data(){
        return{
            gosArr:[],//后台拿到的gps点数组
            speed:4000,//速度
            lushu:{},//路书
            mycaiId:'京123465',
            myMap: {} //地图
        }
    },
    methods:{
           initMap(){
                var map = new BMap.Map("mymap");
                map.enableScrollWheelZoom(new BMap.Point(116.404, 39.915), 13);
                map.centerAndZoom();
                var arrPois = [];

                for (let i = 0; i < this.gpsArr.length; i++) {
                  var p0 = this.gpsArr[i].longtitude;
                  var p1 = this.gpsArr[i].latitude;
                  // var checksum = makerArry[i].checksum;
                  var point = new BMap.Point(p0, p1); //118.230272,33.482474
                  arrPois.push(point);
                }
                //画轨迹
                  var polyLine = new BMap.Polyline(arrPois, {
                    strokeColor: "blue", //设置颜色
                    strokeWeight: 5, //宽度
                    strokeOpacity: 0.5 //透明度
                  });
                  map.addOverlay(polyLine);
                  //画轨迹结束
                BMapLib.LuShu.prototype._move = function(initPos, targetPos, effect) {
        var pointsArr = [initPos, targetPos]; //点数组
        var me = this,
          //当前的帧数
          currentCount = 0,
          //步长，米/秒
          timer = 10,
          step = this._opts.speed / (1000 / timer),
          //初始坐标
          init_pos = this._projection.lngLatToPoint(initPos),
          //获取结束点的(x,y)坐标
          target_pos = this._projection.lngLatToPoint(targetPos),
          //总的步长
          count = Math.round(me._getDistance(init_pos, target_pos) / step);
        //显示折线 syj201607191107
        //如果想显示小车走过的痕迹，放开这段代码就行
        // this._map.addOverlay(
        //   new BMap.Polyline(pointsArr, {
        //     strokeColor: "#111",
        //     strokeWeight: 5,
        //     strokeOpacity: 0.5
        //   })
        // ); // 画线
        //如果小于1直接移动到下一点
        if (count < 1) {
          me._moveNext(++me.i);
          return;
        }
        me._intervalFlag = setInterval(function() {
          //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
          if (currentCount >= count) {
            clearInterval(me._intervalFlag);
            //移动的点已经超过总的长度
            if (me.i > me._path.length) {
              return;
            }
            //运行下一个点
            me._moveNext(++me.i);
          } else {
            currentCount++;
            var x = effect(init_pos.x, target_pos.x, currentCount, count),
              y = effect(init_pos.y, target_pos.y, currentCount, count),
              pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
            //设置marker
            if (currentCount == 1) {
              var proPos = null;
              if (me.i - 1 >= 0) {
                proPos = me._path[me.i - 1];
              }
              if (me._opts.enableRotation == true) {
                me.setRotation(proPos, initPos, targetPos);
              }
              if (me._opts.autoView) {
                if (!me._map.getBounds().containsPoint(pos)) {
                  me._map.setCenter(pos);
                }
              }
            }
            //正在移动
            me._marker.setPosition(pos);
            //设置自定义overlay的位置
            me._setInfoWin(pos);
          }
        }, timer);
      };    
            this.initLushu(map, arrPois, this.mycaiId);
            },
            initLushu(map, arrPois, mycaiId) {
                  this.lushu = new BMapLib.LuShu(map, arrPois, {
                    defaultContent: mycaiId, //"从天安门到百度大厦"
                    autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                    icon: new BMap.Icon(
                      "http://developer.baidu.com/map/jsdemo/img/car.png",
                      new BMap.Size(52, 26),
                      {
                        anchor: new BMap.Size(27, 13)
                      }
                    ),
                    speed: this.speed,
                    enableRotation: true, //是否设置marker随着道路的走向进行旋转
                    landmarkPois: [
                      {
                        lng: 116.306954,
                        lat: 40.05718,
                        html: "加油站",
                        pauseTime: 2
                      }
                    ]
                  });
                },
                play(val) {
      if (this.arrIndex >= this.gpsArr.length - 3) {
        this.arrIndex = 0;
      }
      switch (val) {
        case 1:
          this.lushu.start();
          break;
        case 2:
          this.lushu.pause();
          break;
        case 3:
          this.lushu.stop();
          this.arrIndex = 0;
          this.percentage = 0;
          break;
      }
    },
                
    }

</script>
<style scoped>
</style>

 

攻城狮狮
关注
专栏目录
baidu 路书 轨迹回放
03-18
baidu 路书 轨迹回放。可以实现暂停、跟随。可以自定义。
百度地图 车辆轨迹 回放
09-15
百度地图 车辆轨迹 回放
Vue 中使用 InMap 创建动态轨迹地图
最新发布
ScriptEcho的博客
07-30 469
动态轨迹地图广泛应用于物流追踪、车辆管理、人员定位等场景，可直观展示移动对象的历史轨迹和实时位置。本代码示例展示了如何使用 Vue 框架和 InMap 库创建一个动态轨迹地图，实现轨迹展示、实时更新和交互功能。加载 InMap 库并创建地图实例从外部数据源加载轨迹数据创建轨迹线覆盖物并添加到地图设置轨迹线样式和交互事件实时更新轨迹数据，反映移动对象的最新位置开发这段代码的过程让我深入了解了 Vue 中使用 InMap 创建动态轨迹地图的技术。
百度地图-路书根据点画出轨迹
08-22
根据点画出轨迹可以做轨迹回放功能，基于百度地图开发
利用百度地图实现路书实时轨迹边走边划
07-12
利用百度地图实现路书实时轨迹边走边划
百度地图路书实现轨迹播放，停止，暂停。可根据下拉框改变播放的速度。
热门推荐
碎调122的博客
03-15 1万+
代码参考 https://www.cnblogs.com/syj2016/p/5685294.html 代码贴上 html： <button id="run">开始</button> <button id="stop">停止</button> ...
百度地图路书边走边画功能
ssiizhang的博客
04-14 1739
百度地图路书边走边画功能，附带速度控制和暂停功能
vue + 百度地图实现轨迹回放（很详细）
博客简介
04-07 3319
vue实现轨迹回放（很详细）
vue 2.x 使用百度地图 与 轨迹回放
u013771380的博客
07-12 801
因公司项目需求需要用到百度地图在后台管理端呈现，由于之前未和任何地图打过交道的，第一时间便是百度查找资料，在vue导入使用百度地图网上的资料很乱，各种自定义方法，各种异步方法导入，我刚开始导入地图都踩了不少坑，后面查找到vue2.x使用组件化导入地图，既然vue是组件化，那我觉得就应该拿单页面组件化的思维去干活能，地址如下，如未打开网址请翻墙使用，不知道是否网络原因，我在广东使用需要翻墙，我朋友在四川那边打开地址就不用 https://dafrok.github.io/vue-baidu-map/#/zh
从零开始的VUE项目-11（轨迹回放）
木卯彳亍的博客
04-20 1561
实现结果：小车按轨迹移动
BMapGL实现地图轨迹运动（地图视角不变）
liu_liYao的博客
12-30 3537
BMmapGL实现地图轨迹 想要实现： 轨迹运动地图视角不能随之改变 有icon标识运动当前的位位置 总的说就是在BMapGl里实现BMap的轨迹运动功能 由于数据之间的经纬度之间的距离太遥远，不能使用每隔一段时间换一个point这种办法，后来仔细看了看百度地图的demo文档，路书的能实现均匀的轨迹运动，但是需求和demo还是有一点点的不同，所以做了小小的改动。 路书demo 最后实现的效果如下： 引入路书的js 在地图上根据数据绘制出一条线 icon和轨迹 var points = [] /
使用百度地图API实现轨迹回放
09-23
使用百度地图API实现轨迹回放
基于百度地图实现的轨迹回放
08-14
本项目"基于百度地图实现的轨迹回放"聚焦于如何利用百度地图API来重现和展示用户或物体的移动路径。下面将详细介绍这一技术及其核心知识点。 一、百度地图API 百度地图API是百度提供的一套用于开发地图应用的工具集...
百度地图API路书实现历史轨迹回放
Wxhwyr的博客
06-09 2859
路书的基本使用 路书的开始、暂停、继续 滑动条控制路书速度 滑动条控制路书进度 路书运动过程信息窗口内容改变 路书边运动边画轨迹（使用BMap.DrivingRoute对路径进行修正）
使用百度地图实现车辆轨迹回放
格物穷理
11-02 8401
最近在做的项目有个车辆轨迹回放需求，查资料看到可以使用百度地图的路书功能实现,百度路书功能如下。 点击开始按钮，小车会在地图上移动还原历史轨迹。 具体需求就是通过调用后台接口获取到指定车辆的指定时间段的位置信息，将位置信息还原到地图上，点击开始按钮，小车开始在地图上移动，同时添加开始、暂停、停止，地图缩放和速度调整功能。功能按键悬浮在地图左上角。 添加申请到的应用秘钥和路书js文件 <script src="http://api.map.baidu.com/api?v=2.0&amp.
Vue中实现车辆轨迹回放(高德地图)功能:
SunPeng的博客
07-15 4252
Vue中实现车辆轨迹回放(高德地图)功能，AMap is not defined，高德地图车辆轨迹，设置起始点标记
vue-baidu-map路书实现轨迹回放
weixin_45774558的博客
02-09 4393
通过vue-baidu-map中路书来实现的，bml-lushu是用来还原行进轨迹的组件。
百度地图路书(BMapLib.LuShu)------在vue项目中使用原生实现在线和离线地图
yrrjiayou的博客
05-14 6029
百度地图路书(BMapLib.LuShu)------在vue项目中使用原生实现在线和离线地图
vue 百度地图 jsapi 轨迹 回放
12-16
Vue.js是一个用于构建用户界面的开源JavaScript框架，可以简化开发过程并提高开发效率。百度地图JS API是百度地图提供的一套JavaScript API，可以在网页中集成地图功能。轨迹回放是指根据已经记录的轨迹数据，将轨迹在地图上以动画的形式重新播放出来。 在Vue中使用百度地图JS API进行轨迹回放，首先需要在Vue项目中引入百度地图的JS文件，并在Vue实例的mounted钩子函数中初始化地图。 在获取到轨迹数据后，可以使用百度地图提供的Polyline类创建一个折线对象，并将轨迹点添加到折线对象中。然后使用地图的addOverlay方法将折线对象添加到地图上，实现轨迹的显示。 为了实现轨迹的回放效果，可以使用Vue的定时器函数setInterval来定时改变折线对象的显示范围，从而实现轨迹的动画效果。可以通过设置折线对象的路径切片来控制每次显示的轨迹点数量，并随着时间的推移逐渐增加显示的点数，从而实现回放效果。 同时，为了提高回放的流畅度和体验，可以使用百度地图提供的动画效果类Effect来给轨迹点添加动画效果，比如平滑移动、旋转等，使得轨迹回放更加真实。 总而言之，利用Vue和百度地图JS API，可以很方便地实现轨迹回放功能。通过初始化地图、创建折线对象、定时改变折线对象的显示范围，再加上动画效果的设置，就能够实现一个带有回放功能的轨迹展示页面。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

攻城狮狮

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

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

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

打赏作者

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

抵扣说明：

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

余额充值