轨迹播放插件设计意见征询 ​

maptalks官方有个轨迹播放插件 maptalks.routeplayer 不少同学在使用时遇到了了一些问题：

• 不知道使用RoutePlayer还是使用Route3DPlayer,从名字上看一个用于2d，一个用于3d
• 有些同学会把RoutePlayer和3D(GroupGLLayer)结合导致使用时报错
• route的数据格式设计的不好

• 有时数据里没有时间信息，希望能提供个函数自动为数据生成时间

重新设计 ​

根据群里同学反应，不少同学有轨迹播放的需求，所以我打算把这个插件重写了，来解决以上存在的问题

主要设计有：

• 提供数据格式化函数formatRouteData为路线数据提供如下功能:
  • 数据校验
  • 当数据没有时间时，能自动为其补上时间字段
• 数据只支持经纬度数据,如果是其他的投影的数据，数据转换交给用户(proj4)，而不是在插件内部做数据的转换
• 只提供 RoutePlayer类，适用2d/3d模式
• 插件里不在提供图层，样式等这些功能，仅仅提供调度和管理轨迹，至于用户想把数据和设么图层结合不做任何限制， 即插件里只做轨迹的控制等,通过事件往外扔数据即可，至于用户拿到数据后可以和任意图层结合
• 支持根据时间，路线节点，路线长度百分比来设置当前播放的位置

路线数据结构 ​

[
    {
        "coordinate": [120, 31, 0],
        "time": 1705040556697
    },
    {
        "coordinate": [120, 31, 0],
        "time": 1705040556697
    },
    {
        "coordinate": [120, 31, 0],
        "time": 1705040556697
    },
    {
        "coordinate": [120, 31, 0],
        "time": 1705040556697
    },
    {
        "coordinate": [120, 31, 0],
        "time": 1705040556697
    }
]

• coordinate 坐标数据
• time字段可以缺省，可以通过 formatRouteData函数来自动计算
• 当用户的数据不是这个结构的时，需要用户自己转换
• 其他的业务信息字段

formatRouteData函数 ​

这个函数主要用来格式化路线数据,会提供如下功能

• 简单的数据格式校验
• 如有必要,自动生成时间戳
• 会在数据数据里自动添加一些私有字段，方面RoutePlayer里直接使用

API ​

const routedata = formatRouteData(data, { duration: 1000 * 60 * 10 });

• 如果你的数据里包含了时间信息了,duration不要传值,单位ms，比如10分钟 1000 _ 60 _ 10
• 如果你的数据里没有时间信息，你可以传一个值，表示这个路径的经过时间,内部会自动的为你的每条数据生成对应的时间戳的
• 自动生成的时间采用new Date().getTime()

RoutePlayer ​

构造器 ​

const player = new RoutePlayer(data, {
    speed: 1,
    unitTime: 1,
    debug: true,
    autoPlay: false,
});

• data 必须是 formatRouteData格式化过的数据结果集
• speed表示播放倍速，可以理解为视频的加速播放
• unitTime表示时间单位,内部采用的一律是毫秒，如果你的时间单位很大的话，可以调整这个数字

方法 ​

事件 ​

player.on("playstart playing playend vertex pause time", (e) => {
    console.log(e.type);
});

收集vertex信息是可以做出这种效果的,里面返回你给的原始信息

相关测试demo ​

• 基础的例子

• 和GLTFLayer结合

• 和ThreeLayer结合

• 简单模拟地形