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);
}
}