代码迁移

src/Global/KeyBoard/index.js

@@ -0,0 +1,235 @@
+/*
+ * @Description: 使用键盘控制地图漫游
+ * @Version: 1.0
+ * @Author: Julian
+ * @Date: 2022-04-07 16:04:07
+ * @LastEditors: Julian
+ * @LastEditTime: 2022-04-07 18:40:40
+ */
+
+
+/**
+ * @description: 使用键盘控制地图漫游初始化
+ * @param {*} _viewer
+ * @return {*}
+ */
+function keyboardMapRoamingInit(_viewer) {
+  // 添加键盘监听事件
+  document.addEventListener('keydown', keyDown.bind(_viewer), false);
+  document.addEventListener('keyup', keyUp.bind(_viewer), false);
+
+  // 为每一帧添加监听事件
+  _viewer && _viewer.clock.onTick.addEventListener(function () {
+    keyboardMapRoamingRender(_viewer);
+  });
+}
+
+// 定义事件组
+let flags = {
+  // 相机位置
+  moveForward: false,
+  moveBackward: false,
+  moveLeft: false,
+  moveRight: false,
+  moveUp: false,
+  moveDown: false,
+  // 相机姿态
+  lookUp: false,
+  lookDown: false,
+  lookLeft: false,
+  lookRight: false,
+  twistLeft: false,
+  twistRight: false,
+  // 缩放
+  zoomIn: false,
+  zoomOut: false
+}
+
+
+// 相机位置：W：向前；S：向后；D：向右；A：向左；Q：升高；E：降低；
+// 相机姿态：↑：抬头；↓：低头；←：左转；→：右转；0：顺时针；.：逆时针
+// 缩放：+：放大，-：缩小；
+
+/**
+ * @description: 根据键盘输入字符返回事件信息
+ * @param {*} key
+ * @return {*}
+ */
+function getFlagFromKeyboard(key) {
+  switch (key) {
+    // 按字符的Unicode编码
+    // 相机位置
+    case 87:
+      return 'moveForward';
+    case 83:
+      return 'moveBackward';
+    case 68:
+      return 'moveRight';
+    case 65:
+      return 'moveLeft';
+    case 81:
+      return 'moveUp';
+    case 69:
+      return 'moveDown';
+    // 相机姿态
+    case 38:
+      return 'lookUp';
+    case 40:
+      return 'lookDown';
+    case 37:
+      return 'lookLeft';
+    case 39:
+      return 'lookRight';
+    case 96:
+      return 'twistLeft';
+    case 110:
+      return 'twistRight';
+    // 缩放
+    case 107:
+      return 'zoomIn';
+    case 109:
+      return 'zoomOut';
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * @description: 键盘按下
+ * @param {*} event
+ * @return {*}
+ */
+function keyDown(event) {
+  let _viewer = this
+  // 判断是否有输入框聚焦
+  function isInputFocused() {
+    const activeElement = document.activeElement;
+    return (activeElement.tagName.toLowerCase() === 'input' && activeElement.type !== 'checkbox') ||
+      activeElement.tagName.toLowerCase() === 'textarea' ||
+      activeElement.getAttribute('role') === 'textarea';
+  }
+
+  if (isInputFocused()) {
+    // console.log('页面上有输入框已经获取焦点');
+  } else if (_viewer.trackedEntity) {
+    // console.log('视角跟随中');
+  } else if (_viewer._firstPersonView) {
+    // console.log('第一人称视角中');
+  } else if (_viewer._disableKeyboardEvent) {
+    // console.log('禁用键盘事件');
+  } else if (event.ctrlKey && event.altKey) {
+    if (event.key === 'v' || event.key === 'V') {
+      let camera = _viewer.camera
+      _viewer._CAMERA_SHORTCUT_VIEW = {
+        orientation: { heading: camera.heading, pitch: camera.pitch, roll: camera.roll },
+        position: { x: camera.position.x, y: camera.position.y, z: camera.position.z }
+      }
+      localStorage.setItem('CAMERA_SHORTCUT_VIEW', JSON.stringify(_viewer._CAMERA_SHORTCUT_VIEW))
+    }
+    if (event.key === 'f' || event.key === 'F') {
+      let CAMERA_SHORTCUT_VIEW = localStorage.getItem('CAMERA_SHORTCUT_VIEW')
+      _viewer._CAMERA_SHORTCUT_VIEW = JSON.parse(CAMERA_SHORTCUT_VIEW)
+      if (_viewer._CAMERA_SHORTCUT_VIEW && _viewer._CAMERA_SHORTCUT_VIEW.position && _viewer._CAMERA_SHORTCUT_VIEW.orientation) {
+        _viewer.camera.flyTo({
+          destination: _viewer._CAMERA_SHORTCUT_VIEW.position,
+          orientation: _viewer._CAMERA_SHORTCUT_VIEW.orientation
+        })
+      }
+    }
+  } else {
+    // console.log('页面上没有输入框获取焦点');
+    let flagName = getFlagFromKeyboard(event.keyCode);
+    if (typeof flagName !== 'undefined') {
+      flags[flagName] = true;
+    }
+  }
+}
+
+/**
+ * @description: 键盘弹起
+ * @param {*} event
+ * @return {*}
+ */
+function keyUp(event) {
+  let flagName = getFlagFromKeyboard(event.keyCode);
+  if (typeof flagName !== 'undefined') {
+    flags[flagName] = false;
+  }
+}
+
+
+/**
+ * @description: 根据事件调整相机
+ * @param {*} _viewer
+ * @return {*}
+ */
+function keyboardMapRoamingRender(_viewer) {
+  if(!_viewer.scene.screenSpaceCameraController.enableTilt) {
+    return
+  }
+  let camera = _viewer.camera;
+  let ellipsoid = _viewer.scene.globe.ellipsoid;
+  let cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
+
+  // 根据相机高度设置移动距离，比默认距离移动效果更好
+  let moveRate = cameraHeight / 20.0;
+  let rotationRate = moveRate / 500000 / Cesium.Math.toDegrees(camera.pitch);
+
+  if (flags.moveForward) {
+    // camera.moveForward(moveRate);
+    camera.rotate(camera.right, -rotationRate);
+  }
+  if (flags.moveBackward) {
+    // camera.moveBackward(moveRate);
+    camera.rotate(camera.right, rotationRate);
+  }
+  if (flags.moveLeft) {
+    // camera.moveLeft(moveRate);
+    camera.rotate(camera.up, -rotationRate);
+  }
+  if (flags.moveRight) {
+    // camera.moveRight(moveRate);
+    camera.rotate(camera.up, rotationRate);
+  }
+  if (flags.moveUp) {
+    camera.moveUp(moveRate);
+  }
+  if (flags.moveDown) {
+    camera.moveDown(moveRate);
+  }
+  if (flags.lookUp) {
+    camera.lookUp();
+  }
+  if (flags.lookDown) {
+    camera.lookDown();
+  }
+  if (flags.lookLeft) {
+    camera.lookLeft();
+  }
+  if (flags.lookRight) {
+    camera.lookRight();
+  }
+  if (flags.twistLeft) {
+    camera.twistLeft();
+  }
+  if (flags.twistRight) {
+    camera.twistRight();
+  }
+  // 根据相机高度设置缩放参数
+  if (flags.zoomIn) {
+    let height = cameraHeight / 2
+    if (height < 1) {
+      height = 0
+    }
+    camera.zoomIn(height);
+  }
+  if (flags.zoomOut) {
+    let height = cameraHeight / 2
+    if ((cameraHeight + cameraHeight) >= 50000000) {
+      height = 50000000 - cameraHeight
+    }
+    camera.zoomOut(height);
+  }
+}
+
+export { keyboardMapRoamingInit }