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