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

原创

已于 2023-09-27 14:39:06 修改 · 584 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #arcgis

于 2023-08-24 16:44:50 首次发布

文章详细描述了如何使用JavaScript在地图上实现车辆的移动、路径绘制、角度计算以及点位图层的加载，包括车辆的起点、终点控制和动态路径跟踪功能。

数据准备

// 全局变量
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