使用百度地图实现车辆轨迹回放

 最近在做的项目有个车辆轨迹回放需求，查资料看到可以使用百度地图的路书功能实现,百度路书功能如下。

点击开始按钮，小车会在地图上移动还原历史轨迹。

具体需求就是通过调用后台接口获取到指定车辆的指定时间段的位置信息，将位置信息还原到地图上，点击开始按钮，小车开始在地图上移动，同时添加开始、暂停、停止，地图缩放和速度调整功能。功能按键悬浮在地图左上角。

添加申请到的应用秘钥和路书js文件

页面布局 

    
        
{{ carMessage }}
        

        
          播放
          暂停
          停止
          缩放
        
          
            运动速度{{speed}}米/秒
            
              50米/秒
              100米/秒
              200米/秒
              400米/秒
              800米/秒
              1600米/秒
            
          
        

        


      

初始化地图 

initMap(){
      this.map = new BMap.Map('mymap4TrackPlay');
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915),6)
      this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

      var mapType1 = new BMap.MapTypeControl(
        {
          mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
          anchor: BMAP_ANCHOR_TOP_RIGHT
        }
      );

      var overView = new BMap.OverviewMapControl();
      var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});

      this.map.addControl(mapType1);          //2D图，混合图
      this.map.addControl(overView);          //添加默认缩略地图控件
      this.map.addControl(overViewOpen);     //右下角，打开
    }

创建路书 

            //获取位置信息
           this.gpsArr =  data.page.data
            //开始位置 结束位置 开始时间，结束时间
            var startPoint,endPoint,workStartTime,workEntTime,carNum,startMile,endMile
            

            for (let i = 0 && this.gpsArr.length>0; i < this.gpsArr.length; i++) {

              var p0 = this.gpsArr[i].lng;
              var p1 = this.gpsArr[i].lat;
              var point = new BMap.Point(p0, p1); 
               //业务逻辑
              if(i===0){
                //开始位置
                startPoint = point
                workStartTime = this.gpsArr[i].time
                carNum = this.gpsArr[i].platenumber
                startMile = this.gpsArr[i].mile
                initWight = this.gpsArr[i].weight
              }
              if(i>0){
                if(this.gpsArr[i].weight>initWight){
                  wightAdd += (this.gpsArr[i].weight-initWight)
                }else{
                  wightRemove += (initWight-this.gpsArr[i].weight)
                }
                initWight = this.gpsArr[i].weight

              }
               //结束位置
              endPoint=point
              workEntTime= this.gpsArr[i].time
              endMile = this.gpsArr[i].mile

              arrPois.push(point);
            }
            
            var startIcon = new BMap.Icon(require("../../../assets/img/start.png"), new BMap.Size(48,48));
            var markerStart = new BMap.Marker(startPoint,{icon:startIcon});  // 创建标注
            var endIcon = new BMap.Icon(require("../../../assets/img/end.png"), new BMap.Size(48,48));
            var markerEnd = new BMap.Marker(endPoint,{icon:endIcon});  // 创建标注
            //添加开始结束点            
            this.map.addOverlay(markerStart);
            this.map.addOverlay(markerEnd);
            markerStart.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            //画轨迹
            var polyLine = new BMap.Polyline(arrPois, {
              strokeColor: "blue", //设置颜色
              strokeWeight: 5, //宽度
              strokeOpacity: 0.5 //透明度
            });
            this.map.addOverlay(polyLine);
            this.map.setViewport(arrPois);
            // this.map.addOverlay(polyLine);
            //创建路书
            lushu = new BMapLib.LuShu(this.map,arrPois,{
              defaultContent:"",
              autoView:true,
              icon  : new BMap.Icon(require("../../../assets/img/car.png"), new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
              speed: this.speed,
              enableRotation:true,//是否设置marker随着道路的走向进行旋转
              landmarkPois: [
              ]});

    //速度调整
    handleCommand(command){
      this.speed = command
      lushu._opts.speed = command
    },
    //开始播放
    start(){
      lushu.start()
    },
    //停止播放
    stop(){
      lushu.stop()
    },
    //暂停播放
    pause(){
      lushu.pause()
    },
    //地图控件缩放
    zoomInOrOut(){
      this.showselect ?this.showselect=false:this.showselect=true
      this.showCarTeam ?this.showCarTeam=false:this.showCarTeam=true
    },

效果如下 

 

后面想继续添加个类似视频播放进度控制的功能，通过拖拽进度条实现从指定时间点开始播放。后续继续改进。