chenyao
2025-03-03 149215ce4c7ff87541b5c4a79edfa4b0571b350c
优化部分代码逻辑
3 files modified
127 ■■■■ changed files
src/main.ts 4 ●●●● patch | view | raw | blame | history
src/views/DronePilotDetails.vue 27 ●●●●● patch | view | raw | blame | history
src/views/hooks/droneFly.ts 96 ●●●●● patch | view | raw | blame | history
src/main.ts
@@ -16,9 +16,9 @@
const app = createInstance(App) // 引入css
app.use(ElementPlus);
app.use(Vant);
app.use(store, storeKey)
app.use(router)
app.use(ElementPlus);
app.use(Vant);
app.mount('#app')
src/views/DronePilotDetails.vue
@@ -45,16 +45,10 @@
import { EDeviceTypeName, EHmsLevel } from '@/types/enums'
import { getRoot } from '../../root'
import { getWaylineFile, getLiveVideoUrl } from '@/api/manage'
import { CURRENT_CONFIG as config } from '@/api/http/config'
// import videojs from 'video.js'
// import 'video.js/dist/video-js.css';
import { getLnglatDist, cartesian3Convert, getLnglatAltitude, createCircleBillboard } from '@/utils/cesium/mapUtil'
import { CURRENT_CONFIG as config } from '@/api/http/config';
import { getLnglatDist, cartesian3Convert, getLnglatAltitude, createCircleBillboard } from '@/utils/cesium/mapUtil';
import cesiumOperation from '@/utils/cesium-tsa.js';
const { _init, viewerDestory } = cesiumOperation();
import * as Cesium from 'cesium';
// import { cesiumOperation } from '@/hooks/use-cesium-tsa'
// const { _init } = cesiumOperation();
import { useMyStore } from '@/store'
import comPass from './components/comPass.vue'
import ptzControl from './components/ptzControl.vue'
@@ -63,12 +57,10 @@
import { getWebsocketUrl } from '@/websocket/util/config'
import { EBizCode, ELocalStorageKey, ERouterName } from '@/types'
import VConsole from 'vconsole';
import { any } from 'video.js/dist/types/utils/events';
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js'
import { initPointWayLine } from './hooks/initPointWayline'
import { initPlanarWayline } from './hooks/initPlanarWayline'
import { droneFly } from './hooks/droneFly'
import flvjs from 'flv.js';
const { pointWayline } = initPointWayLine()
const { planarWayline } = initPlanarWayline()
const { initDock, getPhoneLocation, clickPhoneLocation } = droneFly()
@@ -154,11 +146,6 @@
const drawCanvasWidth = ref<Number>(0)
const drawCanvasHeight = ref<Number>(0)
// 鹰眼视频
// const timer = null;
// 大屏幕视频
// const timerBig = null;
const videoPlayerBig = ref<any>(null); // 视频播放器实例
let webrtcPlayerBig = null
@@ -177,11 +164,6 @@
let workspaceId = ref<String>(sbInfo.workspaceId)
localStorage.setItem('bs_workspace_id', workspaceId.value)
// store.commit('SET_SELECTED_WORKSPACE_ID', workspaceId.value);
// 自身定位
let me_latitude = 0;
let me_longitude = 0;
// RTCWEB 加载视频
const playBig = () => {
@@ -302,11 +284,6 @@
    case EBizCode.DeviceOsd: { // 无人机的
      store.commit('SET_DEVICE_INFO', payload.data)
      store.commit('SET_WS_MESSAGE', payload)
      // console.log('对对对', payload.data.host.mode_code)
      // droneInfo.value = payload.data.host
      // if (!payload.data.host || payload.data.host.mode_code == 14) {
      //   videoUrl.value = ''
      // }
      getviewDrone(payload)
      break
    }
src/views/hooks/droneFly.ts
@@ -45,8 +45,7 @@
  let measure_target_altitude = 0;
  async function initDock(data:any, sn:any, dockSn:any, workspaceId:any, ssLinePath:any, viewDroneInfo:any) {
    // console.log('globalCesium查看是', globalCesium)
  async function initDock(data:any, sn:String, dockSn:String, workspaceId:String, ssLinePath:String, viewDroneInfo:any) {
    // 获取workspaceId
    wId = workspaceId
    // 给无人机参数赋值
@@ -211,21 +210,23 @@
    measure_target_latitude = payloads.measure_target_latitude;
    measure_target_altitude = payloads.measure_target_altitude;
    // if (laserEntity && laserEntity != null) {
    //   laserEntity.position = new globalCesium.CallbackProperty(function () {
    //     return position
    //   }, false)
    //   // laserEntity.orientation = new globalCesium.CallbackProperty(function () {
    //   //   return orientation
    //   // }, false)
    if (laserEntity && laserEntity != null) {
      laserEntity.position = new globalCesium.CallbackProperty(function () {
        return position
      }, false)
  
    //   laserEntity.show = true
    //   window.cesiumViewer.scene.requestRender()
    // } else {
      laserEntity.show = true
      window.cesiumViewer.scene.requestRender()
    } else {
      removeById('laser_coordinate')
      laserEntity = window.cesiumViewer.entities.add({
        position: globalCesium.Cartesian3.fromDegrees(payloads.measure_target_longitude, payloads.measure_target_latitude, payloads.measure_target_altitude),
        position: new globalCesium.CallbackProperty(() => {
          return globalCesium.Cartesian3.fromDegrees(
            payloads.measure_target_longitude,
            payloads.measure_target_latitude,
            payloads.measure_target_altitude
          )
        }, false),
        id: 'laser_coordinate',
        billboard: {
          image: imgLaser,
@@ -235,7 +236,7 @@
          outlineWidth: 0,
        }
      })
    // }
    }
    // 增加激光扫射信息
    laserEntity.label = new globalCesium.LabelGraphics({
      text: `H:${Math.ceil(payloads.measure_target_altitude)}m-L:${Math.round(Math.ceil(payloads.measure_target_distance),)}m`,
@@ -252,17 +253,38 @@
    console.log('起点',startPosition)
    console.log('终点',position)
    if (startPosition && position) {
      removeById('route_two_line')
      if (twoLineEntity && twoLineEntity != null) {
        // 如果线实体已存在,只更新位置
        twoLineEntity.polyline.positions = new globalCesium.CallbackProperty(() => {
          return [
            globalCesium.Cartesian3.fromDegrees(me_longitude, me_latitude, 0),
            globalCesium.Cartesian3.fromDegrees(
              payloads.measure_target_longitude,
              payloads.measure_target_latitude,
              payloads.measure_target_altitude
            )
          ]
        }, false)
      } else {
        // 如果线实体不存在,创建新的线实体
      twoLineEntity = window.cesiumViewer.entities.add({
        id: 'route_two_line',
        polyline: {
          positions: new globalCesium.CallbackProperty(() => [startPosition, position], false),
          width: 3,
          material: globalCesium.Color.RED,
          zIndex: -1,
            positions: new globalCesium.CallbackProperty(() => {
              return [
                globalCesium.Cartesian3.fromDegrees(me_longitude, me_latitude, 0),
                globalCesium.Cartesian3.fromDegrees(
                  payloads.measure_target_longitude,
                  payloads.measure_target_latitude,
                  payloads.measure_target_altitude
                )
              ]
            }, false),
            width: 2,
            material: globalCesium.Color.fromCssColorString('red'),
          clampToGround: false,
        }
          },
      })
      }
    }
  }
@@ -428,26 +450,34 @@
  function getPhoneLocation(workspaceId:String) {
    if (window.cesiumViewer == null) return
    if (navigator.geolocation) {
      navigator.geolocation.watchPosition((position) => {
        console.log(me_longitude,position.coords.longitude)
        console.log(me_latitude,position.coords.latitude)
        if (me_longitude > 0 && me_longitude == position.coords.longitude && me_latitude > 0 && me_latitude == position.coords.latitude) return
        me_longitude = position.coords.longitude;
        me_latitude = position.coords.latitude;
        me_altitude = position.coords.altitude || 0;
        // 创建一个箭头实体
        removeById('me_dw')
      // 如果实体不存在,先创建实体
      if (!myAppEntity) {
        myAppEntity = window.cesiumViewer.entities.add({
          id: 'me_dw',
          position: globalCesium.Cartesian3.fromDegrees(me_longitude, me_latitude, me_altitude),
          position: new globalCesium.CallbackProperty(() => {
            return globalCesium.Cartesian3.fromDegrees(me_longitude, me_latitude, me_altitude)
          }, false),
          billboard: {
            image: meMapSrc, // 箭头图片路径
            image: meMapSrc,
            width: 30,
            height: 30,
            scale: 1.0,
            outlineWidth: 0,
          }
        });
      } else {
        myAppEntity.position = new globalCesium.CallbackProperty(() => {
          return globalCesium.Cartesian3.fromDegrees(me_longitude, me_latitude, me_altitude)
        }, false);
      }
      navigator.geolocation.watchPosition((position) => {
        if (me_longitude > 0 && me_longitude == position.coords.longitude &&
            me_latitude > 0 && me_latitude == position.coords.latitude) return
        me_longitude = position.coords.longitude;
        me_latitude = position.coords.latitude;
        me_altitude = position.coords.altitude || 0;
        // 查看两条线直接距离和高度
        getTwoHeightWidth(workspaceId)
      }, (error) => {