feat:useTaskWayline使用方式调整

shuishen

2025-04-19 4bd6f36030948afc34e031fc9f4b8f8cc3dde6f9

feat:useTaskWayline使用方式调整

 src/components/CurrentTaskDetails/RealTimeMap.vue

@@ -6,9 +6,9 @@
import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme'
import { Cartesian3, Terrain, Viewer } from 'cesium'
import { addBlueFilter } from '@/utils/cesium/common'
import CreateFrustum from '@/utils/cesium/frustum/CreateFrustum'
import aircraftGltf from '@/assets/gltf/aircraft.gltf'
import { useTaskWayline } from '@/hooks/useTaskWayline/useTaskWayline'

const { init: initTaskWayline } = useTaskWayline()

const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
    url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
@@ -55,60 +55,9 @@
    taskDetailsViewer?.value.camera.setView({
        destination: Cartesian3.fromDegrees(115.763819, 28.787374, 5000),
    })

    initTaskWayline(taskDetailsViewer.value, deviceOsdInfo, taskDetails)
}

let viewInfoFrustum
// 设置视椎
const setCreateFrustum = () => {
    const host = deviceOsdInfo.value?.data?.host
    if (!host) return
    viewInfoFrustum?.clear()
    if ([14, 0].includes(host.mode_code)) return
    const attitude_head = 180 + host.attitude_head
    const gimbal_pitch = 90 - Number(host?.payloads[0]?.gimbal_pitch) || 0
    viewInfoFrustum = new CreateFrustum(taskDetailsViewer?.value, {
        position: {
            longitude: host.longitude,
            latitude: host.latitude,
            altitude: host.height,
        },
        width: 30,
        height: 30,
        fov: 20.0,
        near: 3.0,
        far: 250.0,
        roll: gimbal_pitch,
        pitch: 0,
        heading: attitude_head,
    })
}

function setAircraftGltf() {
    const host = deviceOsdInfo.value?.data?.host
    const aircraftEntity = taskDetailsViewer.value.entities.getById('aircraftGltf')
    const position = Cesium.Cartesian3.fromDegrees(host.longitude, host.latitude, host.height)
    if (aircraftEntity) {
        aircraftEntity.position = new Cesium.ConstantPositionProperty(position)
        return
    }
    taskDetailsViewer.value.entities.add({
        id: 'aircraftGltf',
        position,
        model: {
            uri: aircraftGltf, // 或 .glb
            scale: 1.0, // 缩放比例
            minimumPixelSize: 64, // 最小像素尺寸（保证模型远处可见）
            maximumScale: 128, // 最大缩放（可选）
        },
    })
}

watch(deviceOsdInfo, () => {
    setCreateFrustum()
    setAircraftGltf()
})

useTaskWayline(taskDetailsViewer, taskDetails)

