UI主体组件

src/assets/styles/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url("./font/YouSheBiaoTiHei.ttf");
+}

src/assets/styles/index.scss

@@ -6,6 +6,7 @@
 @import './btn.scss';
 @import './ruoyi.scss';
 @import './marsMap.scss';
+@import './font.css';
 
 body {
   width: 100%;

src/views/components/map/container.vue

@@ -1,31 +1,104 @@
 <template>
-    <div class="map-container" id="mapContainer">
-        <slot></slot>
+  <div class="map-container" id="mapContainer">
+    <div class="top-main">
+      <div class="map-title">
+        <span> 云航低空研训基地飞行控制中心</span>
+      </div>
     </div>
-  </template>
-  
-  <script setup>
-    import { onMounted } from 'vue';
-    import autofit from 'autofit.js'
-    onMounted(()=>{
-      //启用适配
-      autofit.init({
-        el:"#mapContainer",
-        dh: 1080,
-        dw: 1920,
-        resize:true,
-      })
-    })
+    <div class="bottom-box"></div>
+    <div class="left-bg">
+      <slot name="left"></slot>
+    </div>
+    <div class="right-bg">
+      <slot name="right"></slot>
+    </div>
+    <div class="map-main">
+      <slot name="map"></slot>
+    </div>
+  </div>
+</template>
 
-  </script>
+<script setup>
+import { onMounted } from "vue";
+import autofit from "autofit.js";
+onMounted(() => {
+  //启用适配
+  autofit.init({
+    el: "#mapContainer",
+    dh: 1080,
+    dw: 1920,
+    resize: true,
+  });
+});
+</script>
 
-  <style lang="scss" scoped>
-  .map-container{
-    position: relative;
-    z-index: 100;
+<style lang="scss" scoped>
+.map-container {
+  position: relative;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  .map-main {
     height: 100%;
     width: 100%;
-   
   }
-  </style>
+  .top-main {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    height: 120px;
+    background: url("@/assets/images/top-box.png");
+    background-size: 100% 100%;
+  }
+  .map-title {
+    width: 100%;
+    height: 100%;
+    background: url("@/assets/images/map-title.png") no-repeat top center;
+    background-size: 100% cover;
+    text-align: center;
+    span {
+      display: inline-block;
+      letter-spacing: 2px;
+      font-size: 40px;
+      color: #ffffff;
+      font-family: "YouSheBiaoTiHei";
+      text-shadow: 2px 6px 4px #0e426c;
+    }
+  }
 
+  .bottom-box {
+    position: absolute;
+    bottom: 0;
+    z-index: 200;
+    width: 100%;
+    height: 150px;
+    background: url("@/assets/images/bottom-box.png");
+    background-size: 100% 100%;
+  }
+  .left-bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 200;
+    height: 100%;
+    width: 500px;
+    background: url("@/assets/images/left-bg.png");
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 120px 47px 67px 47px;
+  }
+  .right-bg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 100;
+    height: 100%;
+    width: 500px;
+    background: url("@/assets/images/right-bg.png");
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 120px 47px 67px 47px;
+  }
+}
+</style>

src/views/components/map/marsMap.vue

@@ -17,15 +17,9 @@ let options = {
     },
     showSun: false,
     showMoon: false,
-    showSkyBox: false,
-    showSkyAtmosphere: false,
+    showSkyBox: true,
+    showSkyAtmosphere: true,
     fog: false,
-    // backgroundColor: "#363635", // 天空背景色
-    globe: {
-      baseColor: "#363635", // 地球地面背景色
-      showGroundAtmosphere: false,
-      enableLighting: false,
-    },
     clock: {
       currentTime: "2023-11-01 12:00:00", // 固定光照时间
     },
@@ -62,8 +56,39 @@ let options = {
     },
   ],
 };
+const params = reactive({
+  lat: 31.162232,
+  lng: 120.734077,
+  altitude: 3000,
+  heading: 0, //当前朝向
+  pitch: 0, //保当前俯仰角
+  roll: 0, //当前翻滚角
+  correction: 1,
+  speed: 800,
+
+});
+const EARTH_RADIUS = 6371000;
+let isUav = true
+const DIRECTION = {
+  UP: "w",
+  DOWN: "s",
+  LEFT: "a",
+  RIGHT: "d",
+  SPEED_UP: "q",
+  SPEED_DOWN: "e",
+};
 
+const keyboardMap = {
+  [DIRECTION.UP]: false,
+  [DIRECTION.DOWN]: false,
+  [DIRECTION.LEFT]: false,
+  [DIRECTION.RIGHT]: false,
+  [DIRECTION.SPEED_UP]: false,
+  [DIRECTION.SPEED_DOWN]: false,
+};
 let map = null;
+let list = [];
+let uav = null
 const mapLayer = {};
 const mapLoad = (mapInstance) => {
   map = mapInstance;
@@ -73,38 +98,152 @@ const mapLoad = (mapInstance) => {
   });
   map.addLayer(mapLayer.markerLayer);
   //创建无人机固定巡航
