Vue+高德地圖巡航軌跡，實現軌跡回放加進度條，加減速

應公司業務要求，給軌跡回放加個滾動條，一開始我采用的是高德地圖的折線繪制，但是如果要加上進度條並不太不合適，拖動滾動條，點位沒有恢復的API，后來決定使用巡航軌跡，巡航軌跡支持更豐富的軌跡API，使用起來也更方便。

下面是做完的效果圖：

 

 

 

使用的技術有：vue，高德地圖1.4（amap），element-UI

下面的是部分源碼：

html部分

<template>
  <div id="demo">
    <div id="test-map" />
    <!--控制條-->
    <div class="map-control" v-show="isActual">
      <!--播放暫停按鈕-->
      <Icon
        v-if="!isPlay"
        class="play-icon"
        type="ios-play"
        @click="isPlay=true;navgControl('start')"
      />
      <Icon v-else class="play-icon" type="ios-pause" @click="isPlay=false;navgControl('pause')"/>
      <!--已播放時間-->
      <span class="passed-time">{{passedTime}}</span>
      <!--進度條-->
      <el-slider v-model="sliderVal" :format-tooltip="hideFormat" :step="0.0001"></el-slider>
      <!--倍速-->
      <div class="map-times" @mouseenter="isTimesChoose=true" @mouseleave="isTimesChoose=false">
        <div class="times-show">倍速 {{times}}</div>
        <div class="choose-box">
          <ul v-show="isTimesChoose">
            <li v-for="item in speedList" :key="item.value" :class="{active:times==item.value}" @click="changeSpeed(item.value)">{{item.label}}</li>
          </ul>
        </div>
      </div>
      <!--結束時間-->
      <span class="passed-time">{{totalTime}}</span>
    </div>
  </div>
</template>

JS處理部分：

1.初始化地圖：

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

2.初始化組件實例

// 初始化組件實例
      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

            // 計算下一個距離速度
            if (idx < len - 1) {
              that.navgtr.setSpeed(that.navgtrSpeed * that.times);
            }
            // 進度條實時展示tail
            !that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100);
            // 如果到頭了，回到初始狀態
            if (that.navgtr.isCursorAtPathEnd()) {
              that.playIcon = "start";
              that.isPlay = false;
              that.sliderVal = 0;
              that.passedTime = that.totalTime;
            }
          });
        })
      },

3.關鍵方法，控制車輛跟隨進度條移動

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();
      },

4.對滑塊設置監聽

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);

源碼地址：
鏈接：https://pan.baidu.com/s/120Mcfc27aWXaYviigxFnFQ 
提取碼：god7

參考博客：https://blog.csdn.net/weixin_40579884/article/details/89675275