产品服务
解决方案
文档与支持
定价

绘制动态轨迹

下载开发文档

2.0.3 起支持动态轨迹绘制,开发者可以提供轨迹数据,来动态展示轨迹,支持监听轨迹绘制状态,具体配置可参考ITrackOption。

绘制2D动态轨迹

1、通过trackType来设置轨迹类型为TrackType.Track,即普通2D动态轨迹。

示例代码如下:

this.track = new Track({
points: trace, // 路线坐标点
trackMove: true,
trackType: SysEnum.TrackType.Track
opacity: 0.5,
animationTime: 5000,
traceAnimationListener: mTraceAnimationListener
})
this.mapController?.addOverlay(this.track);

运行结果如下:

2、设置动态轨迹监听回调。

示例代码如下:

const mTraceAnimationListener:TraceAnimationListener = {
/**
* 轨迹动画更新进度回调
* @param percent 轨迹动画更新进度,取值范围 [0, 100](0 表示开始,100 表示结束)
*/
onTraceAnimationUpdate:(percent: number) => {
},
/**
* 轨迹动画当前位置更新回调
* @param position 轨迹动画当前帧的位置坐标(经纬度信息)
*/
onTraceUpdatePosition:(position: LatLng)=>{
},
/**
* 轨迹动画结束回调
* 当动画播放完成(包括正常结束、手动停止)时触发
*/
onTraceAnimationFinish:() =>{
}
}

3、渐变轨迹线

动态轨迹支持为每个轨迹点配置颜色来实现渐变轨迹效果。通过trackType为TrackType.TrackGradient并传入的gradientColors来开启,传入int类型十六进制或者rgb形式的颜色数组。

代码如下:

const colors = [
0xAA0000FF,0xAA00FF00,0xAAFF0000,
0xAA0000FF,0xAA00FF00,0xAAFF0000,
0xAA0000FF,0xAA00FF00,0xAAFF0000,
0xAA0000FF,0xAA00FF00,0xAAFF0000,
0xAA0000FF,0xAA0000FF,0xAA00FF00,
0xAAFF0000,
];
this.track = new Track({
points: trace,
trackMove: true,
trackType: SysEnum.TrackType.TrackGradient,,
gradientColors:colors,
animationTime: 5000,
traceAnimationListener: mTraceAnimationListener
})

效果如图:

绘制3D动态轨迹

1、通过设置trackType为TrackType.Surface绘制3D表面轨迹类型

let trace = [
new LatLng(40.055826, 116.307917), new LatLng(40.055916, 116.308455), new LatLng(40.055967, 116.308549),
new LatLng(40.056014, 116.308574), new LatLng(40.056440, 116.308485), new LatLng(40.056816, 116.308352),
new LatLng(40.057997, 116.307725), new LatLng(40.058022, 116.307693), new LatLng(40.058029, 116.307590),
new LatLng(40.057913, 116.307119), new LatLng(40.057850, 116.306945), new LatLng(40.057756, 116.306915),
new LatLng(40.057225, 116.307164), new LatLng(40.056134, 116.307546), new LatLng(40.055879, 116.307636),
new LatLng(40.055826, 116.307697),
];
const heightArr: number[] = [
100,200,100,
300,100,100,
100,50,100,
600,123,56,
800,345,1000,
600,
];
const palettePng:ImageEntity = new ImageEntity('rawfile://track_palette.png');
this.track = new Track({
points: trace,
trackMove: true,
palette:palettePng, //必传,设置3D轨迹调色板
trackType: SysEnum.TrackType.Surface,
heights: heightArr, //必传,3D轨迹高度数组,设置3D轨迹高度,长度必须和points一致
animationTime: 5000,
traceAnimationListener: mTraceAnimationListener
})

效果如下:

2、通过设置trackType为TrackType.Default3D绘制默认3D轨迹类型

...
const projectionPalettePng:ImageEntity = new ImageEntity('rawfile://track_projection_palette.png');
this.track = new Track({
points: trace,
trackMove: true,
palette:palettePng,
paletteOpacity: 0.5,
projectionPalette:projectionPalettePng, //底部阴影调色板,在trackType为SysEnum.TrackType.Default3D时必传
trackType: SysEnum.TrackType.Default3D,
heights: heightArr,
animationTime: 5000,
})
this.mapController?.addOverlay(this.track);

效果如下:

上一篇

位置短地址分享

下一篇

请求状态码说明

本篇文章对您是否有帮助?