JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（下）

        上篇文章提到了车辆的轨迹回放主要有两个方案：一种是通过标记点moveAlong()的方法，另一种是PathSimplifier是一个轨迹展示组件；上篇使用了标记点的方法，这篇就来使用PathSimplifier 的轨迹展示的方法，同样的效果图：

        在使用轨迹的巡航的时候要注意引入AMapUI的组件，具体引入方法可以参考官方例子：路径轨迹 

  function initLine() {
  //首先需要得到一串线路的定位点的数组，如： lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];

   //其次如果需要在车辆移动时展示信息框中每个点的信息，那就需要有个信息框的数据信息：如gpsLocus = [{gdLongitude:116.478935,gdLatitude:39.997761,code:'0',time:'2021-07-28 14:12'},{gdLongitude:116.478939,gdLatitude:39.997825,code:'1',time:'2021-07-28 14:13'}]等等，我就不一一写出来了，总之线路点的经纬度要与信息框的经纬度一一对应才行 

     // 1、清空之前数据
       if (navg) {
         navg.destroy()

        if (.carWindow) {
          carWindow.close()
        }

      }
      // 3、创建信息框
      carWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(6, -25),
        content: '',
      })
  
      //使用轨迹的组件
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], (PathSimplifier, $) => {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！')
          return
        }
        // 如果已存在巡航轨迹，则删除
        if (window.pathSimplifierIns && pathSimplifierIns) {
          //通过该方法清空上次传入的轨迹
          pathSimplifierIns.setData([])
        }
    
        //创建一个巡航轨迹路线
       pathSimplifierIns = new PathSimplifier({
          zIndex: 100,//地图层级，如果设置过高，可能会影响地图上其他覆盖物，所以需要注意
          map: map, //所属的地图实例
          //巡航路线轨迹列表
          getPath: (pathData, pathIndex) => {
            return pathData.path
          },
          //hover每一个轨迹点，展示内容
          getHoverTitle: (pathData, pathIndex, pointIndex) => {
             if (pointIndex >= 0) {
                 return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length
             }
             return pathData.name + '，点数量' + pathData.path.length
          },
          //自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档

          //绘制路线节点
          renderOptions: {
           
          },
        })
        window.pathSimplifierIns = pathSimplifierIns
        //设置数据
       pathSimplifierIns.setData([{
          name: '路线0',
          path: lineArr ,
        }])

        //对第一条线路（即索引 0）创建一个巡航器
        navg =pathSimplifierIns.createPathNavigator(0, {
          loop: false, //循环播放
          speed: 1000,//巡航速度，单位千米/小时
          pathNavigatorStyle: {
            width: 48,//图中小车宽度
            height: 24,//图中小车高度
            initRotateDegree: -90,//初始旋转角度，默认0
            autoRotate: true,
            content: PathSimplifier.Render.Canvas.getImageContent('https://webapi.amap.com/images/car.png'),//图片的引入路径是打包后的路径,也就是index.html的图片引入路径
            strokeStyle: null,
            fillStyle: null,
            //经过路径的样式
            pathLinePassedStyle: {
              lineWidth: 8,
              strokeStyle: '#AF5',
              dirArrowStyle: {
                stepSpace: 15,
                strokeStyle: 'white',
              },

            },
          },
        })

        //调用播放的方法
        startTrack()

        //对车辆移动进行监听，控制信息框的展示
        navg.on('move', (data, position) => {
          isCursorAtPathEnd = false
          const idx = position.dataItem.pointIndex //走到了第几个点
          // 打开信息窗体
          const content = [
            '<div style="padding: 5px;">',
            '<div>设备号: ' + gpsLocus[idx].code + '</div>',
            '<div>定位时间：' + gpsLocus[idx].time + '</div>',
            '</div>',
          ]
         carWindow.setContent(content.join(''))
         carWindow.open(map, lineArr[idx])

          // 如果到头了，回到初始状态
          if (navg.isCursorAtPathEnd()) {
            //  轨迹回放停止，要改变播放按钮状态
          
          }
        })
      })
}


    // 开始播放
  function  startTrack () {
      navg.start()
    }
    // 继续轨迹播放
   function  resumeTrack () {
      //继续动画
       navg.resume()
    }
    // 暂定轨迹播放
    function pauseTrack () {
      navg.pause()
    }
    // 停止播放
    function stopTrack () {
     navg.stop()

    }

这里如果想要对车辆移动进行速度改变就使用：navg.setSpeed(speed)，将想要的速度传入即可。