AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/19 17:12
轨迹
简介

轨迹插件基于百度地图GL API实现轨迹可视化能力,用于轨迹展示与回放。此插件具备以下能力:

  •  支持本地回放式和在线实时式两种轨迹模式

  •  在线实时式轨迹模式支持设置引导路线

  •  轨迹线提供丰富的样式设置,支持渐变线、生长线等轨迹风格

  •  移动点支持MarkerPoint、GroundPoint、ModelPoint和CustomPoint四种风格设置

  •  支持多条多类型的轨迹线同时展示

  •  提供轨迹线、移动点、引导路线的消息事件

  •  提供基础事件交互能力

DEMO详情
LocalTrack示例
LiveTrack示例
类参考

详见类参考

示例代码
1. 引入
// npm引入
import Track from '@bmapgl-plugin/track';
// CDN引入
<script src="https://unpkg.com/@bmapgl-plugin/track"></script>
2. 创建轨迹
// 创建地图
const map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.418, 39.918), 16);
map.enableScrollWheelZoom(true);
// 创建轨迹对象
const track = new Track.View(map);
// 设置轨迹点数据
const trackData: Track.TrackPoint = [];
// 创建回放轨迹线对象
const trackLine = new Track.LocalTrack({
trackPath: trackData
});
// 添加轨迹线对象
track.addTrackLine(trackLine);
// [可选]设置地图追踪轨迹线对象
track.focusTrack(trackLine);
///////// [可选] 设置移动点对象 /////////
const movePoint = new Track.ModelPoint({ point: trackData[0].getPoint() });
movePoint.addEventListener(Track.MapCodes.CLICK,(e:any)=>{
console.log('Track.ModelPoint.click', e);
})
movePoint.addEventListener(Track.MapCodes.MOUSE_OVER,(e:any)=>{
console.log('Track.ModelPoint.MOUSE_OVER', e);
})
movePoint.addEventListener(Track.MapCodes.MOUSE_OUT,(e:any)=>{
console.log('Track.ModelPoint.MOUSE_OUT', e);
})
trackLine.setMovePoint(movePoint);
// [可选]监听事件
trackLine.on(Track.LineCodes.STATUS, (status:Track.StatusCodes) => {
switch (status) {
case Track.StatusCodes.PLAY:
case Track.StatusCodes.RESUME:
break;
case Track.StatusCodes.INIT:
case Track.StatusCodes.PAUSE:
case Track.StatusCodes.STOP:
case Track.StatusCodes.FINISH:
let box = trackRoad.getBBox();
if(box){
let bounds = [new BMapGL.Point(box[0], box[1]), new BMapGL.Point(box[2], box[3])];
map.setViewport(bounds);
}
break;
default:
break;
}
});

上一篇

点聚合

下一篇

类参考

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