Cesium中级教程3 - Camera - 相机（摄像机）

最新推荐文章于 2024-09-20 15:19:46 发布

Cesium中文网

最新推荐文章于 2024-09-20 15:19:46 发布

阅读量2.2k

点赞数 1

分类专栏： cesiumjs 文章标签： cesium cesiumjs GIS WebGIS

本文链接：https://blog.csdn.net/weixin_43736464/article/details/90385734

版权

本文是Cesium中级教程的一部分，详细介绍了Camera的基本操作、默认行为，以及如何自定义Camera的鼠标和键盘事件。通过示例展示了如何设置Camera的位置、方向，以及如何使用Screen space camera controller实现更丰富的用户交互。同时提供了API文档和相关资源链接，帮助开发者更好地掌握Cesium中的Camera控制技术。

摘要由CSDN通过智能技术生成

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Camera

CesiumJS中的Camera控制场景的视图。有很多方法可以操作Camera，如旋转(rotate)、缩放(zoom)、平移(pan)和飞到目的地(flyTo)。CesiumJS有鼠标和触摸事件用来处理与Camrea的交互，还有API来以编程方式操作摄像机。了解如何使用Camera API和自定义相机控制(Camera controls)。

默认Camera行为

打开Sandcastle中的Hello World样例用来体验默认的相机控制。默认操作方式如下：

鼠标操作	3D	2D	Columbus视角
Left click + drag	Rotate around the globe	Translate over the map	Translate over the map
Right click + drag	Zoom in and out	Zoom in and out	Zoom in and out
Middle wheel scrolling	Zoom in and out	Zoom in and out	Zoom in and out
Middle click + drag	Tilt the globe	No action	Tilt the map

鼠标操作	3D	2D	Columbus视角
左键 + 拖拽	旋转地球	在地图上移动	在地图上移动
右键 + 拖拽	缩放	缩放	缩放
中键滚轮	缩放	缩放	缩放
中键 + 拖拽	倾斜地球	无操作	倾斜地球

使用setView函数设置Camera的位置和方向。destination可以是Cartesian3或Rectangle，orientation可以是heading/pitch/roll或direction/up。航向角、俯仰角和横滚角以弧度定义。航向角是从正角度向东增加的局部北向旋转。俯仰角是指从局部的东北平面开始的旋转。正俯仰角在平面上方。负俯仰角在平面以下。很滚叫是围绕局部东轴应用的第一个旋转。

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的位置和方向。

自定义Camera鼠标或者键盘事件

创建我们自己的事件控制，根据鼠标的朝向用于控制Camera的朝向，键盘的按键控制Camera向前、向左、向右、向上，以及向下。首先从禁用默认事件操作开始。在（javascript var viewe=...）之后添加下列代码：

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;

创建变量记录当前鼠标位置，然后标记并跟随Camera移动轨迹：

var startMousePosition;
var mousePosition;
var flags = {
   
    looking : false,
    moveForward : false,
    moveBackward : false,
    moveUp : false,
    moveDown : false,
    moveLeft : false,
    moveRight : false
};

添加一个事件控制用户设置标记，当鼠标左键被点击的时候，用于记录当前鼠标的位置：

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
   
    flags.looking = true;
    mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN