From cee560775962d3141360e5297126abbcca8e58fb Mon Sep 17 00:00:00 2001
From: jihongshun <1151753686@qq.com>
Date: 星期三, 23 七月 2025 10:27:55 +0800
Subject: [PATCH] 创建模板优化键盘功能

---
 src/utils/components/init-map.vue                            |  216 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/system/shootPoint/components/chooseModelDialog.vue |    2 
 2 files changed, 213 insertions(+), 5 deletions(-)

diff --git a/src/utils/components/init-map.vue b/src/utils/components/init-map.vue
index 3aebbca..3442bf7 100644
--- a/src/utils/components/init-map.vue
+++ b/src/utils/components/init-map.vue
@@ -12,7 +12,59 @@
         <el-input v-model="mergeNumber" placeholder="璇疯緭鍏ュ悎骞惰寖鍥�" type="number" style="width: 150px;"></el-input>
         <el-button  @click="mergePoint()" type="success">鍚堝苟</el-button>
         <el-button  @click="renderData()" type="success">鏁版嵁娓叉煋</el-button>
+        <!-- <el-button  @click="VisualCone()" type="success">鐢熸垚瑙嗛敟浣�</el-button> -->
 
+      </div>
+      <div class="key-container">
+        <div class="arrow-row">
+          <div
+              class="arrow"
+              :class="{ active: activeKey === 'w' }"
+            >W</div>
+          </div>
+          <div class="key-row">
+            <div
+              class="key"
+              :class="{ active: activeKey === 'a' }"
+              @mousedown="handleClick('a')"
+            >A</div>
+            <div
+              class="key"
+              :class="{ active: activeKey === 's' }"
+              @mousedown="handleClick('s')"
+            >S</div>
+            <div
+              class="key"
+              :class="{ active: activeKey === 'd' }"
+              @mousedown="handleClick('d')"
+            >D</div>
+          </div>
+      </div>
+      <div class="key-container">
+        <div class="arrow-row">
+          <div
+              class="arrow"
+              :class="{ active: activeKey === 'ArrowUp' }"
+              @mousedown="handleClick('ArrowUp')"
+            >鈫�</div>
+          </div>
+          <div class="key-row">
+            <div
+              class="key"
+              :class="{ active: activeKey === 'ArrowLeft' }"
+              @mousedown="handleClick('ArrowLeft')"
+            >鈫�</div>
+            <div
+              class="key"
+              :class="{ active: activeKey === 'ArrowDown' }"
+              @mousedown="handleClick('ArrowDown')"
+            >鈫�</div>
+            <div
+              class="key"
+              :class="{ active: activeKey === 'ArrowRight' }"
+              @mousedown="handleClick('ArrowRight')"
+            >鈫�</div>
+          </div>
       </div>
     </div>
 
@@ -74,7 +126,12 @@
           space: false,
         },
         animationFrameId: null,
-        mergeNumber:null
+        mergeNumber:null,
+        activeKey: null,
+        timer: null,
+        handler: null,
+      frustumPrimitive: null,
+      selected: false,
     }
   },
   mounted(){
@@ -84,6 +141,7 @@
     counter = 0
     this.removeKeyboardEvents();
     if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
+    window.removeEventListener("keydown", this.handleKeydown);
     if (viewerC) viewerC.destroy();
   },
   methods:{
@@ -201,6 +259,7 @@
       // 瀛樹笅鍥炶皟浠ヤ究閿�姣�
       // this._preRenderCallback = () => this.syncViewer();
       viewerM.scene.preRender.addEventListener( this.syncViewer());
+      window.addEventListener("keydown", this.handleKeydown);
     },
     syncViewer(){
       console.log(viewerM.camera)
@@ -471,6 +530,7 @@
       }
     },
     updateCameraMovement() {
+      console.log('111111111111111111111111111111111111111111')
       const camera = viewerC.camera;
       // Adjust speed by modifiers
       let currentSpeed = this.moveSpeed;
@@ -510,7 +570,7 @@
       }
       this.resetRoll();
       // Schedule next frame
-      this.animationFrameId = requestAnimationFrame(this.updateCameraMovement);
+      // this.animationFrameId = requestAnimationFrame(this.updateCameraMovement);
     }, 
     calculateDestinationPoint(lon1, lat1, bearing, distance, radius = 6371000) {
       const toRad = (d) => d * Math.PI / 180;
@@ -636,7 +696,114 @@
         latitude: Cesium.Math.toDegrees(cartographic.latitude),
         height: cartographic.height
       };
