地图 marker 多段动画轨迹

适用于高德地图的 marker 多端轨迹运行动画封装。

Interface

interface TrackMaker {
  // 路线
  track?: AMap.LngLat[] | Array<number[]>
  // AMap.Marker. 实例对象
  marker?: AMap.Marker
  // AMap.Marker.moveAlong 配置
  config: Record<string, any>
  // 当前运行段
  step: number
  // 设置 Marker 和 Track 的实例。设置之后会自动 reset
  set(marker: AMap.Marker, track: AMap.LngLat[] | Array<number[]>): void
  // 重置所有状态
  reset(): void
  // 动画结束事件
  onEnd(cb: () => void): void
  // 动画进度，参数为进度百分比
  onProgressChange(cb: (process: number) => void): void
  // 进度修改，输入百分比，修改 marker 的位置，调用时自动暂停动画
  setProgress(process: number): void
  // 配置修改，例如 duration 修改，调用时自动暂停动画
  setConfig(config: Marker.moveAlong.config): void
}

Example

import TrackMarker from '@likcheung/track-marker'
import api from './api.ts'

const moveAlongConfig = {
  duration: +progressSpeed.value
}

const trackMarker = new TrackMarker(moveAlongConfig)

trackMarker.onProgressChange(peresent => {
  setProcessWidth(peresent)
  progressNum.value = peresent * 100
})
trackMarker.onEnd(() => {
  setProcessWidth(0)
})

const init = async () => {
  const lineArr = await api()

  AMap.plugin('AMap.MoveAnimation', function () {
    const map = new AMap.Map('container', {
      resizeEnable: true,
      center: [116.397428, 39.90923],
      zoom: 17
    })
    const marker = new AMap.Marker({
      map: map,
      position: [116.478935, 39.997761],
      icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
      offset: new AMap.Pixel(-13, -26)
    })
    const polyline = new AMap.Polyline({
      map: map,
      path: lineArr,
      showDir: true,
      strokeColor: '#28F', //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6 //线宽
      // strokeStyle: "solid"  //线样式
    })
    map.setFitView()

    trackMarker.set(marker, lineArr)

    start.addEventListener('click', () => {
      trackMarker.start()
    })
    pause.addEventListener('click', () => {
      trackMarker.pause()
    })

    // HTMLInputElement
    progressNum.addEventListener('input', e => {
      const peresnt = e.target.value / 100
      trackMarker.setProgress(peresnt)
    })
    // HTMLInputElement
    progressSpeed.addEventListener('input', e => {
      moveAlongConfig.duration = +e.target.value
      trackMarker.setConfig(moveAlongConfig)
    })
  })
}

init()