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