高德地图轨迹巡航

高德地图也算是重度使用患者了，这个轨迹巡航功能，光看官方文档还是有点子绕，所以自己写一个组合起来的；

声明

let map: any = null // 高德地图对象
// 设备轨迹轨迹
let trajectory: any = []
// 设备图片
const people: any = require('@/assets/images/home/mapMarker/app_people_big.png')
 // 导航器
let pathSimplifierIns: any = null
// 当前轨迹
let cruiser: any = null
const state: any = reactive({
  control: {
    speed: 200,
    isPlay: false,
    progress: 0
  }
})

初始化

resetControl () { // 初始化控制
  state.control.speed = 200
  state.control.isPlay = false
  state.control.progress = 0
  cruiser && cruiser.destroy()
  map && map.clearMap()
  // pathSimplifierIns && pathSimplifierIns.clearPathNavigators()
  pathSimplifierIns && pathSimplifierIns.setData([])
  pathSimplifierIns = null
  cruiser = null
},
createPathSimplifier () { // 创建巡航器
  // const tmpArr = [
  //   [116.478935, 39.997761],
  //   [116.478939, 39.997825],
  //   [116.478912, 39.998549],
  //   [116.478912, 39.998549],
  //   [116.478998, 39.998555],
  //   [116.478998, 39.998555],
  //   [116.479282, 39.99856],
  //   [116.479658, 39.998528],
  //   [116.480151, 39.998453],
  //   [116.480784, 39.998302],
  //   [116.480784, 39.998302],
  //   [116.481149, 39.998184],
  //   [116.481573, 39.997997],
  //   [116.481863, 39.997846],
  //   [116.482072, 39.997718],
  //   [116.482362, 39.997718],
  //   [116.483633, 39.998935],
  //   [116.48367, 39.998968],
  //   [116.484648, 39.999861]
  // ]
  // trajectory = tmpArr
  AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], (PathSimplifier: any, $: any) => {
    if (!PathSimplifier.supportCanvas) {
      Message('warning', '当前环境不支持 Canvas！')
      return
    }
    pathSimplifierIns = new PathSimplifier({
      zIndex: 100,
      map: map,
      getPath: function (pathData: any, pathIndex: any) {
        return pathData.path
      },
      getHoverTitle: function () {
        return ''
      },
      renderOptions: {
        pathLineHoverStyle: false,
        pathLineStyle: {
          strokeStyle: '#3766B4',
          lineWidth: 6,
          borderWidth: 1,
          borderStyle: '#eeeeee',
          dirArrowStyle: true
        },
        renderAllPointsIfNumberBelow: 100
      }
    })
    pathSimplifierIns.setData([{
      name: '',
      path: trajectory
    }])
    cruiser = pathSimplifierIns.createPathNavigator(0, {
      loop: false, // 循环播放
      speed: state.control.speed, // 巡航速度，单位千米/小时
      pathNavigatorStyle: {
        width: 24,
        height: 24,
        // 使用图片
        content: PathSimplifier.Render.Canvas.getImageContent(people),
        strokeStyle: null,
        fillStyle: null,
        // 经过路径的样式
        pathLinePassedStyle: {
          lineWidth: 4,
          strokeStyle: '#3399FF',
          dirArrowStyle: {
            stepSpace: 15,
            strokeStyle: '#fff'
          }
        }
      }
    })
    cruiser.on('move', (data: any, position: any) => {
      const idx = position.dataItem.pointIndex // 走到了第几个点
      const tail = position.tail
      const totalIdx = idx + tail
      const len = position.dataItem.pathData.path.length
      // if (idx < len - 1) {
      //   cruiser.setSpeed(cruiser * that.times);
      // }
      state.control.progress = ((totalIdx / len) * 100).toFixed(1)
      if (cruiser.isCursorAtPathEnd()) {
        state.control.progress = 100
        state.control.isPlay = false
      }
    })
  })
},

控制

trajectoryAnimation (type: number) {
  if (!cruiser) return
  switch (type) {
    case 1: // 开始
      cruiser.start()
      state.control.isPlay = true
      break
    case 2: // 暂停
      if (state.control.progress === 0) {
        cruiser.start()
        return
      }
      cruiser.pause()
      state.control.isPlay = false
      break
    case 3: // 继续
      if (state.control.progress === 100) {
        state.control.isPlay = true
        cruiser.start()
        return
      }
      cruiser.resume()
      state.control.isPlay = true
      break
    case 4: // 停止
      cruiser.stop()
      break
    case 5: // 加速
      cruiser.setSpeed(state.control.speed)
      break
    case 6:
      {
        const newVal: number = state.control.progress
        const num = Number((newVal / 100) * trajectory.length).toFixed(0)
        const decimal = String((newVal / 100) * trajectory.length).split('.')[1] || 0
        cruiser.moveToPoint(num, Number('0.' + decimal))
        pathSimplifierIns.renderLater()
        methods.trajectoryAnimation(3)
      }
      break
  }
},