实现无人机的方向操作

src/assets/styles/font.css

@@ -2,3 +2,7 @@
   font-family: "YouSheBiaoTiHei";
   src: url("./font/YouSheBiaoTiHei.ttf");
 }
+@font-face {
+  font-family: "Alibaba-PuHuiTi-Regular.otf";
+  src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
+}

src/views/components/map/container.vue

@@ -86,7 +86,7 @@ onMounted(() => {
     background: url("@/assets/images/left-bg.png");
     background-size: 100% 100%;
     box-sizing: border-box;
-    padding: 120px 47px 67px 47px;
+    padding: 120px 55px 67px 55px;
   }
   .right-bg {
     position: absolute;
@@ -98,7 +98,7 @@ onMounted(() => {
     background: url("@/assets/images/right-bg.png");
     background-size: 100% 100%;
     box-sizing: border-box;
-    padding: 120px 47px 67px 47px;
+    padding: 120px 55px 67px 55px;
   }
 }
 </style>

src/views/components/map/index.js

@@ -2,3 +2,5 @@ export { default as MapContainer } from './container.vue'
 export { default as PanelLeft } from './panelLeft.vue'
 export { default as PanelRight } from './panelRight.vue'
 export { default as MarsMap } from './marsMap.vue'
+
+export { default as ViewTitle } from './viewTitle'

src/views/components/map/marsMap.vue

@@ -108,14 +108,14 @@ const mapLoad = (mapInstance) => {
 };
 
 const boostrapUav = () => {
-  // initUav()
+  initUav()
-  // onAddKeyboardListener()
+  onAddKeyboardListener()
-  // const renderer = () => {
+  const renderer = () => {
-  //   onAdjustParams();
+    onAdjustParams();
-  //   onAdjustAttitude();
+    onAdjustAttitude();
-  //   requestAnimationFrame(renderer);
+    requestAnimationFrame(renderer);
-  // };
+  };
-  // renderer();
+  renderer();
 }
 
 //开启按键监听
@@ -195,14 +195,11 @@ const onAdjustParams = () => {
 // 开启飞行姿态调整/
 const onAdjustAttitude = () => {
   const temp = params.speed / 60 / 60 / 60 / 110;
-  params.lng += temp * Math.cos(params.heading);
+  params.lng += temp * Math.cos(Cesium.Math.toRadians(params.heading));
-  params.lat -= temp * Math.sin(params.heading);
+  params.lat -= temp * Math.sin(Cesium.Math.toRadians(params.heading));
   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);
-
    uav.model.setStyle({
     heading,
      pitch,
@@ -234,7 +231,7 @@ const initUav = () => {
       scale: 0.1,
       minimumPixelSize: 0.1,
       runAnimations: true,
-      mergeOrientation: true,
+      // mergeOrientation: true,
      
     },
   

src/views/components/map/panelLeft.vue

@@ -1,10 +1,23 @@
 <template>
   <div class="panel-box panel-left">
-    
+    <view-title height="50%" title="无人机信息">
+      <!-- <model-collada
+    :backgroundAlpha="0"
+    :rotation="{
+      x: - Math.PI / 2,
+      y: 0,
+      z: 0,
+    }"
+    src="../../../assets/images/uav-model.dae"
+  /> -->
+    </view-title>
+    <view-title height="50%" title="无人机实时状态"></view-title>
   </div>
 </template>
 
 <script setup>
+import {ViewTitle} from "@/views/components/map"
+// import { ModelCollada } from 'vue-3d-model';
 </script>
 
 <style  scoped>

src/views/components/map/panelRight.vue

@@ -1,10 +1,13 @@
 <template>
     <div class="panel-box panel-right">
-      
+        <view-title height="calc(100% / 3)" title="平台介绍"></view-title>
+        <view-title height="calc(100% / 3)" title="特色应用"></view-title>
+        <view-title height="calc(100% / 3)" title="飞行场景"></view-title>
     </div>
   </template>
   
   <script setup>
+  import {ViewTitle} from "@/views/components/map"
   </script>
   
   <style  scoped>

src/views/components/map/viewTitle/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="view-title" :style="{height:props.height}">
+    <div class="title-row">
+      <div class="row-bg"></div>
+      <div class="row-text">{{ title }}</div>
+    </div>
+    <div class="data-panel">
+    <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+
+  // 数量限制
+  title: {
+    type: String,
+    default: '默认标题',
+  },
+  height: {
+    type: String,
+    default: '50%',
+  },
+});
+</script>
+
+<style scoped>
+.view-title{
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.title-row{
+  position: relative;
+  .row-bg{
+    height: 35px;
+    width: 74px;
+    background: url("@/assets/images/view-title.png") ;
+    background-size: 100% 100%;
+  }
+  .row-text{
+    position: absolute;
+    top: 50%;
+    left: 28px;
+    font-size: 17px;
+    color: #FFFFFF;
+    transform: translateY(-50%);
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+.data-panel{
+  flex: 1;
+}
+</style>

src/views/map.vue

@@ -29,5 +29,7 @@ import {
   width: 100%;
   background: url("../assets/images/panel-bg.png");
   background-size: 100% 100%;
+  box-sizing: border-box;
+  padding: 21px;
 }
 </style>