Skip to content

轨迹播放

YY.formatRouteData(data, options)

轨迹数据格式化函数

  • data 轨迹数据
js
 [{
         coordinate: [120, 31, 0],
         time: 301000
     },
     {
         coordinate: [122, 32, 0],
         time: 541000
     },
     //other coordinates
 ];
  • options 格式化数据的配置信息
    • options.coordinateKey 坐标字段的key,如果需要
    • options.timeKey 时间字段的key,如果需要
    • options.unitTime 时间的单位,比如你的数据里的时间是秒,这时我们可以填写1000,把时间字段转换成毫秒
    • options.duration 持续时间,如果需要,即你的数据没有时间信息,你想自动生成时间,单位是毫秒
js
//数据里已经有了时间了
// the time unit is second
const route = [{
        coord: [120, 31, 0],
        t: 301
    },
    {
        coord: [122, 32, 0],
        t: 541
    },
    //other coordinates
];
const data = YY.formatRouteData(route, {
    coordinateKey: 'coord',
    timeKey: 't',
    unitTime: 1000 //to millisecond
});
js
//数据里没有时间
const route = [{
        coord: [120, 31, 0]
    },
    {
        coord: [122, 32, 0]
    },
    //other coordinates
];
const data = YY.formatRouteData(route, {
    coordinateKey: 'coord',
    //自动生成时间
    duration: 1000 * 100
});

YY. PathPlayer

轨迹播放器, 需要和 formatRouteData 函数 配合使用

creation

  • constructor(routeData, [options])
    • routeData 路径数据formatRouteData运行的结果集
    • options 配置信息
      • unitTime 时间单位,如果你的数据是秒,可以填写1000
      • speed 播放速度,可以理解成视屏的倍速功能
      • autoPlay 是否自动播放
      • repeat 是否重复播放
js
const route = [{
        coordinate: [120, 31, 0],
        time: 301000
    },
    {
        coordinate: [122, 32, 0],
        time: 541000
    },
    //other coordinates
];
const data = YY.formatRouteData(route, {});
const player = new YY.PathPlayer(data, {
    speed: 4,
    debug: false,
    autoPlay: true
});
console.log(player);
player.play();

examples

基本使用
数据里携带时间数据
驾车路线播放

method

方法集合

remove()

  • 移除
  • 返回值: this

add()

  • 添加
  • 返回值: this

play()

  • 播放
  • 返回值: this

pause()

  • 暂停
  • 返回值: this

reset()

  • 重置状态, 使播放器回到初始状态
  • 返回值: this

cancel()

  • 等价于 reset
  • 返回值: this

isPlaying()

  • 是否播放中
  • 返回值: Boolean

isPlayend()

  • 是否播放结束
  • 返回值: Boolean

finish()

  • 播放结束
  • 返回值: this

getSpeed()

  • 获取播放速度
  • 返回值: Number

setSpeed(speed)

  • 设置播放速度
  • 参数
    • {Number} speed
  • 返回值: this

setIndex(index)

  • 设置播放节点, 即将播放位置设置到某个坐标节点
  • 参数
    • {Number} index
  • 返回值: this

setTime(time)

  • 设置播放时间, 即将播放位置设置到某个时间处
  • 参数
    • {Number} time
  • 返回值: this

setPercent(percent)

  • 根据百分比设置播放位置
  • 参数
    • {Number} percent
  • 返回值: this

setData(data)

  • 设置新的数据
  • 参数
    • {Array} data,注意data是formatRouteData的结果集
  • 返回值: this

getCurrentTime()

  • 获取当前的时间
  • 返回值: Number

getStartCoordinate()

  • 获取开始点的坐标
  • 返回值: Array<Number>

getStartInfo()

  • 获取开始点的信息, 包含坐标,旋转的信息
  • 返回值: Object

getData()

  • 移除
  • 返回值: Array<Object>

getStartTime()

  • 获取开始的时间
  • 返回值: Number

getEndTime()

  • 获取结束的时间
  • 返回值: Number

getUnitTime()

  • 获取时间单位
  • 返回值: Number

setUnitTime(t)

  • 设置时间单位
  • 参数
    • {Number} t
  • 返回值: this

getCurrentCoordinate()

  • 获取当前的坐标
  • 返回值: Array<Number>

getCurrentVertex()

  • 获取当前的已经播放的顶点集合
  • 返回值: Array<Object>

getCoordinates()

  • 获取路径的坐标集合
  • 返回值: Array<Array<Number>>

event

事件集合

js
   player.on('playstart playing playend pause', e => {
       console.log(e.type);
   })

add

remove

js
   player.on('add remove', e => {
       console.log(e.type);
   })

playstart

播放开始事件

playing

播放事件, 核心事件,可以监听该事件来更新点的实时位置

playend

播放结束事件

vertex

播放位置经过节点事件, 当播放过程中如果经过坐标节点会触发该事件

settime

设置时间事件, 当 setTime() , setIndex(index) , setPercent(p) 时触发

reset

cancel

pause

finish

This document is generated by vitepress and Edit by deyihu