轨迹插件基于百度地图GL API实现轨迹可视化能力,用于轨迹展示与回放。此插件具备以下能力:
支持本地回放式和在线实时式两种轨迹模式
在线实时式轨迹模式支持设置引导路线
轨迹线提供丰富的样式设置,支持渐变线、生长线等轨迹风格
移动点支持MarkerPoint、GroundPoint、ModelPoint和CustomPoint四种风格设置
支持多条多类型的轨迹线同时展示
提供轨迹线、移动点、引导路线的消息事件
提供基础事件交互能力
// npm引入import Track from '@bmapgl-plugin/track';
// CDN引入<script src="https://unpkg.com/@bmapgl-plugin/track"></script>
// 创建地图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;}});
上一篇
下一篇
本篇文章对您是否有帮助?