Cesium中文教程-相机(Camera)

目录

快速开始(Quick start)

自定义相机鼠标/键盘事件(Custom Camera mouse/keyboard events)

相机(Camera)

屏幕空间相机控制(Screen space camera controller)

资源(Resources)

---

速开始(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;  

接下来，创建变量来记录当前鼠标的位置，并标记跟踪相机的移动：

var startMousePosition;  
var mousePosition;  
var flags = {  
    looking : false,  
    moveForward : false,  
    moveBackward