TrackLine播放轨迹
向场景视图中添加三维坐标数组上的模型动画播放
支持播放速度控制，支持播放，暂停，倒放等操作
方法
批量/单个添加播放轨迹
- 方法名：add
- 参数说明：
// 方法
add(trackline: TrackLineOptions | Array<TrackLineOptions>): this
// TrackLineOptions 参数说明
export type TrackLineOptions = {
id: string;
coordinates: Array<Array<number>>; // 轨迹坐标
duration?: number; // 播放时长
follow?: boolean;// 是否跟随
model?: string; // 模型 TrackModel.CAR TrackModel.FPV TrackModel.NULL
};
- 示例参考：
async function addTrackline(count: number = 10) {
const datas: Array<any> = []
for (let i: number = 0; i < count; i++) {
const height: number = Math.random() * 100
const randomX: number = Math.random() * 0.001
const randomY: number = Math.random() * 0.001
const trackline: any = {
id: `trackline${i}`,
coordinates: [
[121.982822 + randomX, 40.733832 + randomY, height],
[121.988949 + randomX, 40.731281 + randomY, height],
[121.990651 + randomX, 40.733259 + randomY, height],
[121.99326 + randomX, 40.732026 + randomY, height],
[121.994811 + randomX, 40.733918 + randomY, height],
[121.996399 + randomX, 40.733201 + randomY, height]
],
duration: 10
}
datas.push(trackline)
}
viewer.trackline.add(datas, 'testlayer')
}
全部播放轨迹移除
- 移除三维场景中全部播放轨迹
- 方法名： clear
- 参数说明：
/**
* 移除三维场景中全部播放轨迹
* @returns
*/
clear(): this
- 示例参考：
viewer.trackline.clear()
根据id完成播放轨迹移除
- 根据id移除三维场景中已添加的播放轨迹
- 方法名： clearById
- 参数说明：
/**
* 根据id移除三维场景中已添加的播放轨迹
* @param id
* @returns
*/
clearById(id: string | Array<string>): this
- 示例参考：
viewer.trackline.clearById('trackline3')
设置全部轨迹播放状态
- 设置全部轨迹播放的播放，暂停，重播，倒放
- 方法名：operate
- 参数说明：
/**
* 设置播放操作
* @param operation
* @returns
*/
operate(operation = TrackOperation.PLAY_FROM_START): this
/**
* 播放操作
*/
export class TrackOperation {
/**
* 开始
*/
static PLAY = 'Play' as const;
/**
* 从头开始
*/
static PLAY_FROM_START = 'PlayFromStart' as const;
/**
* 暂停
*/
static STOP = 'Stop' as const;
/**
* 倒播
*/
static REVERSE = 'Reverse' as const;
/**
* 从头开始
*/
static REVERSE_FROM_END = 'ReverseFromEnd' as const;
}
- 示例参考：
viewer.trackline.operate(operation = TrackOperation.PLAY_FROM_START)
传入id(单个或数组)设置轨迹播放状态
- 根据id设置对应轨迹播放的播放，暂停，重播，倒放
- 方法名：operateById
- 参数说明：
/**
* 传入id(单个或数组)设置播放操作
* @param id
* @param operation `Play``PlayFromStart``Stop``Reverse``ReverseFromEnd`
* @returns
*/
operateById(id: string | Array<string>,operation = TrackOperation.PLAY_FROM_START): this
- 示例参考：
viewer.trackline.operateById(id, operation = TrackOperation.PLAY_FROM_START)
设置跟踪相机
- 根据相机相对位置和旋转
- 方法名：setTrackCamera
- 参数说明：
setTrackCamera(armLength = 5000, rotation = [0, -90, 0]): this {
- 示例参考：
viewer.trackline.setTrackCamera(40000, [0, -45, 0])
播放完成事件
- 目前支持三维场景中已添加播放轨迹的完成事件
- 方法名：on/off
- 参数说明：
/**
* 开启TrackLine事件监听
* @param type
* @param callback
* @param context
* @returns
*/
on(type: TrackLineEventType, callback, context) {
return this._tracklineEvent.on(type, callback, context);
}
/**
* 关闭TrackLine事件监听
* @param type
* @param callback
* @param context
* @returns
*/
off(type: TrackLineEventType, callback, context): boolean {
return this._tracklineEvent.off(type, callback, context);
}
// TrackLineEventType 参数说明
export class TrackLineEventType {
static Click = 'click' as const;
static Complete = 'complete' as const;
}
- 示例参考：
viewer.trackline.on(TrackLineEventType.Complete, (res) => {
console.log(res, 'TrackLineEventType.Complete====')
})
- 回调的数据格式说明:
{
"eventName": "OnTrackComplete",
"id": "track1"
}
示例
斜后上方45°追踪
for (let i: number = 0; i < 1; i++) {
const height: number = Math.random() * 100
const randomX: number = Math.random() * 0.001
const randomY: number = Math.random() * 0.001
const coordinates = [
[121.982822 + randomX, 40.733832 + randomY, height],
[121.988949 + randomX, 40.731281 + randomY, height],
[121.990651 + randomX, 40.733259 + randomY, height],
[121.99326 + randomX, 40.732026 + randomY, height],
[121.994811 + randomX, 40.733918 + randomY, height],
[121.996399 + randomX, 40.733201 + randomY, height]
]
const trackline: any = {
id: `trackline${i}`,
coordinates,
duration: 100,
follow
}
datas.push(trackline)
}
viewer.trackline.add(datas, 'testlayer')
viewer.trackline.setTrackCamera(40000, [0, -45, 0])
相机漫游
const height = 40
const coordinates = [
[121.98339118135789, 40.78112801815573],
[121.98501014184853, 40.78028156251776],
[121.98674474237538, 40.77952266208578],
[121.98925027647016, 40.778238349294895],
[121.99190999727796, 40.77683725247533],
[121.99376023783958, 40.775903171512454],
[121.99503227822453, 40.77537774519914],
[121.99611158521986, 40.77473555183937],
[121.99534065165199, 40.77377225016042],
[121.99522501161726, 40.772984083853004],
[121.99657414536028, 40.77245863445356],
[121.99792327910325, 40.771670452562546],
[121.99738362560635, 40.77056114369191],
[121.99672833207319, 40.76965616747478],
[121.99599594518514, 40.768809565662934],
[121.99522501161726, 40.76761262745487],
[121.99422279798, 40.76641566768768],
[121.99349041109036, 40.76559821935987],
[121.9926809308443, 40.7644304185925],
[121.99156307717226, 40.76305822647021],
[121.99083069028262, 40.76186118467422],
[121.99005975671474, 40.76107287708393],
[121.9891433043257, 40.75982614195408],
[121.98831270718216, 40.75895023117104],
[121.98820429677767, 40.75844521675015],
[121.98901087167371, 40.757977789294614],
[121.98784071936865, 40.75654093996698],
[121.98974265876217, 40.755599019380696],
[121.99150543308895, 40.75469297908634],
[121.99334228141947, 40.75381044253638]
]
const trackline: any = {
id: `trackline1`,
coordinates: coordinates.map((item) => {
return [...item, height]
}),
duration: 50,
follow: true,
model: TrackModel.NULL
}
const polysline: PolylineOptions = {
id: `polyline1s`,
coordinates: coordinates.map((item) => {
return [...item, height - 10]
}),
width: 2,
color: 'rgba(0,255,0,1)',
style: PolylineStyle.ARROW,
splineType: PolylineType.LINEAR,
meshDirection: PolylineDirection.GROUND_CENTER
}
viewer.trackline.add([trackline], 'testlayer')
viewer.trackline.setTrackCamera(10, [0, 0, 0])
viewer.polyline.add([polysline], 'testlayer')