-  initUav()
-  // 绘制停机场矩形
-  initRectangle();
-  initMarker();
+  // initUav()
+  // // 绘制停机场矩形
+  // initRectangle();
+  // initMarker();
+
+
+  boostrapUav()
+};
+
+const boostrapUav = () => {
+  // initUav()
+  // onAddKeyboardListener()
+  // const renderer = () => {
+  //   onAdjustParams();
+  //   onAdjustAttitude();
+  //   requestAnimationFrame(renderer);
+  // };
+  // renderer();
+}
+
+//开启按键监听
+const onAddKeyboardListener = () => {
+  document.addEventListener("keydown", (e) => {
+    if (Object.keys(keyboardMap).includes(e.key)) {
+      keyboardMap[e.key] = true;
+    }
+  });
+  document.addEventListener("keyup", (e) => {
+    if (Object.keys(keyboardMap).includes(e.key)) {
+      keyboardMap[e.key] = false;
+    }
+  });
+};
+
+//开启飞行参数调整
+const onAdjustParams = () => {
+  if (keyboardMap[DIRECTION.SPEED_UP]) {
+    params.speed += 100;
+  }
+  if (keyboardMap[DIRECTION.SPEED_DOWN]) {
+    if (params.speed >= 500) {
+      params.speed -= 100;
+    }
+  }
+  //机体爬升
+  if (keyboardMap[DIRECTION.UP] && params.pitch <= 0.3) {
+    params.pitch += 0.005;
+    if (params.pitch > 0) {
+      const { speed, pitch } = params;
+      const temp = (params.speed / 60 / 60 / 60) * 110;
+      //1经纬度约等于110km
+      params.altitude += temp * Math.sin(pitch);
+    }
+  }
+  //机体俯冲
+  if (keyboardMap[DIRECTION.DOWN] && params.pitch >= -0.3) {
+    params.pitch -= 0.006;
+    if (params.pitch < 0) {
+      const { speed, pitch } = params;
+      //1经纬度约等于110km
+      const temp = (params.speed / 60 / 60 / 60) * 110;
+      params.altitude += temp * Math.sin(pitch);
+    }
+  }
+  //机体左转
+  if (keyboardMap[DIRECTION.LEFT]) {
+    params.heading -= 0.115;
+    if (params.roll > -10) {
+      params.roll -= 0.115;
+    }
+  }
+  //机体右转
+  if (keyboardMap[DIRECTION.RIGHT]) {
+    params.heading += 0.115;
+    if (params.roll < 10) {
+      params.roll += 0.115;
+    }
+  
+  }
+  const { heading, pitch, roll } = params;
+  const { abs, cos } = Math;
+  params.correction = abs(cos(heading) * cos(pitch));
+  if (abs(heading) < 0.001) params.heading = 0;
+  if (abs(roll) < 0.001) params.roll = 0;
+  if (abs(pitch) < 0.001) params.pitch = 0;
+  //方向自动回正
+  // if (params.heading > 0) params.heading -= 0.0025
+  // if (params.heading < 0) params.heading += 0.0025
+  if (params.roll > 0) params.roll -= 0.003;
+  if (params.roll < 0) params.roll += 0.003;
+  if (params.pitch < 0) params.pitch += 0.005;
+  if (params.pitch > 0) params.pitch -= 0.003;
 };
 
-const initUav = ()=>{
-  let list = []
-  PointJson.map(item=>{
-    list.push(item.wz.split(",").map(Number))
-  })
-  const uav = new mars3d.graphic.Route({
+// 开启飞行姿态调整/
+const onAdjustAttitude = () => {
+  const temp = params.speed / 60 / 60 / 60 / 110;
+  params.lng += temp * Math.cos(params.heading);
+  params.lat -= temp * Math.sin(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,
+      roll
+  });
+  uav.addTimePosition(position);
+ 
+ 
+};
+
+
+const initUav = () => {
+  if (list.length == 0) {
+    PointJson.map((item) => {
+      list.push(item.wz.split(",").map(Number));
+    });
+  }
+
+   uav = new mars3d.graphic.Route({
     id: "uav",
     name: "无人机模型",
     position: {
-        type: "time", // 时序动态坐标
-        speed: 100,
-        list: list
-      },
+      type: "time", // 时序动态坐标
+      speed: 100,
+      list: list,
+    },
     model: {
       url: "https://data.mars3d.cn/gltf/mars/wrj.glb",
       scale: 0.1,
       minimumPixelSize: 0.1,
       runAnimations: true,
       mergeOrientation: true,
+     
     },
+  
     camera: {
       type: "gs",
-    }
-  })
+    },
+  });
   mapLayer.markerLayer.addGraphic(uav);
-}
+};
 
 const initRectangle = () => {
   const graphic = new mars3d.graphic.RectanglePrimitive({
@@ -124,7 +263,6 @@ const initRectangle = () => {
   mapLayer.markerLayer.addGraphic(graphic);
 };
 
-
 /**
  * 渲染所有点位
  */

src/views/components/map/panelLeft.vue

@@ -9,6 +9,6 @@
 
 <style  scoped>
 .panel-left{
-    left: 46px;
+   
 }
 </style>

src/views/map.vue

@@ -1,11 +1,16 @@
 <template>
   <div>
     <map-container>
-      <!-- <panel-left></panel-left>
-      <panel-right></panel-right> -->
-      <mars-map></mars-map>
+      <template #map>
+        <mars-map></mars-map>
+      </template>
+      <template #left>
+        <panel-left></panel-left>
+      </template>
+      <template #right>
+        <panel-right></panel-right>
+      </template>
     </map-container>
- 
   </div>
 </template>
 
@@ -20,12 +25,8 @@ import {
 
 <style lang="scss" scoped>
 .panel-box {
-  position: absolute;
-  top: 50%;
-  z-index: 100;
-  transform: translateY(-50%);
-  height: calc(100% - 175px);
-  width: 390px;
+  height: 100%;
+  width: 100%;
   background: url("../assets/images/panel-bg.png");
   background-size: 100% 100%;
 }