无人机实时数据

src/store/modules/uav.js

@@ -0,0 +1,21 @@
+const useUavStore = defineStore("uav", {
+  state: () => ({
+    params: {
+        lat: 31.162232,
+        lng: 120.734077,
+        altitude: 100,
+        heading: 0, //当前朝向
+        pitch: 0, //保当前俯仰角
+        roll: 0, //当前翻滚角
+        correction: 1,
+        speed: 500,
+    },
+  }),
+  actions: {
+    setParams(data) {
+        
+      this.params = data;
+    },
+  },
+});
+export default useUavStore

src/views/components/map/marsMap.vue

@@ -7,7 +7,8 @@ import marsMap from "@/components/marsMap";
 import PointJson from "./point.json";
 import { onMounted, ref, reactive, watch, onUnmounted } from "vue";
 import moment from "moment";
-
+import useUavStore from "@/store/modules/uav";
+const uavStore = useUavStore();
 const { proxy } = getCurrentInstance();
 
 let options = {
@@ -96,8 +97,8 @@ const intervalId = setInterval(() => {
   const diffInMinutes = Math.abs(moment1.diff(moment2, "minutes"));
   if (diffInMinutes === 1 && isGamepad.value) {
     isGamepad.value = false;
-    currentTimestampInSeconds.value = 0
-    params.altitude = 100
+    currentTimestampInSeconds.value = 0;
+    params.altitude = 100;
     proxy.$modal.msgSuccess("巡航模式已启动");
     map.flyToPoint(new mars3d.LngLatPoint(120.657967, 31.048193));
     uav = null;
@@ -105,7 +106,6 @@ const intervalId = setInterval(() => {
     setTimeout(() => {
       initUav(); //重新渲染固定航线
     }, 3000);
-    
   }
 }, 5000);
 
@@ -125,15 +125,12 @@ const mapLoad = (mapInstance) => {
   });
 };
 
-
-
-
 // 组件卸载时清除定时器
 onUnmounted(() => {
   clearInterval(intervalId);
-    if(animationFrameId){
-      cancelAnimationFrame(animationFrameId);
-    }
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId);
+  }
   window.removeEventListener("gamepadconnected", handleGamepadConnected);
   window.removeEventListener("gamepaddisconnected", handleGamepadDisconnected);
 });
