@bmapgl-plugin/track

简介

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

下载安装

npm install @bmapgl-plugin/track

使用示例

// CDN 引入
import Track from 'https://unpkg.com/@bmapgl-plugin/track';

// npm 引入
import Track from '@bmapgl-plugin/track';

// 创建地图
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;
    }
});

依赖

• 百度地图PC端GL SDK地图能力
• 移动点ModelPoint类型依赖引入threejs和GLTFLoader库文件