1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 百度地图开发探索 轨迹(路书) typescript angular

百度地图开发探索 轨迹(路书) typescript angular

时间:2024-03-07 02:41:47

相关推荐

百度地图开发探索  轨迹(路书)  typescript angular

上图为先:

轨迹的组成:

起点、终点、一条线、线上的小车

主要功能:

添加轨迹、小车在轨迹上跑动/暂停、小车回到起点/终点、小车速度调节、轨迹的粗细调节

实现方式:路书

还有一种是在轨迹线不断的对小车进行添加和删除操作,感觉会更灵活,因为可以时刻记录你想要的数据,但是路书是封装好的方式,我也没有研究很全面

添加轨迹

// 画轨迹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来控制

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。