14.gis车辆轨迹回放之arcgis js api

数据准备

// 全局变量
let paths = [] as any
let image = ''
let startNum = 0
let endNum = 1
let moving = null as any
let layerline: GraphicsLayer
let layerp : GraphicsLayer
let moveCarGra = new Graphic({}) as Graphic
let angleSet = 0

操作

调用下列方法完成车辆移动、方向变化等

// 车辆开始
const start = () => {
  layerp.graphics.removeAll()
  move(0, 1)
}
// 车辆暂停
const stopMove = () => {
  clearInterval(moving)
}
// 车辆继续
const goOn = () => {
  if (moving !== undefined) {
    clearInterval(moving) // 清除移动
  }

  move(startNum, endNum)
}
// 车辆返回
const back = () => {
  if (moving != null) {
    clearInterval(moving) // 清除移动
  }
  layerp.graphics.removeAll()
  loadclMap(paths, image, angleSet)
   mapview.goTo(paths[0]);

}

初始化

loadMapLineAndPoints创建轨迹图层，再使用start启动

const initJccData=()=>{
   layerline = BaseLayerUtils.creatGraphicLayer('lineid') as GraphicsLayer
   layerp = BaseLayerUtils.creatGraphicLayer('clpointid') as GraphicsLayer
  
}



// 计算图片角度
const calcAngle = (x1: number, y1: number, x2: number, y2: number) => {
  const tan = (Math.atan(Math.abs((y2 - y1) / (x2 - x1))) * 180) / Math.PI + 90
  if (x2 > x1 && y2 > y1) {
    return -tan + 180
  } else if (x2 > x1 && y2 < y1) {
    return tan
  } else if (x2 < x1 && y2 > y1) {
    return tan - 180
  } else if (y2 === y1 && x2 > x1) {
    return 90
  } else if (y2 === y1 && x2 < x1) {
    return -90
  } else if (y2 > y1 && x2 === x1) {
    return 0
  } else if (y2 < y1 && x2 === x1) {
    return 180
  } else {
    return -tan
  }
}

