百度地图开发探索 轨迹（路书） 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来控制