cesium修改HomeButton（主页键）的默认返回位置
（1）使用HomeButtonViewerModel的command属性来获取按钮被点击后所执行的命令。API：传送门
（2）在command的beforeExecute事件（命令执行之前），添加事件监听。API：传送门
（3） 用camera的flyTo方法设置返回位置。
具体实现代码如下：
// 修改homeButton的默认返回位置
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
e.cancel = true;
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 100000),
})
})
cesium实现键盘控制地图场景漫游效果
通过监听键盘字符输入来的动态调整相机位置和姿态角。
键盘输入字符和对应的相机操作如下表
键盘操作 含义 说明 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）修改相机参数
2.2具体代码
（1）代码调用 将核心功能封装成了keyboardMapRoaming.js，引入js后调用，代码如下：
//引入
import { keyboardMapRoamingInit } from './keyboardMapRoaming'
// 键盘控制漫游
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);
}
}
//导出
export {
keyboardMapRoamingInit
}
