Vue+高德地图巡航轨迹，实现轨迹回放加进度条，加减速

lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new AMap.Map(‘test-map‘, {
          zooms: [13, 18], // 地图缩放范围
          center: new AMap.LngLat(116.397428, 39.90923)
        })
        this.initPathSimplifier()
      })

// 初始化组件实例
      initPathSimplifier() {
        let that = this
        AMapUI.load([‘ui/misc/PathSimplifier‘], (PathSimplifier) => {
          if (!PathSimplifier.supportCanvas) {
            alert(‘当前环境不支持 Canvas！‘)
            return
          }
          //创建一个巡航轨迹路线
          that.pathSimplifierIns = new PathSimplifier({
            zIndex: 100,//地图层级，
            map: this.map, //所属的地图实例
            //巡航路线轨迹列表
            getPath: (pathData, pathIndex) => {
              return pathData.path;
            },
            //hover每一个轨迹点，展示内容
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
              if (pointIndex >= 0) {
                return pathData.name + ‘，点：‘ + pointIndex + ‘/‘ + pathData.path.length;
              }
              return pathData.name + ‘，点数量‘ + pathData.path.length;
            },
            //自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档 renderOptions:{}
            //绘制路线节点
            renderOptions: {
              renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
          });

          //设置数据
          that.pathSimplifierIns.setData([{
            name: ‘路线0‘,
            path: that.actualList
          }]);
          //对第一条线路（即索引 0）创建一个巡航器
          that.navgtr = that.pathSimplifierIns.createPathNavigator(0, {
            loop: false, //循环播放
            speed: that.navgtrSpeed //巡航速度，单位千米/小时
          });

          that.navgtr.on("start resume", function() {
            that.navgtr._startTime = Date.now();
            that.navgtr._startDist = this.getMovedDistance();
          });
          that.navgtr.on("stop pause", function() {
            that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
            that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
          });
          that.navgtr.on("move", function(data,position) {
            let idx = position.dataItem.pointIndex //走到了第几个点
            let tail = position.tail //至下一个节点的比例位置
            let totalIdx = idx + tail
            let len = position.dataItem.pathData.path.length

            // 计算下一个距离速度
            // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
            // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
            // that.navgtr._realSpeed = (that.navgtr._movedDist / that.navgtr._movedTime * 3600);
            // let point = trackList[idx]
            if (idx < len - 1) {
              // that.navgtr.setSpeed(that.navgtr._realSpeed * that.times);
              that.navgtr.setSpeed(that.navgtrSpeed * that.times);
            }
            // 进度条实时展示tail
            !that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100);
            // 已经播放时间
            // let sTime = (pointObj.stampTime-startStampTime)/1000;
            // let sTime = parseInt((endPoint.stampTime - startPoint.stampTime) / 1000 * that.sliderVal / 100);
            //
            // that.passedTime = that.getTime(sTime);
            // 如果到头了，回到初始状态
            if (that.navgtr.isCursorAtPathEnd()) {
              that.playIcon = "start";
              that.isPlay = false;
              that.sliderVal = 0;
              that.passedTime = that.totalTime;
            }
          });
        })
      },

sliderChange(val){
        let newVal = typeof(newVal)===‘number‘ ? val : this.sliderVal
        let num = parseInt((newVal / 100) * this.actualList.length);
        let decimal = String((newVal / 100) * this.actualList.length).split(‘.‘)[1]||0
        this.navgtr.moveToPoint(num, Number(‘0.‘+decimal));
        this.pathSimplifierIns.renderLater();
      },

watch:{
  sliderVal(newVal) {
   if (!this.isOnSlider) {
    return false;
   }
   this.sliderChange(newVal)
 }
},

let that = this;
let el = document.getElementsByClassName("el-slider__button-wrapper")[0];
let el2 = document.getElementsByClassName("el-slider__runway")[0];
el2.addEventListener("click", that.sliderChange,false);
el.addEventListener("mousedown", that.openSlider,false);
// 此处用document是因为，滑动较为随意时，mouseup可能不是作用在el上
document.addEventListener("mouseup",that.closeSlider,false);