// 加载路线及点位图层信息cpaths：线路坐标串 points：点位信息
const loadMapLineAndPoints = (cpaths: Array<Array<Array<number>>>, points: any[]) => {
  cpaths.forEach((itm: any[], index) => {
    let pGraphic = null
    let line=new Polyline({ paths: [itm], spatialReference: { wkid: 4326 } });
    let length= geometryEngine.geodesicLength(line, 'kilometers') as any
   localStorage.setItem('length2',Number(length).toFixed(3))
    pGraphic = new Graphic({
      geometry: line,
      symbol: {
        type: 'simple-line',
        color: [226, 119, 40],
        width: 4
      } as any,
      attributes: {
        task: points[index][points[index].length - 1].TASK,
        startTime: points[index][0].TIME,
        endTime: points[index][points[index].length - 1].TIME
      }
    })
    layerline.add(pGraphic)
  })

  mapview.map.add(layerline)
  let ind = 0
  const pGraphics: any = []
  points.forEach((itms: any[], index) => {
    ind = index
    itms.forEach((itm: any, index2) => {
      itm.pm10f = 'PM₁₀:'
      itm.pm25f = 'PM₂.₅:'
      if (index2 !== 0 && index2 !== points[ind].length - 1) {
        const customTimestr = itm.TIME.replaceAll('-', '/')
        const customTimeprestr = points[ind][index2 - 1].TIME.replaceAll('-', '/')
        const customTime = new Date(Date.parse(customTimestr)) as any
        const customTimepre = new Date(Date.parse(customTimeprestr)) as any
        if ((customTime - customTimepre) as any > 3600000) {
          itm.pointType = 4// 停止点
        }
      }
      const gpoint = new Graphic({
        geometry: new Point({
          x: itm.LNG,
          y: itm.LAT
        }),
        attributes: itm

      }) as Graphic
      pGraphics.push(gpoint)
    })
  })
  const pFlayer = new FeatureLayer({
    id: 'qcpointid',
    source: pGraphics,
    outFields: ['*'],
    fields: [{ name: 'id', alias: 'id', type: 'oid' },
    { name: 'pointType', alias: 'pointType', type: 'integer' }
    
    ],
    renderer: {
      type: 'unique-value',
      field: 'pointType',
      uniqueValueInfos: [{ value: 1, symbol: MapSym.setSymbol(require('@/assets/tuli/jcc1.png')) },
      { value: 2, symbol: MapSym.setSymbol(require('@/assets/tuli/jcc2.png')) },
      { value: 3, symbol: MapSym.setSymbol(require('@/assets/tuli/jcc3.png')) }, { value: 4, symbol: MapSym.setSymbol(require('@/assets/tuli/jcc4.png')) }]

    } as any

  })
  mapview.map.add(pFlayer)

}
// 初始化车辆相关图层
// cpaths:坐标串 cimage:车辆图标
const loadclMap = (cpaths: Array<Array<Array<number>>>, cimage: string, angle: number) => {
  const view = mapview
  paths = cpaths
  image = cimage
  angleSet = angle
  if (paths && paths[0].length > 0 && cimage) {
    moveCarGra = new Graphic({
      geometry: new Point({
        x: paths[0][0][0],
        y: paths[0][0][1]
      }),
      symbol: MapSym.setSymbolAndAngle(image, calcAngle(paths[0][0][0], paths[0][0][1], paths[0][1][0], paths[0][1][1]) + angleSet) as any
    }) as Graphic
    layerp.graphics.add(moveCarGra)
    mapview.map.add(layerp)
    start()
  }
}
// 车辆开始移动
const move = (start: number, end: number) => {
  const x1 = paths[0][start][0]
  const y1 = paths[0][start][1]
  const x2 = paths[0][end][0]
  const y2 = paths[0][end][1]
  const v = 0.0002
  if (Math.abs(x2 - x1) <= v && Math.abs(y2 - y1) <= v) {
    clearInterval(moving)
    if (end + 1 < paths[0].length) {
      layerp.graphics.removeAll()
      const point = moveCarGra as Graphic
        ; (point.geometry as Point).x = paths[0][start + 1][0]
        ; (point.geometry as Point).y = paths[0][start + 1][1]
      layerp.graphics.add(point)
      move(start + 1, end + 1)
    }

    return
  }
  const angle = calcAngle(x1, y1, x2, y2)
  // 斜率
  const p = (y2 - y1) / (x2 - x1)

  moving = setInterval(() => {
    startNum = start
    endNum = end
    layerp.graphics.removeAll()
    // 分别计算 x,y轴的方向和速度
    if (Math.abs(p) === Number.POSITIVE_INFINITY) {
      // 垂直的时候斜率无穷大
      const point = moveCarGra.geometry as Point
      if (y2 > y1) {
        point.y += v
      } else {
        point.y -= v
      }

      // 创建行驶车辆
      moveCarGra = new Graphic({
        geometry: new Point({
          x: point.x,
          y: point.y
        }),
        symbol: MapSym.setSymbolAndAngle(image, angle) as any
      }) as Graphic
      layerp.graphics.add(moveCarGra)
    } else {
      const point = moveCarGra.geometry as Point
      if (x2 < x1) {
        point.x -= (1 / Math.sqrt(1 + p * p)) * v
        point.y -= (p / Math.sqrt(1 + p * p)) * v
      } else {
        point.x += (1 / Math.sqrt(1 + p * p)) * v
        point.y += (p / Math.sqrt(1 + p * p)) * v
      }
      // 创建行驶车辆
      moveCarGra = new Graphic({
        geometry: new Point({
          x: point.x,
          y: point.y
        }),
        symbol: MapSym.setSymbolAndAngle(image, angle) as any
      }) as Graphic
      layerp.graphics.add(moveCarGra)
    }
    const point = moveCarGra.geometry as Point
    if (Math.abs(point.x - x2) <= 1.5 * v && Math.abs(point.y - y2) <= 1.5 * v) {
      clearInterval(moving)
      startNum = start++
      endNum = end++
      const point = moveCarGra as Graphic
        ; (point.geometry as Point).x = paths[0][startNum + 1][0]
        ; (point.geometry as Point).y = paths[0][startNum + 1][1]
      layerp.graphics.add(point)
      if (end < paths[0].length) {
        move(start, end)
      }
    }
  }, 1000)
}

结果展示