创建模板优化键盘功能

jihongshun

20 小时以前 cee560775962d3141360e5297126abbcca8e58fb

 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>

@@ -36,8 +88,8 @@
let  viewerM;
let  viewerC;
let  counter = 0;
 let globalon  = 125.1949
let globalat = 46.5143
let  globalon  = 0
let  globalat = 0
let  pois = [globalon, globalat,0] 

// let  pois = [0, 0,0] 
@@ -74,22 +126,30 @@
          space: false,
        },
        animationFrameId: null,
        mergeNumber:null
        mergeNumber:null,
        activeKey: null,
        timer: null,
        handler: null,
      frustumPrimitive: null,
      selected: false,
    }
  },
  mounted(){
    console.log('111111111111111111')
     this.initCesium();
  },
  beforeDestroy() {
    counter = 0
    this.removeKeyboardEvents();
    if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
    window.removeEventListener("keydown", this.handleKeydown);
    if (viewerC) viewerC.destroy();
  },
  methods:{
    initCesium() {
      viewerM = this.initViewer(this.$refs.cesiumContainer.id);
      viewerC = this.initViewer(this.$refs.cesiumCamera.id);
      window.viewerM = viewerM;
      window.viewerC = viewerC;
      // 💡 在这里继续调用 measure.js / camera.js / botton.js 等逻辑
      // 例如：window.registerMeasureTools(viewerM)
      setTimeout(()=>{
@@ -147,7 +207,7 @@
      
      // // 关闭光照效果
      // viewer.scene.globe.enableLighting = false; // 关闭光照效果
      window.viewer = viewer;
      
    //    viewer.imageryLayers.add(bdtvectoranoimagery);
      viewer._cesiumWidget._creditContainer.style.display="none";  
      return viewer;
@@ -190,7 +250,6 @@
            orientation: orientations,
            model: {
                uri: url,
                scale: 20,
                shadows: Cesium.ShadowMode.DISABLED,
                imageBasedLightingFactor: new Cesium.Cartesian2(1, 0.5)
            }
@@ -200,6 +259,7 @@
      // 存下回调以便销毁
      // this._preRenderCallback = () => this.syncViewer();
      viewerM.scene.preRender.addEventListener( this.syncViewer());
      window.addEventListener("keydown", this.handleKeydown);
    },
    syncViewer(){
      console.log(viewerM.camera)
@@ -470,6 +530,7 @@
      }
    },
    updateCameraMovement() {
      console.log('111111111111111111111111111111111111111111')
      const camera = viewerC.camera;
      // Adjust speed by modifiers
      let currentSpeed = this.moveSpeed;
@@ -509,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;
@@ -635,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>
@@ -690,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>