上图为先:
轨迹的组成:
起点、终点、一条线、线上的小车
主要功能:
添加轨迹、小车在轨迹上跑动/暂停、小车回到起点/终点、小车速度调节、轨迹的粗细调节
实现方式:路书
还有一种是在轨迹线不断的对小车进行添加和删除操作,感觉会更灵活,因为可以时刻记录你想要的数据,但是路书是封装好的方式,我也没有研究很全面
添加轨迹
// 画轨迹drawTrack(trackArr: Array<any>, startOrEnd?: any) {this.lushuPointArr = [];trackArr.forEach((ele: any) => {this.lushuPointArr.push(new BMap.Point(ele.lng, ele.lat));});// 创建开始、结束点this.startPoint = new BMap.Point(trackArr[0].lng, trackArr[0].lat);let startIcon: any;if (!startOrEnd || startOrEnd === 2) {startIcon = new BMap.Icon('../../../../../assets/font/endtrack.png',new BMap.Size(39, 39));}if (startOrEnd === 1) {startIcon = new BMap.Icon('../../../../../assets/font/track_car.png',new BMap.Size(39, 39));}this.startMarker = new BMap.Marker(this.startPoint, {icon: startIcon });this.map.addOverlay(this.startMarker);// this.map.setCenter(this.startPoint);// 创建结束点this.endPoint = new BMap.Point(trackArr[trackArr.length - 1].lng,trackArr[trackArr.length - 1].lat);let endIcon: any;if (!startOrEnd || startOrEnd === 1) {endIcon = new BMap.Icon('../../../../../assets/font/endtrack.png',new BMap.Size(39, 39));}if (startOrEnd === 2) {endIcon = new BMap.Icon('../../../../../assets/font/track_car.png',new BMap.Size(39, 39));}this.endMarker = new BMap.Marker(this.endPoint, {icon: endIcon });// 路书this.map.setViewport(this.lushuPointArr, {enableAnimation: true,margins: [0, 0, 0, 800]});this.map.addOverlay(this.endMarker);this.lushuTrack = new BMapLib.LuShu(this.map, this.lushuPointArr, {// defaultContent: '你倒是跑啊',autoView: true,icon: new BMap.Icon('../../../../../assets/font/track_car.png',new BMap.Size(39, 39)),speed: this.lushuSpeed,enableRotation: true, // marker旋转landmarkPois: [] // 必须有 不然会报length错误});this.lushuTrackLine = new BMap.Polyline(this.lushuPointArr, {strokeColor: '#0047c0',strokeWeight: this.lushuThickness,strokeOpacity: 1,});this.map.addOverlay(this.lushuTrackLine);// this.lushuTrack.showInfoWindow();}
1、增加两个点point,增加两个marker图标
2、调整视野setViewport
setViewport(view: Array | Viewport, viewportOptions: ViewportOptions)
viewportOptions:可选参数 这里偏移800时因为我要让其在右侧中心展示
{
enableAnimation是否启动动画,默认true
margins:调整视野预留边距 [0,0,0,800]
zoomFactor: 地图级别偏移量
delay:改变视野的延迟时间
}
3、通过Polyline增加线 传入数组和对应线的设置
strokeWeight 调节轨迹粗细
4、增加路书
BMapLib.LuShu(map, path, opts) 本地图,划线数组,可选项
opts:{
landmarkPois:覆盖物移动过程中展示的特殊点,我在使用过程中将其去掉了,报了一个数组length的错误
icon:图标
speed:移动速度,用来切换速度
defaultContent:覆盖物弹窗内容
autoView:是否在移动过程中调整视野 默认false 最好设置为true
enableRotation:默认false,最好为true,开启图标随路线移动旋转
}
轨迹的播放暂停
lushu.start(); 开始运动
lushu.pause(); 暂停运动
lushu.stop(); 结束运动,
回到起点、终点
重新初始化轨迹,并将小车图标添加到起点/终点
速度调节、轨迹粗细调节
通过控制lushu的speed
划线Polyline的strokeWeight来控制