百度路书做轨迹回放-vue

其实不管是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{
        gosArr:[],//后台拿到的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>

百度路书做轨迹回放-vue

猜你喜欢