车辆位姿

public/config.json

 {
-    "SERVICE_IP": "192.168.109.84:1234",
+    "SERVICE_IP": "192.168.14.38:1234",
     "LOG_SERVE_IP":"192.168.93.87:8020",
     "MAP_CENTER": [39.74441007068,111.24544532751],
     "version": "1.1.4"

src/store/VehicleStore.js

@@ -124,8 +124,8 @@ export const useVehicleStore = defineStore('vehicle', {
             }
         },
         setBasicInfo(data) {
-            const {oil, isOil, tire0, tire1, tire2, tire3, tire4, tire5} = data
-            this.vehicleBasic = {oil, isOil, tire0, tire1, tire2, tire3, tire4, tire5}
+            const {oil, isOil, tire0, tire1, tire2, tire3, tire4, tire5, roll, pitch} = data
+            this.vehicleBasic = {oil, isOil, tire0, tire1, tire2, tire3, tire4, tire5, roll: roll.toFixed(1), pitch: pitch.toFixed(1)}
         }
     }
 })
\ No newline at end of file

src/views/map/MapLeaflet.vue

@@ -5,6 +5,16 @@
         <div class="navigate-preview">
             <img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
         </div>
+        <div class="roll-pitch">
+            <div class="roll-pitch-item">
+                <img :style="`transform: rotateZ(${roll}deg)`" src="/image/roll_img.png" alt="" />
+                <span>{{ roll }}</span>
+            </div>
+            <div class="roll-pitch-item">
+                <img :style="`transform: rotateZ(${pitch}deg)`" src="/image/pitch_img.png" alt="" />
+                <span>{{ pitch }}</span>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -100,12 +110,28 @@
     } = mapStoreToRefs
     const vehicleStore = useVehicleStore()
     const vehicleStoreToRefs = storeToRefs(vehicleStore)
-    const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
+    const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles, vehicleBasic } = vehicleStoreToRefs
 
     const deviceId = computed(() => {
         return paraminfo.value.deviceId
     })
 
+    const roll = computed(() => {
+        if (vehicleBasic) {
+            return vehicleBasic.value.roll || 0
+        } else {
+            return 0
+        }
+    })
+
+    const pitch = computed(() => {
+        if (vehicleBasic) {
+            return vehicleBasic.value.pitch || 0
+        } else {
+            return 0
+        }
+    })
+
     const emits = defineEmits(['handleSend'])
 
     onMounted(() => {
@@ -830,18 +856,38 @@
     width: 4vw;
     height: 4vw;
     z-index: 999;
+    max-width: 60px;
+    max-height: 60px;
 }
 
 .compass {
     bottom: 88px;
-    max-width: 60px;
-    max-height: 60px;
 }
 
 .navigate-preview {
     bottom: 24px;
-    max-width: 60px;
-    max-height: 60px;
+}
+.roll-pitch {
+    position: absolute;
+    bottom: 24px;
+    right: 10px;
+    color: #fff;
+    z-index: 999;
+    img {
+        width: 6vw;
+        height: 6vw;
+        max-width: 100px;
+        max-height: 100px;
+    }
+    .roll-pitch-item {
+        position: relative;
+        span {
+            position: absolute;
+            left: 50%;
+            top: 45%;
+            transform: translateX(-50%);
+        }
+    }
 }
 </style>
 <style lang="less">