目录
自定义相机鼠标/键盘事件(Custom Camera mouse/keyboard events)
屏幕空间相机控制(Screen space camera controller)
速开始(Quick start)
Cesium相机控制着场景中的景象。有许多方法操作相机,例如旋转、缩放、平移和飞向目标。Cesium有默认的鼠标和触摸事件处理机制来与相机进行交互,以及程序化操作相机的API。本章教程介绍相机概念和相关的Cesium API。
让我们从示例开始,打开沙堡中的Hello W orld。默认情况下,场景处理相机鼠标和触摸的输入:
- 左点击并拖动-围绕3D球旋转相机,在2D和哥伦布视图中的地图表面转换相机;
- 右点击并拖动-缩放相机;
- 中间滚轮转动-也可以缩放相机;
- 中间点击并拖动-围绕球表面点旋转相机。
我们可以用setView函数程序化设置相机的位置和方位。参数是目的地和方位。位置可以是Cartesian3(笛卡尔)或Rectangle的实例,方位可以是偏航/俯仰/滚动或方向/向上。偏航、俯仰、滚动要求以弧度为单位。偏航围绕北向旋转,向东为正角并增加。俯仰围绕东北平面旋转,正俯仰角在平面上方,负俯仰在平面下方。滚动绕东向轴进行的第一次旋转。例如,像这样设置笛卡尔坐标:
camera.setView({
destination : new Cesium.Cartesian3(x, y, z),
orientation: {
heading : headingAngle,
pitch : pitchAngle,
roll : rollAngle
}
});
一个使用矩形设置坐标例子:
viewer.camera.setView({
destination : Cesium.Rectangle.fromDegrees(west, south, east, north),
orientation: {
heading : headingAngle,
pitch : pitchAngle,
roll : rollAngle
}
});
所有参数是可选的,任何未定义参数的默认值是当前相机位置、偏航、俯仰和滚动。
常用的设置是相机直视球,并且偏航朝着北:
camera.setView({
destination : Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
orientation: {
heading : 0.0,
pitch : -Cesium.Math.PI_OVER_TWO,
roll : 0.0
}
});
自定义相机鼠标/键盘事件(Custom Camera mouse/keyboard events)
我们创建自己的事件处理,其让相机朝向鼠标的方向,按下键向前、向后、向左、向右、向上和向下移动。让我们从禁止默认事件处理开始。添加如下的代码(在var viewer = …之后):
var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;
// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;
接下来&#