实现固定航线切换至手柄控制

src/views/components/map/marsMap.vue

@@ -5,7 +5,8 @@
 <script setup>
 import marsMap from "@/components/marsMap";
 import PointJson from "./point.json";
-
+import { onMounted } from "vue";
+const { proxy } = getCurrentInstance();
 let options = {
   scene: {
     center: {
@@ -59,36 +60,19 @@ let options = {
 const params = reactive({
   lat: 31.162232,
   lng: 120.734077,
-  altitude: 3000,
+  altitude: 100,
   heading: 0, //当前朝向
   pitch: 0, //保当前俯仰角
   roll: 0, //当前翻滚角
   correction: 1,
-  speed: 800,
-
+  speed: 500,
 });
-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 isGamepad  = false;
+
 let map = null;
 let list = [];
-let uav = null
+let uav = null;
 const mapLayer = {};
 const mapLoad = (mapInstance) => {
   map = mapInstance;
@@ -97,64 +81,101 @@ const mapLoad = (mapInstance) => {
     allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
   });
   map.addLayer(mapLayer.markerLayer);
-  //创建无人机固定巡航
-  // initUav()
-  // // 绘制停机场矩形
-  // initRectangle();
-  // initMarker();
+  //创建无人机图层
+  mapLayer.uav = new mars3d.layer.GraphicLayer()
+  map.addLayer(mapLayer.uav);
+
+  boostrapUav();
 
   
-  boostrapUav()
 };
 
-const boostrapUav = () => {
-  initUav()
-  onAddKeyboardListener()
-  const renderer = () => {
-    onAdjustParams();
-    onAdjustAttitude();
-    requestAnimationFrame(renderer);
-  };
-  renderer();
-}
+onMounted(()=>{
+  onAddGamepadboardListener();
+})
+
+/**
+ * 监听游戏手柄
+ */
+const onAddGamepadboardListener = () => {
+  window.addEventListener("gamepadconnected", function (e) {
+    var gp = navigator.getGamepads()[e.gamepad.index];
+    proxy.$modal.msgSuccess("手柄控制已启动");
+    // 获取无人机最后的信息
+    const uavItem =  mapLayer.uav.getGraphicById('uav1');
+    const {heading,pitch,roll,position } = uavItem
+    const cartographic = mars3d.LngLatPoint.fromCartesian(position)
+    params.lat =cartographic._lat
+    params.lng=cartographic._lng
+    params.heading=heading
+    params.pitch=pitch
+    params.roll=roll
+   
+    // 开始手柄操作
+     const renderer = () => {
+      startgamepad();
+      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;
-    }
+  // 监听游戏手柄拔出
+  window.addEventListener("gamepaddisconnected", function (e) {
+    clearInterval(interval);
   });
 };
 
-//开启飞行参数调整
-const onAdjustParams = () => {
-  if (keyboardMap[DIRECTION.SPEED_UP]) {
-    params.speed += 100;
+const boostrapUav = () => {
+  // // 绘制停机场矩形
+  // initRectangle();
+  // //渲染所有图标点
+  // initMarker();
+  //渲染无人机
+  initUav();
+};
+
+const startgamepad = () => {
+  var gamepad = navigator.getGamepads()[0];
+  if (gamepad) {
+    //手柄方向按键
+    pressKey(gamepad.buttons);
+    // 手柄方向遥感
+    rocker(gamepad.axes);
   }
-  if (keyboardMap[DIRECTION.SPEED_DOWN]) {
-    if (params.speed >= 500) {
-      params.speed -= 100;
+};
+// 手柄左方向遥感
+const rocker = (axes) => {
+  const deadZone = 0.5;
+  const x = axes[0];
+  const y = axes[1];
+  // //机体左转
+  if (x < -deadZone) {
+    //机体左转
+    params.heading -= 0.115;
+    if (params.roll > -10) {
+      params.roll -= 0.115;
+    }
+  } else if (x > deadZone) {
+    //机体右转
+    params.heading += 0.115;
+    if (params.roll < 10) {
+      params.roll += 0.115;
     }
   }
-  //机体爬升
-  if (keyboardMap[DIRECTION.UP] && params.pitch <= 0.3) {
-    params.pitch += 0.005;
+  // 检测垂直方向机体爬升
+  if (y < -deadZone && params.pitch <= 0.3) {
+    params.pitch += 0.015;
     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;
+  } else if (y > deadZone && params.pitch >= -0.3) {
+    //机体俯冲
+    params.pitch -= 0.016;
     if (params.pitch < 0) {
       const { speed, pitch } = params;
       //1经纬度约等于110km
@@ -162,21 +183,24 @@ const onAdjustParams = () => {
       params.altitude += temp * Math.sin(pitch);
     }
   }
-  //机体左转
-  if (keyboardMap[DIRECTION.LEFT]) {
-    params.heading -= 0.115;
-    if (params.roll > -10) {
-      params.roll -= 0.115;
-    }
+  reset();
+};
+//左侧方向按键上下键
+const pressKey = (buttons) => {
+  // 加速
+  if (buttons[12] && buttons[12].pressed) {
+    params.speed += 100;
   }
-  //机体右转
-  if (keyboardMap[DIRECTION.RIGHT]) {
-    params.heading += 0.115;
-    if (params.roll < 10) {
-      params.roll += 0.115;
+  // 减速
+  if (buttons[13] && buttons[13].pressed) {
+    if (params.speed >= 500) {
+      params.speed -= 100;
     }
-  
   }
+  reset()
+};
+
+const reset = () => {
   const { heading, pitch, roll } = params;
   const { abs, cos } = Math;
   params.correction = abs(cos(heading) * cos(pitch));
@@ -200,26 +224,24 @@ 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);
-   uav.model.setStyle({
+  uav.model.setStyle({
     heading,
-     pitch,
-      roll
+    pitch,
+    roll,
   });
   uav.addTimePosition(position);
- 
- 
 };
 
-
 const initUav = () => {
-  if (list.length == 0) {
+  if (list.length == 0 && !isGamepad ) {
     PointJson.map((item) => {
-      list.push(item.wz.split(",").map(Number));
+      const position = item.wz.split(",").map(Number)
+      position[2] = 100
+      list.push(position);
     });
   }
-
-   uav = new mars3d.graphic.Route({
-    id: "uav",
+  uav = new mars3d.graphic.Route({
+    id: "uav1",
     name: "无人机模型",
     position: {
       type: "time", // 时序动态坐标
@@ -232,14 +254,13 @@ const initUav = () => {
       minimumPixelSize: 0.1,
       runAnimations: true,
       // mergeOrientation: true,
-     
     },
 
     camera: {
       type: "gs",
     },
   });
-  mapLayer.markerLayer.addGraphic(uav);
+  mapLayer.uav.addGraphic(uav);
 };
 
 const initRectangle = () => {

src/views/components/map/panelLeft copy.vue

@@ -1,94 +0,0 @@
-<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="无人机实时状态">
-      <!-- 内容区 -->
-      <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-footer">{{ item.footer }}</div>
-        </div>
-      </div>
-    </view-title>
-    <!-- 底部 -->
-    <div class="contain-foot">
-      <div class="itemone">
-          <div><span>经度:</span>: <span>31</span></div>
-      </div>
-      <div class="itemone">
-        <div><span>纬度:</span> <span>31</span></div>
-      </div>
-      <div class="itemtwo">
-        <div><span>经度</span>: <span>31</span></div>
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script setup>
-import { ViewTitle } from "@/views/components/map";
-// import { ModelCollada } from 'vue-3d-model';
-
-// 定义数据
-const gridItems = [
-  { id: 1, content: '-20', footer: '经度(°)' },
-  { id: 2, content: '20', footer: '纬度(°)' },
-  { id: 3, content: '20', footer: '高度(m)' },
-  { id: 4, content: '20', footer: '偏航角(°)' },
-  { id: 5, content: '20', footer: '水平速度(°)' },
-  { id: 6, content: '20', footer: '垂直速度(m/s)' },
-  { id: 7, content: '20', footer: '电量(%)' },
-  { id: 8, content: '20', footer: '电池温度(°c)' },
-];
-</script>
-
-<style scoped>
-.panel-left {
-  display: flex;
-  flex-direction: column;
-}
-
-.contain-grid {
-  height: 100%;
-  overflow: auto;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
-.grid-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  /* background-color: #fff; */
-  border:1px solid #ccc;
-}
-.contain-foot{
-  padding: .3rem 1rem;
-  position: absolute;
-  width: 79%;
-  margin-left: -4.4%;
-  background-color: #05192A;
-  bottom: 2.4%;
-  display: flex;
-  justify-content: space-between;
-}
-.itemone{
-  display: flex;
-}
-.itemone span:first-child{
-  color:#BCDEFC 
-}
-</style>

src/views/components/map/panelLeft.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="panel-box panel-left">
     <view-title height="50%" title="无人机信息">
-      <model-collada
+      <!-- <model-collada
         @load="onLoad"
         src="src/assets/images/uav-model.dae"
         :rotation="rotation"
@@ -14,7 +14,7 @@
           enableZoom: false,    // 是否可缩放
           enablePan: false      // 是否可移动（鼠标右键可以移动模型）
 }"
-      />
+      /> -->
     </view-title>
     <view-title height="50%" title="无人机实时状态">
       <!-- 内容区 -->

src/views/map-v1.vue

@@ -151,7 +151,7 @@ const startgamepad = () => {
     var gamepad = navigator.getGamepads()[0]
     if (gamepad) {
       //手柄方向按键
-      // pressKey(gamepad!.buttons)
+      pressKey(gamepad.buttons)
       // 手柄方向遥感
       rocker(gamepad.axes)
     }

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>