百度地图开发探索 轨迹(路书) typescript angular
上图为先:轨迹的组成:起点、终点、一条线、线上的小车主要功能:添加轨迹、小车在轨迹上跑动、小车回到起点、小车回到重点、小车速度调节、轨迹的粗细调节实现方式:路书还有一种是在轨迹线不断的对小车进行添加和删除操作,感觉会更灵活,因为可以时刻记录你想要的数据,但是路书是封装好的方式,我也没有研究很全面添加轨迹// 画轨迹drawTrack(trackArr: Array<any>, star
上图为先:
轨迹的组成:
起点、终点、一条线、线上的小车
主要功能:
添加轨迹、小车在轨迹上跑动/暂停、小车回到起点/终点、小车速度调节、轨迹的粗细调节
实现方式:路书
还有一种是在轨迹线不断的对小车进行添加和删除操作,感觉会更灵活,因为可以时刻记录你想要的数据,但是路书是封装好的方式,我也没有研究很全面
添加轨迹
// 画轨迹
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来控制
更多推荐
所有评论(0)