轨迹

更新时间：2024年11月26日

简介

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

支持本地回放式和在线实时式两种轨迹模式
在线实时式轨迹模式支持设置引导路线
轨迹线提供丰富的样式设置，支持渐变线、生长线等轨迹风格
移动点支持MarkerPoint、GroundPoint、ModelPoint和CustomPoint四种风格设置
支持多条多类型的轨迹线同时展示
提供轨迹线、移动点、引导路线的消息事件
提供基础事件交互能力

LocalTrack示例

LiveTrack示例

DEMO详情

类参考

详见类参考

示例代码

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;
    }
});