增加app设备定位和激光扫射定位以及目标高度和测距距离

chenyao

2025-02-10 4b57dc340f08f7c517a5eb255275b91785724c53

增加app设备定位和激光扫射定位以及目标高度和测距距离

 src/assets/images/laser.png

 src/assets/images/me.png

 src/views/DronePilotDetails.vue

@@ -90,7 +90,7 @@
  loadLAYER,
} = cesiumOperation()

// const vConsole = new VConsole();
const vConsole = new VConsole();

let globalViewer = null

@@ -156,6 +156,10 @@
const imageUrl = new URL('@/assets/images/norecord.png', import.meta.url).href

const imageMapSrc = new URL('@/assets/images/mapdock.png', import.meta.url).href

const meMapSrc = new URL('@/assets/images/me.png', import.meta.url).href

const jgbMapSrc = new URL('@/assets/images/jgb.png', import.meta.url).href

const mapswitching = new URL('@/assets/images/mapswitching.png', import.meta.url).href

@@ -354,7 +358,6 @@
      break
    }
    case EBizCode.DeviceOsd: {
      // console.log('低调点',payload)
      store.commit('SET_DEVICE_INFO', payload.data)
      store.commit('SET_WS_MESSAGE', payload)
      break
@@ -429,7 +432,6 @@
    // await _init('cesiumContainerBigMap');
    // await getWrjSsLx();
  } else {
    console.log('是否进来',landscapeBox)
    isLandscape.value = false;
    updateScreenSize()
    landscapeBox.style.display = 'inherit';
@@ -449,6 +451,7 @@
const getWrjSsLx = () => {
  getWaylineFile(sbInfo.sn).then((res:any) => {
    if (res.code != 200) return
    console.log('草草草草', res.data)
    ssLinePath.value = res.data
    globalViewer = window.cesiumViewer
    // 先有航线，再飞行
@@ -493,10 +496,7 @@
    })
  } else {
    // 当机场坐标存在时，判断获取的位置与机场坐标位置是否一致，若不是，重新更新位置
    let dornePoint = cartesian3Convert(
      getEntityById('drone_dock')._position._value,
       window.cesiumViewer,
    )
    let dornePoint = cartesian3Convert(getEntityById('drone_dock')._position._value, window.cesiumViewer,)
    getLongOk = getLnglatDist(
      dornePoint.longitude,
      dornePoint.latitude,
@@ -521,6 +521,7 @@
}, {deep: true})

watch(() => store.state.wsMessage, (newValue, oldValue) => {
  // 控制台报 Expected longitude to be typeof number, actual typeof was undefined 是因为这里没有及时拿到longitude数据
  viewDroneInfo.longitude = newValue?.longitude
  viewDroneInfo.latitude = newValue?.latitude
  viewDroneInfo.elevation = Number(newValue?.elevation.toFixed(2)) + droneHeight.value
@@ -535,6 +536,7 @@
  const xmlStr = await fileInfoObj['wpmz/template.kml']
  const xmlJson = XMLToJSON(xmlStr)?.['Document']
  const placemark = xmlJson.Folder.Placemark
  console.log('看看航线值', placemark.Polygon)
  if (placemark?.Polygon) {
    // return 'planar'
    planarWayline(ssLinePath.value, sbInfo.longitude, sbInfo.latitude)
@@ -544,6 +546,58 @@
  }
}

const me_latitude = ref(0);
const me_longitude = ref(0);
// const loading = ref(true);
// const error = ref(null);
// 获取自身定位
const getLocation = () => {
  if (window.cesiumViewer == null) return 
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log('333',position.coords.latitude)
        console.log('333',position.coords.longitude)
        me_latitude.value =  position.coords.latitude;
        me_longitude.value = position.coords.longitude;
        // loading.value = false;
        // 开始给自己定位
        getLnglatAltitude(me_longitude.value, me_latitude.value,  window.cesiumViewer).then(res => {
          removeById('me_coordinate')
          window.cesiumViewer.entities.add({
            position: globalCesium.Cartesian3.fromDegrees(
              me_longitude.value,
              me_latitude.value,
              res.height,
            ),
            id: 'me_coordinate',
            billboard: {
              image: meMapSrc,
              outlineWidth: 0,
              width: 36,
              height: 36,
              scale: 1.0,
            }
          })
          // window.cesiumViewer.scene.camera.setView({
          //   destination: globalCesium.Cartesian3.fromDegrees(
          //     Number(me_longitude),
          //     Number(me_latitude),
          //     10000.0,
          //   ),
          // })
          // droneHeight.value = res.height
        })
      },
      (err) => {
        console.log('定位有误')
      }
    );
  } else {
    console.log('您的浏览器不支持地理定位')
  }
};

onMounted(async () => {
  window.addEventListener('orientationchange', checkOrientation);
  window.addEventListener('resize', checkOrientation); // 兼容某些设备
@@ -552,6 +606,8 @@
  await nextTick();
  await _init('cesiumContainerBigMap');
  await getWrjSsLx();

  await getLocation()
  
});


 src/views/DronePilotList.vue

@@ -57,7 +57,7 @@
// 存储设备值
let osdVisible = reactive<any>({})

// const vConsole = new VConsole();
const vConsole = new VConsole();

// 点击信息详情
const infoClick = (data:any) => {
@@ -101,16 +101,6 @@
}