@@ -151,22 +148,18 @@ const handleGamepadDisconnected = () => {
 };
 
 const handleGamepadConnected = (e) => {
-  
   handleUavDataLast();
   // 开始手柄操作
   const renderer = () => {
-    
-      startgamepad();
-   
-    if(isGamepad.value){
-    onAdjustAttitude();
-  }
+    startgamepad();
+
+    if (isGamepad.value) {
+      onAdjustAttitude();
+    }
     animationFrameId = requestAnimationFrame(renderer);
   };
- 
-    renderer();
- 
-  
+
+  renderer();
 };
 
 const handleUavDataLast = () => {
@@ -194,7 +187,6 @@ const boostrapUav = () => {
 
 const startgamepad = () => {
   gamepad = navigator.getGamepads()[0];
-  
 
   if (gamepad) {
     //手柄方向按键
@@ -210,11 +202,11 @@ const rocker = () => {
   const x = axes[0];
   const y = axes[1];
 
- //机体左转
+  //机体左转
   if (x < -deadZone) {
-    if(!isGamepad.value){
-    console.log('左')
-  }
+    //   if(!isGamepad.value){
+    //   console.log('左')
+    // }
     handleUavTime();
     //机体左转
     params.heading -= 0.115;
@@ -250,6 +242,7 @@ const rocker = () => {
       params.altitude += temp * Math.sin(pitch);
     }
   }
+
   reset();
 };
 //左侧方向按键上下键
@@ -271,12 +264,10 @@ const pressKey = (buttons) => {
 
 //只要操作手柄就获取当前时间戳
 const handleUavTime = () => {
-
-  if(!isGamepad.value){
-    handleUavDataLast()
-    return
+  if (!isGamepad.value) {
+    handleUavDataLast();
+    return;
   }
-  
 
   currentTimestampInSeconds.value = moment().unix();
 };
@@ -306,7 +297,7 @@ const onAdjustAttitude = () => {
   const { lng, lat, altitude, heading, pitch, roll } = params;
   params.altitude += temp * Math.sin(pitch) * 110 * 1000 * 10;
   const position = Cesium.Cartesian3.fromDegrees(lng, lat, altitude);
-
+  uavStore.setParams(params)
   uav.model.setStyle({
     heading,
     pitch,
@@ -346,6 +337,22 @@ const initUav = () => {
   });
   mapLayer.uav.addGraphic(uav);
   uav.start();
+
+  uav.on(mars3d.EventType.change, function (event) {
+    if (isGamepad.value) return;
+    const { heading, pitch, roll, position } = event.target.model;
+    const cartographic = mars3d.LngLatPoint.fromCartesian(position);
+    uavStore.setParams({
+      lat: cartographic._lat,
+      lng: cartographic._lng,
+      altitude: cartographic._alt,
+      heading: heading, //当前朝向
+      pitch: 0, //保当前俯仰角
+      roll: 0, //当前翻滚角
+      correction: 1,
+      speed: 100,
+    });
+  });
 };
 
 const initRectangle = () => {
@@ -370,7 +377,6 @@ const initRectangle = () => {
  * 渲染所有点位
  */
 const initMarker = () => {
-
   PointJson.map((item, index) => {
     //绘制名字图标
     lablePoint(item, index);

src/views/components/map/panelLeft.vue

@@ -71,10 +71,52 @@
     <view-title height="50%" title="无人机实时状态">
       <!-- 内容区 -->
       <div class="contain-grid">
-        <div v-for="item in gridItems" :key="item.id" class="grid-item">
-          <div class="grid-item-content">{{ item.content }}</div>
+        <div  class="grid-item">
+          <div class="grid-item-content">{{ uavStore.params.lat.toFixed(3) }}</div>
           <div class="grid-item-footer">
-            {{ item.footer }} <span class="unit-name">{{ item.unit }}</span>
+            经度 <span class="unit-name">(°)</span>
+          </div>
+        </div>
+        <div  class="grid-item">
+          <div class="grid-item-content">{{uavStore.params.lng.toFixed(3)}}</div>
+          <div class="grid-item-footer">
+            纬度 <span class="unit-name">(°)</span>
+          </div>
+        </div>
+        <div  class="grid-item">
+          <div class="grid-item-content">{{ uavStore.params.altitude.toFixed(2) }}</div>
+          <div class="grid-item-footer">
+            高度 <span class="unit-name">(m)</span>
+          </div>
+        </div>
+        <div  class="grid-item">
+          <div class="grid-item-content">{{ uavStore.params.heading.toFixed(2) }}</div>
+          <div class="grid-item-footer">
+            偏航角 <span class="unit-name">(°)</span>
+          </div>
+        </div>
+        <div  class="grid-item">
+          <div class="grid-item-content">{{ uavStore.params.pitch.toFixed(2) }}</div>
+          <div class="grid-item-footer">
+            俯仰角 <span class="unit-name">(°)</span>
+          </div>
+        </div>
+        <div  class="grid-item">
+          <div class="grid-item-content">{{ uavStore.params.roll.toFixed(2) }}</div>
+          <div class="grid-item-footer">
+            滚转角 <span class="unit-name">(°)</span>
+          </div>
+        </div>
+        <div  class="grid-item">
+          <div class="grid-item-content">{{ uavStore.params.speed }}</div>
+          <div class="grid-item-footer">
+            速度 <span class="unit-name">km/h</span>
+          </div>
+        </div>
+        <div  class="grid-item">
+          <div class="grid-item-content">100</div>
+          <div class="grid-item-footer">
+            电池电量 <span class="unit-name">%</span>
           </div>
         </div>
       </div>
@@ -85,18 +127,11 @@
 <script setup>
 import { ViewTitle } from "@/views/components/map";
 import { ModelCollada } from "vue-3d-model";
+import  useUavStore  from '@/store/modules/uav'
+
+
+const uavStore = useUavStore()
 
-// 定义数据
-const gridItems = [
-  { id: 1, content: "-20", footer: "经度", unit: "(°)" },
-  { id: 2, content: "20", footer: "纬度", unit: "(°)" },
-  { id: 3, content: "20", footer: "高度", unit: "(m)" },
-  { id: 4, content: "20", footer: "偏航角", unit: "(°)" },
-  { id: 5, content: "20", footer: "俯仰角", unit: "(°)" },
-  { id: 6, content: "20", footer: "滚转角", unit: "(°)" },
-  { id: 7, content: "20", footer: "速度", unit: "km/h" },
-  { id: 8, content: "20", footer: "电池电量", unit: "" },
-];
 
 const onLoad = () => {
   rotate();

src/views/map.vue

@@ -2,7 +2,7 @@
   <div>
     <map-container>
       <template #map>
-        <!-- <mars-map></mars-map> -->
+        <mars-map></mars-map>
       </template>
       <template #left>
         <panel-left></panel-left>