cesium实现键盘控制地图场景漫游效果

文章目录

1.实现效果
2.实现方法
- 2.1实现思路
- 2.2具体代码

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现方法

通过监听键盘字符输入来的动态调整相机位置和姿态角。

键盘输入字符和对应的相机操作如下表：

键盘操作	含义	说明
W	moveForward	相机前移
S	moveBackward	相机后移
A	moveLeft	相机左移
D	moveRight	相机右移
Q	moveUp	相机上移
E	moveDown	相机下移
↑	lookUp	抬头
↓	lookDown	低头
←	lookLeft	左转
→	lookRight	右转
0	twistLeft	顺时针转
.	twistRight	逆时针转
+	zoomIn	放大
-	zoomOut	缩小

2.1实现思路

（1）设置事件表
设置根据键盘输入的字符修改相机参数的事件表。（具体见下文代码）

当键盘被按下时，执行相机操作，键盘弹起时结束操作，防止误操作等。
（2）监听键盘输入
通过document监听键盘按下keydown和弹出keyup事件。

（3）为每帧渲染添加监听
监听clock的onTick事件，在每帧渲染时调用，API：传送门

（4）修改相机参数
通过Camera的相关方法进行设置，API：传送门

2.2具体代码

（1）代码调用
将核心功能封装成了keyboardMapRoaming.js，引入js后调用，代码如下：

// 键盘控制漫游
keyboardMapRoamingInit(viewer);

（2）具体函数
具体实现功能函数如下：

/** @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, false);document.addEventListener('keyup', keyUp, false);// 为每一帧添加监听事件_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 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) {let camera = _viewer.camera;let ellipsoid = _viewer.scene.globe.ellipsoid;let cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;// 根据相机高度设置移动距离，比默认距离移动效果更好let moveRate = cameraHeight / 20.0;if (flags.moveForward) {camera.moveForward(moveRate);}if (flags.moveBackward) {camera.moveBackward(moveRate);}if (flags.moveLeft) {camera.moveLeft(moveRate);}if (flags.moveRight) {camera.moveRight(moveRate);}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) {camera.zoomIn(cameraHeight / 2);}if (flags.zoomOut) {camera.zoomOut(cameraHeight / 2);}
}

cesium实现键盘控制地图场景漫游效果相关推荐

cesium实现键盘控制模型姿态变化效果
文章目录 1.实现效果 2.实现方法 2.1实现思路 2.2具体代码 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法参考官方沙盒示例:传送门 2.1实现思路 (1)加载模型使 ...
threejs 实现场景漫游效果（相机沿着自定义轨道移动）
一.先看看效果效果视频: Video_22-06-15_18-10-11 二.实现方法: 实现思路:先创建一条曲线curve作为运动路线,然后使用const points = curve.getPo ...
Cesium for Unreal 数据加载场景漫游粒子效果视频监控 VR预览
Cesium for Unreal: Cesium出了UE插件后一直没有时间学习体验,而且也从来没有接触过UE开发,只是在网上看过一些用UE做的数字孪生的案例,看上去确实是十分炫酷,正好最近工作不是很 ...
Cesium 事件详解（鼠标事件、相机事件、键盘事件、场景触发事件）
Cesium 事件详解(鼠标事件.相机事件.键盘事件.场景触发事件) 1 Cesium中的事件根据使用情况,我把Cesium中的事件大体分为三种,即屏幕空间事件处理程序,屏幕空间相机控制器,场景触发 ...
8 cocos2dx添加场景切换效果，控制场景切换彻底完成之后再执行动画
1 添加场景切换效果供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadial ...
高德地图水纹预警效果；高德地图控制可视行政区域
利用高德地图的"调节Shape属性"功能 <%@page language="java" contentType="text/html; cha ...
js 判断支持webgl_基于WebGL无插件虚拟场景漫游技术如何构建？ThingJS
#三维可视化##3D开发# WebGL, ThingJS及3DSMAX 虚拟场馆漫游技术构建基础组件加载三维模型实现虚拟漫游渲染优化如果要构建一个具有交互性和拓展性的沉浸式漫游场景,常用到3 ...
APE结合键盘控制角色运动转
在AS3物理引擎APE试用一文中,我简单记录了关于APE的基本调用,并实现了在重力作用环境下,一个自由落体的碰撞过程.现在我们把代码来改进一下,修改为一个横版的动作游戏场景(虽然目前它还算不上游戏,呵 ...
js判断是否支持webgl_基于WebGL无插件虚拟场景漫游关键技术（完全版）ThingJS
#三维可视化##3D开发# WebGL, ThingJS及3DSMAX 虚拟场馆漫游技术构建基础组件加载三维模型实现虚拟漫游渲染优化如果要构建一个具有交互性和拓展性的沉浸式漫游场景,常用到3 ...