标签：case false viewer 键盘 camera flags Cesium return 漫游
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘场景漫游</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.95.0/Cesium.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.95.0/Widgets/widgets.min.css"
type="text/css" />
<style>
html,
body,
#map3d {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
cursor: default;
}
</style>
</head>
<body>
<div id="map3d"></div>
<script>
var viewer = new Cesium.Viewer('map3d', {
animation: false, //是否创建动画小器件，左下角仪表
baseLayerPicker: false,//是否显示图层选择器,右上角按钮
fullscreenButton: false,//是否显示全屏按钮,右下角按钮
geocoder: false,//是否显示geocoder小器件，右上角查询按钮
homeButton: false,//是否显示Home按钮,右上角按钮
infoBox: false,//是否显示信息框
sceneModePicker: false,//是否显示3D/2D选择器 ,右上角按钮
selectionIndicator: false,//是否显示选取指示器组件，绿色选中框
timeline: false,//是否显示时间轴，底部
navigationHelpButton: false,//是否显示帮助按钮，右上角按钮
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
})
});
// 去除logo
viewer.cesiumWidget.creditContainer.style.display = "none";
// 显示帧率
viewer.scene.debugShowFramesPerSecond = true;
// 设置相机位置
viewer.camera.flyTo({
//飞行时间
duration: 3,
// 设置相机位置
destination: {
x: -2197288.7477713143,
y: 5183756.135738204,
z: 2988031.3792818813
},
orientation: {
// 初始视角
heading: 3.186236775911694,
pitch: -1.5634562274406978,
roll: 0
}
});
keyboardMapRoamingInit(viewer);
/**
* @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);
}
}
</script>
</body>
</html>
标签：case,
false,
viewer,
键盘,
camera,
flags,
Cesium,
return,
漫游
From： https://www.cnblogs.com/hustshu/p/17148327.html