无锡网站制作.,校园网络平台建设方案,寮步镇做网站,建筑设计说明万能模板该类主要用于监听键盘事件并在用户按下不同按键时执行相应的相机操作#xff0c;如改变相机的位置、偏航角、俯仰角和翻滚角#xff0c;从而实现在三维场景中的漫游。
以下是代码的主要逻辑#xff1a; 导入Cesium库#xff0c;并定义一个flags对象#xff0c;其中包含了… 该类主要用于监听键盘事件并在用户按下不同按键时执行相应的相机操作如改变相机的位置、偏航角、俯仰角和翻滚角从而实现在三维场景中的漫游。
以下是代码的主要逻辑 导入Cesium库并定义一个flags对象其中包含了所有可能触发的键盘漫游状态标志。 keyboardRoam 类包含以下方法 start(viewer, setStep): 初始化键盘监听事件包括keydown和keyup事件并在每一帧clock onTick事件中执行funcTick函数以更新相机状态。同时禁用默认的鼠标移动地图和平移相机的功能。 hprSetting(h, p, r): 设置相机的Heading、Pitch、Roll即偏航角、俯仰角、翻滚角。 getFlagFromKeyboard(k): 根据按下的键盘按键返回对应的按键名称。 在funcTick函数中根据flags对象中的状态标志来更新相机的位置和姿态。 quit()方法用于销毁键盘监听事件以及恢复鼠标移动地图和平移相机的功能。
通过实例化 keyboardRoam 类并调用 start 方法可以启用键盘漫游功能调用 quit 方法则停止漫游并恢复默认的相机控制方式。 // 引入键盘漫游方法import keyboardRoam from ../utils/roam/keyboardRoam;// 键盘控制相机方法初始化keyboard new keyboardRoam();// 键盘控制相机方法开始keyboard.start(window.viewer, 1)// 键盘控制相机方法结束keyboard.quit();
import * as Cesium from cesium;
// 定义事件组
let flags {// 相机位置moveForward: false,moveBackward: false,moveLeft: false,moveRight: false,moveUp: false,moveDown: false,translateFront: false,translateBehind: false,// 相机姿态picthUp: false,picthDown: false,rollLeft: false,rollRight: false,headingLeft: false,headingRight: false,
};
let cameraHeight;
let heading;
let pitch;
let roll;
let funcTick;
/*** 键盘漫游*/
class keyboardRoam {/*** 键盘漫游加载方法* param: 使用键盘控制地图漫游,* param {Cesium.Viewer} viewer -cesium地图容器* param {Number} setStep -相机视角移动步长*/start(viewer, setStep) {let that this;// 添加键盘监听事件document.addEventListener(keydown,(this.down function (e) {let flagName that.getFlagFromKeyboard(e);if (typeof flagName ! undefined) {flags[flagName] true;}}),false);// 相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。viewer.scene.screenSpaceCameraController.enableTranslate false;// 相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。viewer.scene.screenSpaceCameraController.enableTilt false;document.addEventListener(keyup,(this.up function (e) {let flagName that.getFlagFromKeyboard(e);if (typeof flagName ! undefined) {flags[flagName] false;}}),false);console.log(funcTick, 0000);// 为每一帧添加监听事件let m viewer.clock.onTick.addEventListener( // 键盘按下事件funcTick () {let camera viewer.camera;let ellipsoid viewer.scene.globe.ellipsoid;cameraHeight ellipsoid.cartesianToCartographic(camera.position).height;// 根据相机高度设置移动距离let moveRate (cameraHeight / 150.0) * setStep;heading viewer.camera.heading;pitch viewer.camera.pitch;roll viewer.camera.roll;// 根据事件调整相机// 相机的偏航角、翻滚角和俯仰角// 偏航角if (flags.headingLeft) {that.hprSetting(-0.005 * setStep, 0, 0);}if (flags.headingRight) {that.hprSetting(0.005 * setStep, 0, 0);}// 俯仰角if (flags.picthUp) {that.hprSetting(0, 0.01 * setStep, 0);}if (flags.picthDown) {that.hprSetting(0, -0.01 * setStep, 0);}// 翻滚角if (flags.rollLeft) {that.hprSetting(0, 0, 0.01 * setStep);}if (flags.rollRight) {that.hprSetting(0, 0, -0.01 * setStep);}// 向中心点靠近if (flags.moveForward) {camera.moveForward(moveRate);}// 从中心点远离if (flags.moveBackward) {camera.moveBackward(moveRate);}// 相机本身前后左右上下平移if (flags.moveUp) {camera.moveUp(moveRate);}if (flags.moveDown) {camera.moveDown(moveRate);}if (flags.moveLeft) {camera.moveLeft(moveRate);}if (flags.moveRight) {camera.moveRight(moveRate);}// 相机向前平移if (flags.translateFront) {camera.rotateDown(Math.PI / 3600000 * setStep)}// 相机向后平移if (flags.translateBehind) {camera.rotateUp(Math.PI / 3600000 * setStep)}});return m;}// 相机翻滚角设置方法hprSetting(h, p, r) {viewer.camera.setView({orientation: {heading: heading h,pitch: pitch p,roll: roll r,},});}// 监听键盘按下和松开的状态getFlagFromKeyboard(k) {switch (k.key) {// 按字符的Unicode编码// 相机姿态case ArrowUp:return picthUp;case ArrowDown:return picthDown;case ArrowLeft:return headingLeft;case ArrowRight:return headingRight;case j:return rollRight;case l:return rollLeft;// 相机向屏幕中心点前进后退case i:return moveForward;case k:return moveBackward;// 相机前后左右上下平移case w:return translateFront;case s:return translateBehind;case a:return moveLeft;case d:return moveRight;case q:return moveUp;case e:return moveDown;default:return undefined;}}/*** 销毁键盘漫游事件*/quit() {document.removeEventListener(keydown, this.down, false);document.removeEventListener(keyup, this.up, false);viewer.clock.onTick.removeEventListener(funcTick);// 解除禁用鼠标移动地图事件viewer.scene.screenSpaceCameraController.enableTranslate true;// 解除视图锁定事件。viewer.scene.screenSpaceCameraController.enableTilt true;}
}
export default keyboardRoam;