-    }
+    },
+    handleClick(key) {
+      this.triggerKey(key);
+    },
+    triggerKey(key) {
+      this.activeKey = key;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.activeKey = null;
+      }, 200);
+
+      // 鑷畾涔夊姩浣滆Е鍙�
+      console.log("Key triggered:", key);
+      // 杩欓噷鍙互鍙戝嚭浜嬩欢鎴栬皟鐢ㄥ叾瀹冩柟娉�
+    },
+    handleKeydown(e) {
+      const key = e.key;
+      console.log(key)
+      const validKeys = ["a", "s", "d", "w",'q','e','ArrowUp','ArrowDown','ArrowLeft','ArrowRight','q','e'];
+      if (validKeys.includes(key)) {
+        this.triggerKey(key);
+      }
+      this.updateCameraMovement()
+    },
+    VisualCone(){
+      this.addFrustum();
+      this.initDragHandler();
+    },
+    addFrustum() {
+      // 鍒涘缓涓�涓� PerspectiveFrustum
+      const frustum = new Cesium.PerspectiveFrustum({
+        fov: Cesium.Math.PI_OVER_THREE,
+        aspectRatio: 1.0,
+        near: 1.0,
+        far: 500.0,
+      });
+
+      // 璁剧疆鐭╅樀浣嶇疆
+      const position = Cesium.Cartesian3.fromDegrees(110.0, 30.0, 100.0);
+      const direction = Cesium.Cartesian3.normalize(
+        new Cesium.Cartesian3(1.0, 0.0, -1.0),
+        new Cesium.Cartesian3()
+      );
+      const up = Cesium.Cartesian3.UNIT_Z;
+      const right = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3());
+      const rotation = Cesium.Matrix3.setColumns(
+        new Cesium.Matrix3(),
+        right,
+        up,
+        Cesium.Cartesian3.negate(direction, new Cesium.Cartesian3())
+      );
+
+      const modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation, position);
+
+      this.frustumPrimitive = this.viewer.scene.primitives.add(
+        new Cesium.DebugCameraPrimitive({
+          frustum,
+          modelMatrix,
+          color: Cesium.Color.LIME.withAlpha(0.5),
+        })
+      );
+    },
+
+    initDragHandler() {
+      const scene = viewerM.scene;
+      const canvas = scene.canvas;
+      this.handler = new Cesium.ScreenSpaceEventHandler(canvas);
+
+      let isDragging = false;
+      let lastPosition = null;
+
+      this.handler.setInputAction((movement) => {
+        const pickedObject = scene.pick(movement.position);
+        if (pickedObject && pickedObject.primitive === this.frustumPrimitive) {
+          this.selected = true;
+          isDragging = true;
+          lastPosition = movement.position;
+        } else {
+          this.selected = false;
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+      this.handler.setInputAction((movement) => {
+        if (isDragging && this.selected) {
+          const start = scene.pickPosition(lastPosition);
+          const end = scene.pickPosition(movement.endPosition);
+          if (start && end) {
+            const delta = Cesium.Cartesian3.subtract(
+              end,
+              start,
+              new Cesium.Cartesian3()
+            );
+            const newMatrix = Cesium.Matrix4.multiplyByTranslation(
+              this.frustumPrimitive.modelMatrix,
+              delta,
+              new Cesium.Matrix4()
+            );
+            this.frustumPrimitive.modelMatrix = newMatrix;
+            lastPosition = movement.endPosition;
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+      this.handler.setInputAction(() => {
+        isDragging = false;
+        lastPosition = null;
+      }, Cesium.ScreenSpaceEventType.LEFT_UP);
+    },
   }
 }
 </script>
@@ -691,3 +858,46 @@
 .box_rb{width:10px;height:10px;position:absolute;border-bottom:2px solid #00d3e7;border-right:2px solid #00d3e7;right:0px;bottom:0px;}
 .box_lb{width:10px;height:10px;position:absolute;border-bottom:2px solid #00d3e7;border-left:2px solid #00d3e7;left:0px;bottom:0px;}
 </style>
+
+<style scoped>
+.key-container {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 8px 10px;
+  border-radius: 10px;
+  color: white;
+  font-family: sans-serif;
+  margin-top: 55px;
+}
+
+.arrow-row{
+  display: flex;
+  justify-content: center;
+  margin-bottom: 4px;
+}
+.key-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.arrow,
+.key {
+  width: 30px;
+  height: 30px;
+  margin: 0 2px;
+  background-color: #333;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+
+.arrow.active,
+.key.active {
+  background-color: #00aaff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/shootPoint/components/chooseModelDialog.vue b/src/views/system/shootPoint/components/chooseModelDialog.vue
index 585acfe..320911b 100644
--- a/src/views/system/shootPoint/components/chooseModelDialog.vue
+++ b/src/views/system/shootPoint/components/chooseModelDialog.vue
@@ -9,8 +9,6 @@
         <AppTable ref="AppTable"  :showDeptSearch="false" :url="'tower/model/list'" :tableColumns="tableColumns"  :showSearchBtn="false">
           <template #operator="{ row }">
             <el-button size="mini" type="text"
-              @click="clickRow(row)">棰勮</el-button>
-            <el-button size="mini" type="text"
               @click="chooseRow(row)">閫夋嫨</el-button>
           </template>
           <template #modelType="{ row }">

--
Gitblit v1.9.3