onMounted(() => {
  
  // navigator.geolocation.getCurrentPosition(
  //       (success) => {
  //         console.log(success.coords.longitude, '经纬度')
  //         position.value = {
  //           latitude: success.coords.latitude,
  //           longitude: success.coords.longitude,
  //         };
  //       })

  init()
  // 设置定时器，每隔 3 秒刷新一次数据
  intervalId = setInterval(init, 3000);

 src/views/components/comPass.vue

@@ -164,6 +164,7 @@
      content: var(--before-content);
      position: absolute;
      top: -1rem;
      left: -0.5rem;
      font-size: 10px;
      font-family: none;
    }
@@ -181,9 +182,9 @@
        height: 0;
        top: 0rem;
        left: 0.3rem;
        border-top: solid 3px transparent;
        border-left: solid 3px #1fa3f6;
        border-bottom: solid 3px transparent;
        border-top: solid 0.18rem transparent;
        border-left: solid 0.18rem #1fa3f6;
        border-bottom: solid 0.18rem transparent;
      }
    }
  }
@@ -192,6 +193,7 @@
      content: var(--right-content);
      position: absolute;
      top: -1rem;
      left: -0.3rem;
      font-size: 10px;
      font-family: none;
    }
@@ -209,10 +211,10 @@
        &::before {
          content: '';
          position: absolute;
          left: -0.3rem;
          right: 0.3rem;
          top: 0;
          border: 3px solid transparent {
            right: solid 3px #1fa3f6;
          border: 0.18rem solid transparent {
            right: solid 0.18rem #1fa3f6;
          }
        }
      }

 src/views/hooks/droneFly.ts

@@ -10,6 +10,8 @@
// 无人机实体
let droneEntity = null

// 激光实体
let laserEntity = null
export function droneFly () {
  const store = useMyStore()
  let deviceInfo = {} // 无人机信息
@@ -35,11 +37,8 @@
    deviceInfo = data.deviceInfo[`${sn}`]
    // 机场信息
    dockInfo = data.dockInfo[`${dockSn}`]
    // console.log('是吧',dockInfo)
    // console.log('踩踩踩', deviceInfo)
    // console.log('踩踩踩', dockInfo)
    viewDroneInfo = viewDroneInfo
    // console.log('1111', deviceInfo.longitude)
    console.log('打印我想看的',viewDroneInfo.longitude)
    // 当前飞行任务创建时间
    if (data.currentType === EDeviceTypeName.Aircraft && deviceInfo) {
      const droneLngLat = {
@@ -55,7 +54,6 @@
          } else {
            initCreateFrustum(deviceInfo, viewDroneInfo)
          }
          // console.log('2222', viewDroneInfo.longitude)
          addFlyGltf(
            viewDroneInfo.longitude,
            viewDroneInfo.latitude,
@@ -66,7 +64,16 @@
            dockInfo,
            ssLinePath
          )
          // console.log('3333', viewDroneInfo.longitude)
          addFlyLaser(
            viewDroneInfo.longitude,
            viewDroneInfo.latitude,
            deviceInfo.height,
            deviceInfo.payloads[0],
            deviceInfo.attitude_head,
            deviceInfo,
            dockInfo,
            ssLinePath
          )
          setelCamera(
            viewDroneInfo.longitude,
            viewDroneInfo.latitude,
@@ -90,6 +97,16 @@
          initCreateFrustum(deviceInfo, viewDroneInfo)
          console.log('4444', viewDroneInfo.longitude)
          addFlyGltf(
            viewDroneInfo.longitude,
            viewDroneInfo.latitude,
            deviceInfo.height,
            deviceInfo.payloads[0],
            deviceInfo.attitude_head,
            deviceInfo,
            dockInfo,
            ssLinePath
          )
          addFlyLaser(
            viewDroneInfo.longitude,
            viewDroneInfo.latitude,
            deviceInfo.height,
@@ -169,6 +186,52 @@
    }
  }

  const imgLaser = new URL('@/assets/images/laser.png', import.meta.url).href
  // 增加激光扫射点
  function addFlyLaser(lng:any, lat:any, alt:any, payloads:any, attitude_head:any, deviceInfo:any, dockInfo:any, ssLinePath:any) {
    console.log('哒哒哒', payloads)
    const position = globalCesium.Cartesian3.fromDegrees(
      payloads.measure_target_longitude, payloads.measure_target_latitude, 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)
  
      laserEntity.show = true
  
      window.cesiumViewer.scene.requestRender()
    } else {
      laserEntity = window.cesiumViewer.entities.add({
        position,
        id: 'laser_coordinate',
        billboard: {
          image: imgLaser,
          outlineWidth: 0,
          width: 36,
          height: 36,
          scale: 1.0,
        }
      })
    }
    // 增加激光扫射信息
    laserEntity.label = new globalCesium.LabelGraphics({
      text: `目标海拔:${Math.ceil(payloads.measure_target_altitude)}m\n测距距离:${Math.round(
        Math.ceil(payloads.measure_target_distance),
      )}m`,
      font: '13px monospace',
      showBackground: true,
      horizontalOrigin: globalCesium.HorizontalOrigin.CENTER,
      verticalOrigin: globalCesium.VerticalOrigin.BOTTOM,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
      pixelOffset: new globalCesium.Cartesian2(0, -40),
      show: true,
    })
  }

  function addFlyGltf (lng:any, lat:any, alt:any, payloads:any, attitude_head:any, deviceInfo:any, dockInfo:any, ssLinePath:any) {
    const { gimbal_pitch, gimbal_yaw } = payloads
    const position = globalCesium.Cartesian3.fromDegrees(

 src/views/hooks/initPointWayline.ts

@@ -102,6 +102,7 @@
            dornePoint.longitude,
            dornePoint.latitude,
          )
          console.log('看看值', waylinePosition[index])
          if (getLongOk < 20) {
            setting = {
              id: 'route_point_' + index,