高德地图之轨迹回放\巡航图（带进度条）

首先参考的是高德地图，两者均可实现。
轨迹回放：https://lbs.amap.com/demo/javascript-api/example/marker/replaying-historical-running-data
点标记的位移
巡航器移动：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/simple-demo
巡航器的位移
巡航器事件方法：https://lbs.amap.com/api/amap-ui/reference-amap-ui/mass-data/pathsimplifier

巡航器的按钮方法

var navigBtnsConf = [{
            name: '开始巡航',
            action: 'start',
            enableExp: 'navgStatus === "stop" || navgStatus === "pause"'
        }, {
            name: '暂停',
            action: 'pause',
            enableExp: 'navgStatus === "moving"'
        }, {
            name: '恢复',
            action: 'resume',
            enableExp: 'navgStatus === "pause"'
        }, {
            name: '停止',
            action: 'stop',
            enableExp: 'navgStatus === "moving"'
        }, {
            name: '销毁',
            action: 'destroy',
            enableExp: 'navgExists'
        }];

问题：巡航器结束后，轨迹没有清空、巡航器没有回到初始位置。
解决：需要执行停止方法，清除路径。巡航器重新定位

this.navgControl('stop') // 停止
this.navg1.moveToPoint(0, 0); // 移动巡航器到初始位置0，0

问题：点击列表的点，对应巡航器到达指定经纬度，路线。
解决：列表显示的点，与生成的巡航器的节点一一对应，只要对应序号即可

问题：自定义巡航器图片失败
解决：

import imgUrl from '../../assets/daohang.png'

 let image = PathSimplifier.Render.Canvas.getImageContent(imgUrl, onload, onerror)

问题：进度条播放时间和总时间
解决：

// 总时间
      var dis = AMap.GeometryUtil.distanceOfLine(this.lineArr); // 总路程 米
      this.Times = parseInt((dis / 1000 / 200) * 60 * 60); // 计算总时间
      this.totalTime = this.secondToTimeStr(this.Times)

// 进度条变化，时间变化
          that.movedTime = parseInt(that.Times * (that.sliderVal / 100))
          that.passedTime = that.secondToTimeStr(that.movedTime)

问题：巡航器播放完成，进度条实际没有完全播放
问题：巡航器播放速度不是匀速，会出现个别点位移太快、太慢
问题：巡航器节点之间距离太短，对应进度条 移动过快。如下对比图：84、90。
分析：三个问题都是同一错误引起的。应该滑块赋值，其本身赋值为（idx+tail），只考虑百分比，没有考虑节点之间距离的问题，所以不能按照节点比例来计算。只能按照距离。

使用巡航器位移的距离，可以做到对应。但这个得从开始到结束，点无法对应行驶的距离

// 开始到结束，中间没有暂停移动滑块
that.navg1._movedDist = this.getMovedDistance() - that.navg1._startDist; // 现在-开始

最后找到解决办法：

that.navg1._movedDist = this.getMovedDistance() // 巡航器移动距离
// 进度条实时展示tail
!that.isOnSlider && (that.sliderVal = (that.navg1._movedDist / dis) * 100); // 对应进度条滑块值

这里用到 this.getMovedDistance()只是记录：开始0——移动——结束才为0，所以在滑块改变方法中调用stop来清空this.getMovedDistance()。
通过打印能够清楚的看到滑块移动后执行的方法

// 滑块改变位置
    sliderChange (val) {
      if (this.beforeInit) {
        return
      }
      this.navgControl('stop')
      this.navgControl('start')
      this.navgControl('pause') // 此时清空this.getMovedDistance()，状态改为 暂停this.palyStatus = 1
      // 先改为播放状态
      if (this.palyStatus === 0) {
        this.navgControl('start')
        this.navgControl('pause')
      }
      // 滑块值改变，移动巡航器
      let newVal = typeof (newVal) === 'number' ? val : this.sliderVal // 判断滑块值,赋值
      // console.log(newVal, '滑块值')
      var dis = AMap.GeometryUtil.distanceOfLine(this.lineArr); // 总路程 米
      let num = (newVal / 100) * dis // 滑块移动的总距离
      // console.log(num, '移动滑块距离')
      this.navg1.moveByDistance(num) // 将巡航器移动指定的距离，单位米
      this.pathSimplifierIns.renderLater();
    },

问题：采用表格搜索的方式绘制巡航器、巡航线，前一个搜索条件的线无法清除，导致两个线叠加
解决：

this.pathSimplifierIns.setData() // 设定数据源数组，并触发重新绘制。data为空时将清除显示内容。 

到这里文章就结束了，其实是一个很简单的实现过程，认真看Api文档就能够实现，但是前前后后试了5、6种实现方法花了两周的时间。总结来说，整理好思路这个才是最重要的。
演示图：

参考代码：（ps：用的是节点定位，所以定位不适用）
https://blog.csdn.net/weixin_40579884/article/details/89675275?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.highlightwordscore&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.highlightwordscore

https://www.codetd.com/article/11454469