const removeMap = () => {
    taskDetailsViewer?.value.entities.removeAll()

 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 17:47:46
 * @LastEditTime: 2025-04-19 19:00:36
 * @FilePath: \command-center-dashboard\src\hooks\useTaskWayline\useTaskWayline.js
 * @Description: 
 * 
@@ -18,9 +18,12 @@

import * as Cesium from 'cesium'
import { Cartesian3 } from 'cesium'
import aircraftGltf from '@/assets/gltf/aircraft.gltf'
import CreateFrustum from '@/utils/cesium/frustum/CreateFrustum'

export function useTaskWayline (viewer, taskDetails) {
  const newViewer = isRef(viewer) ? viewer : ref(viewer)
export function useTaskWayline () {
  let viewer = null
  let deviceOsdInfo = null

  // 解析kmz文件
  const parsingFiles = async url => {
@@ -30,7 +33,7 @@
    const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
    if (!waylinesXMLObj.Placemark.length) return
    const allPoint = waylinesXMLObj.Placemark.map(item => item.Point.coordinates.split(','))
    flyVisual(allPoint, newViewer.value)
    flyVisual(allPoint, viewer)
    drawWayline(waylinesXMLObj)
  }

@@ -43,7 +46,7 @@
    removeEntitys()

    // 起点
    newViewer.value.entities.add({
    viewer.entities.add({
      id: 'drone-job-wayline-start',
      position: positions[0],
      billboard: {
@@ -54,7 +57,7 @@
    })

    // 终点
    newViewer.value.entities.add({
    viewer.entities.add({
      id: 'drone-job-wayline-end',
      position: positions[positions.length - 1],
      billboard: {
@@ -66,7 +69,7 @@
    })

    // 路径线
    newViewer.value.entities.add({
    viewer.entities.add({
      id: 'drone-job-wayline-polyline',
      polyline: {
        width: 4,
@@ -82,34 +85,134 @@
    })
  }

  watch(
    [
      () => taskDetails.value?.way_lines?.length,
      () => newViewer.value
    ],
    (
      [wayLinesLength, curViewer],
    ) => {
      if (wayLinesLength && wayLinesLength > 0 && curViewer) {
        parsingFiles(taskDetails.value.way_lines[0].url)
      }
    },
    { immediate: true }
  )

  const removeEntitys = () => {
    const entitiesIDs = newViewer.value?.entities.values.map(i => i.id)

    Array.isArray(entitiesIDs) && entitiesIDs.forEach(item => {
      item.includes('drone-job-wayline-') && newViewer.value?.entities.removeById(item)

  let viewInfoFrustum
  // 设置视椎
  const setCreateFrustum = (host) => {
    if (!host) return
    viewInfoFrustum?.clear()

    const attitude_head = 180 + host?.attitude_head
    const gimbal_pitch = 90 - Number(host?.payloads[0]?.gimbal_pitch) || 0

    viewInfoFrustum = new CreateFrustum(viewer, {
      position: {
        longitude: host?.longitude,
        latitude: host?.latitude,
        altitude: host?.height,
      },
      width: 30,
      height: 30,
      fov: 20.0,
      near: 3.0,
      far: 250.0,
      roll: gimbal_pitch,
      pitch: 0,
      heading: attitude_head,
    })
  }

  function setAircraftGltf () {
    const host = deviceOsdInfo.value?.data?.host

    console.log(host, 1111111111)

    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)
      return
    }

    let entity = viewer?.entities.add({
      id: 'aircraftGltf',
      position,
      label: {},
      model: {
        uri: aircraftGltf, // 或 .glb
        scale: 1.0, // 缩放比例
        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,
    })
  }

  const mapEntityRemove = () => {
    viewInfoFrustum?.clear()

    viewer?.entities.removeById('aircraftGltf')
  }

  const removeEntitys = () => {
    const entitiesIDs = viewer?.entities.values.map(i => i.id)

    Array.isArray(entitiesIDs) && entitiesIDs.forEach(item => {
      item.includes('drone-job-wayline-') && viewer?.entities.removeById(item)
    })
  }

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

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

    watch(taskDetails,
      () => {
        if (taskDetails.value?.way_lines?.length) {
          parsingFiles(taskDetails.value.way_lines[0].url)
        }
      },
      { immediate: true }
    )

    watch(deviceOsdInfo, () => {
      const host = deviceOsdInfo.value?.data?.host

      if (!host) return

      if ([14, 0].includes(host?.mode_code)) {
        mapEntityRemove()
        return
      }

      setCreateFrustum(host)
      setAircraftGltf()
    }
    )
  }

  onBeforeUnmount(() => {
    mapEntityRemove()
    removeEntitys()
  })

  return {
    removeEntitys
    init,
    removeEntitys,
    mapEntityRemove,
  }
}

 src/views/SignMachineNest/MachineRight/InspectionRaskList.vue

@@ -78,7 +78,6 @@
import { useStore } from 'vuex'
import { useTaskWayline } from '@/hooks/useTaskWayline/useTaskWayline'
import { useTaskDetails } from '@/hooks/useTaskDetails/useTaskDetails'
import { useTaskViewInfo } from '@/hooks/useTaskViewInfo/useTaskViewInfo'
import { useDroneWS } from '@/hooks/useDroneWS'
let viewer = null

@@ -211,6 +210,14 @@
    }
}

watch([() => tabIndex.value, () => tableList.value], async ([newTabIndex, newTableList]) => {
    if (newTabIndex == 1 && newTableList.length > 0) {
        await getTaskDetails(newTableList[0].wayline_job_info_id)
    }
})

const { init: initTaskWayline, removeEntitys } = useTaskWayline()

onMounted(async () => {
    viewer = window.$viewer

@@ -338,17 +345,9 @@
    //         job_id: '7aa5222c-2f8b-401e-b6ba-d6a550398829',
    //     },
    // ]

    initTaskWayline(viewer, wsInfo, taskDetails)
})

watch([() => tabIndex.value, () => tableList.value], async ([newTabIndex, newTableList]) => {
    if (newTabIndex == 1 && newTableList.length > 0) {
        await getTaskDetails(newTableList[0].wayline_job_info_id)
    }
})

const { removeEntitys } = useTaskWayline(viewer || window.$viewer, taskDetails)

useTaskViewInfo(viewer || window.$viewer, wsInfo, removeEntitys)
</script>

<style lang="scss" scoped>