Vue中使用高德地图历史轨迹回放（三）-中途加速不回到开始位置

Vue中使用高德地图历史轨迹回放-中途加速不回到开始位置

思路：要想轨迹运动途中点击加速还得不回到原来位置，说明点击加速之后运动轨迹的数组lineArr里面的坐标数量变了=>而且变了之后还得把原来运动过的轨迹画成和之前运动过的轨迹同样的颜色，而后续未运动的点继续照着原来的方法执行=>在继续加速的时候你还得这么做同样的事情。这样就找到一个关键的地方，找到你点击加速时车子运动到的哪个坐标点的位置。

首先：

看一下要用到的参数有那些

      data里面的数据
      marker: {},
      map: {},
      firstArr: [116.478935, 39.997761],
      polyline: {}, //最原始
      passedPolyline: {}, //最原始
      newPolyline: {}, //速度改变后新轨迹
      newPassedPolyline: {}, //速度改变后的新轨迹
      markerSpeed: 200, //运动速度
      speedCount: 1, //速度计数
      havePassedLine: [], //已经运动的点
      NoPassedLine: [], //未运动的点

其次：(关键)

关键的一步在绘制轨迹的时候里面的this.marker.on(“moving”，e=>{})方法

initroad() {
      // 绘制轨迹
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      //绘制路过了的轨迹
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色
        //path: this.lineArr,
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      this.marker.on("moving", e => {
        //获取已经经过点的长度
        this.passedLineLength = e.passedPath.length;
        //已经经过的点
        this.havePassedLine = e.passedPath;
        passedPolyline.setPath(e.passedPath);
      });
      this.map.setFitView(); //合适的视口
    },

接下来：(也关键)

加速代码

//加速
    startAdd() {
      //点击加速将已经运动的点的颜色改成和之前的一样
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.havePassedLine,
        showDir: true,
        strokeColor: "#AF5", //线颜色--绿色的线
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      //截取未运动的点
      if (this.passedLineLength >= 2) {
        this.NoPassedLine = this.lineArr.slice(this.passedLineLength - 2);
      }
      //将未运动的点变成新的点
      this.lineArr = this.NoPassedLine;
      // 绘制轨迹---未运动时候的样式
      this.newPolyline = new AMap.Polyline({
        map: this.map,
        path: this.NoPassedLine,
        showDir: true,
        strokeColor: "#28F", //线颜色--蓝色的线
        strokeOpacity: 1, //线透明度
        strokeWeight: 6, //线宽
        strokeStyle: "solid" //线样式
      });
      //绘制运动过了的轨迹
      var newPassedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色--绿色的线
        // path: this.lineArr,
        strokeOpacity: 1, //线透明度
        strokeWeight: 6, //线宽
        strokeStyle: "solid" //线样式
      });
      this.marker.on("moving", e => {
        this.passedLineLength = e.passedPath.length;
        this.havePassedLine = e.passedPath;
        newPassedPolyline.setPath(e.passedPath);
      });
      this.map.setFitView(); //合适的视口
      if (this.markerSpeed < 1000) {
        this.markerSpeed = 200;
        this.speedCount++;
        this.speedCount = this.speedCount++;
        this.markerSpeed = this.markerSpeed * this.speedCount;
        this.marker.moveAlong(this.NoPassedLine, this.markerSpeed);
      } else {
        this.speedCount = 5;
      }
    },

减速代码

//减速
    startRed() {
      //点击加速将已经运动的点的颜色改成和之前的一样
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.havePassedLine,
        showDir: true,
        strokeColor: "#AF5", //线颜色--绿色的线
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      //截取未运动的点
      if (this.passedLineLength >= 2) {
        this.NoPassedLine = this.lineArr.slice(this.passedLineLength - 2);
      }
      //将未运动的点变成新的点
      this.lineArr = this.NoPassedLine;
      // 绘制轨迹---未运动时候的样式
      this.newPolyline = new AMap.Polyline({
        map: this.map,
        path: this.NoPassedLine,
        showDir: true,
        strokeColor: "#28F", //线颜色--蓝色的线
        strokeOpacity: 1, //线透明度
        strokeWeight: 6, //线宽
        strokeStyle: "solid" //线样式
      });
      //绘制运动过了的轨迹
      var newPassedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色--绿色的线
        // path: this.lineArr,
        strokeOpacity: 1, //线透明度
        strokeWeight: 6, //线宽
        strokeStyle: "solid" //线样式
      });
      this.marker.on("moving", e => {
        this.passedLineLength = e.passedPath.length;
        this.havePassedLine = e.passedPath;
        newPassedPolyline.setPath(e.passedPath);
      });
      this.map.setFitView(); //合适的视口
      if (this.markerSpeed > 200) {
        this.markerSpeed = 200;
        this.speedCount--;
        this.speedCount = this.speedCount--;
        this.markerSpeed = this.markerSpeed * this.speedCount;
        this.marker.moveAlong(this.NoPassedLine, this.markerSpeed);
      } else {
        this.marker.moveAlong(this.NoPassedLine, 200);
        this.speedCount = 1;
      }
    }

最后：

最后当你把那些加速减速写好，发现能加能减 但是重新开始运动又会有问题了。

你用的同一个lineArr那里面数据已经变了。所以如下，又要做一步处理

startAnimation() {
      this.marker.stopMove();
      this.speedCount = 1;
      this.markerSpeed = 200;
      if (this.lineArr.length < this.newLineArr.length) {
        this.lineArr = this.newLineArr;//搞一个和之前数组一样的代码
        this.initroad();
        this.marker.moveAlong(this.lineArr, this.markerSpeed);
      } else {
        this.marker.moveAlong(this.lineArr, this.markerSpeed);
      }
},