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

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