feat:当前无人机距离机场水平距离等信息显示

shuishen

2025-04-20 5c8271a1677dcb3dea15c0638cf3d90b85465cca

feat:当前无人机距离机场水平距离等信息显示

 src/hooks/useTaskWayline/useTaskWayline.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2025-04-19 14:24:34
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-04-19 19:00:36
 * @LastEditTime: 2025-04-20 17:18:22
 * @FilePath: \command-center-dashboard\src\hooks\useTaskWayline\useTaskWayline.js
 * @Description:
 *
@@ -21,11 +21,25 @@
import aircraftGltf from '@/assets/gltf/aircraft.gltf'
import CreateFrustum from '@/utils/cesium/frustum/CreateFrustum'

let EBizCode = {
  FlightTaskProgress: 'flighttask_progress'
}

export function useTaskWayline () {
  let viewer = null
  let deviceOsdInfo = null
  let flighttaskProgressInfo = null

  // watch
  let taskWatch = null
  let flighttaskWatch = null
  let deviceWatch = null

  // 航线位置
  let currentWaylinePostions = []
  // 当前航点 下标
  let currentWaypointIndex = null
  let droneSpeedArr = []

  // 解析kmz文件
  const parsingFiles = async url => {
@@ -40,7 +54,7 @@
  }

  const drawWayline = lineObj => {
    const positions = lineObj.Placemark.map(item => {
    currentWaylinePostions = lineObj.Placemark.map(item => {
      const [lon, lat] = item.Point.coordinates.split(',')
      return Cartesian3.fromDegrees(Number(lon), Number(lat))
    })
@@ -50,7 +64,7 @@
    // 起点
    viewer.entities.add({
      id: 'drone-job-wayline-start',
      position: positions[0],
      position: currentWaylinePostions[0],
      billboard: {
        image: new Cesium.ConstantProperty(rwqfdImg),
        width: 70,
@@ -61,7 +75,7 @@
    // 终点
    viewer.entities.add({
      id: 'drone-job-wayline-end',
      position: positions[positions.length - 1],
      position: currentWaylinePostions[currentWaylinePostions.length - 1],
      billboard: {
        image: new Cesium.ConstantProperty(endPointImg),
        width: 30,
@@ -75,7 +89,7 @@
      id: 'drone-job-wayline-polyline',
      polyline: {
        width: 4,
        positions: positions,
        positions: currentWaylinePostions,
        material: new ImageTrailMaterial({
          color: { alpha: 1, blue: 1, green: 1, red: 1 },
          speed: 20,
@@ -121,12 +135,91 @@

    const aircraftEntity = viewer?.entities.getById('aircraftGltf')
    const position = Cesium.Cartesian3.fromDegrees(host?.longitude, host?.latitude, host?.height)

    if (aircraftEntity) {
      aircraftEntity.position = new Cesium.ConstantPositionProperty(position)

      const homeDistance = Math.floor(host?.home_distance) || 0

      // 距离下一个航点
      const nextPoint = currentWaylinePostions[currentWaypointIndex]

      if (!nextPoint) {
        aircraftEntity.label = {}
        return
      }

      const devicePosition = Cesium.Cartesian3.fromDegrees(
        Number(host.longitude),
        Number(host.latitude),
        0,
      )

      // 距离下个点位的距离
      let distance = Cesium.Cartesian3.distance(
        devicePosition,
        nextPoint,
      )

      // 本次航线平面里程
      let totalDistance = 0
      currentWaylinePostions.map((cartesian3, index) => {
        // 两点之间的距离
        let deviceCurPosition = null
        if (index === 0) {
          deviceCurPosition = devicePosition
        } else {
          deviceCurPosition = currentWaylinePostions[index - 1]
        }

        let distance = Cesium.Cartesian3.distance(
          deviceCurPosition,
          cartesian3,
        )
        totalDistance += distance
        return Math.round(distance)
      })

      // 速度
      let horizontalSpeed = host.horizontal_speed || 0
      if (
        !droneSpeedArr.includes(horizontalSpeed) &&
        horizontalSpeed > 1
      ) {
        droneSpeedArr.push(horizontalSpeed)
      }
      if (horizontalSpeed < 5) {
        horizontalSpeed = 10
      }

      // 预计到达下一个航点时间
      let arrivalTime = distance / horizontalSpeed
      if (arrivalTime === Infinity || isNaN(arrivalTime)) {
        arrivalTime = 0
      }
      if (arrivalTime > 60) {
        const minute = Math.floor(arrivalTime / 60)
        const second = Math.round(arrivalTime % 60)
        arrivalTime = `${minute}m${second}s`
      } else {
        arrivalTime = Math.round(arrivalTime) + 's'
      }

      aircraftEntity.label = new Cesium.LabelGraphics({
        text: `距离机场水平距离:${homeDistance}m\n距离下一个航点:${Math.round(distance)}m\n预计到达下一航点时间:${arrivalTime}\n本次航线平面里程:${Math.round(totalDistance)}m`,
        font: '13px monospace',
        showBackground: true,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        pixelOffset: new Cesium.Cartesian2(0, -40),
        show: true,
      })

      return
    }

    let entity = viewer?.entities.add({
    viewer?.entities.add({
      id: 'aircraftGltf',
      position,
      label: {},
@@ -136,27 +229,6 @@
        minimumPixelSize: 64, // 最小像素尺寸（保证模型远处可见）
        maximumScale: 128, // 最大缩放（可选）
      },
    })

    const homeDistance = Math.floor(host?.home_distance) || 0
    const distance = 1
    const arrivalTime = 1
    const totalDistance = 1
    const usedTime = 1

    entity.label = new Cesium.LabelGraphics({
      text: `距离机场水平距离:${homeDistance}m\n距离下一个航点:${Math.round(
        distance,
      )}m\n预计到达下一航点时间:${arrivalTime}\n本次飞行时间:${usedTime}\n本次航线平面里程:${Math.round(
        totalDistance,
      )}m`,
      font: '13px monospace',
      showBackground: true,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
      pixelOffset: new Cesium.Cartesian2(0, -40),
      show: true,
    })
  }

@@ -174,13 +246,20 @@
    })
  }

  const removeWatchs = () => {
    taskWatch?.()
    flighttaskWatch?.()
    deviceWatch?.()
  }

  const init = (v, wsInfo, taskDetails) => {
    console.log(v, wsInfo, taskDetails)

    viewer = v
    deviceOsdInfo = computed(() => wsInfo.value?.device_osd)
    flighttaskProgressInfo = computed(() => wsInfo.value?.flighttask_progress)

    taskWatch?.()
    removeWatchs()

    taskWatch = watch(taskDetails,
      () => {
@@ -191,7 +270,11 @@
      { immediate: true }
    )

    deviceWatch?.()
    flighttaskWatch = watch(flighttaskProgressInfo, async () => {
      const output = flighttaskProgressInfo.value?.data?.output

      currentWaypointIndex = output.ext['current_waypoint_index']
    })

    deviceWatch = watch(deviceOsdInfo, () => {
      const host = deviceOsdInfo.value?.data?.host
@@ -213,8 +296,7 @@
    mapEntityRemove()
    removeEntitys()

    taskWatch?.()
    deviceWatch?.()
    removeWatchs()
  })

  return {