AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
轨迹
简介

轨迹插件基于百度地图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;
}
});

上一篇

点聚合

下一篇

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