Cesium 相机系统

Cesium 的相机系统是其 3D 地球渲染引擎的重要组成部分,它控制用户在虚拟地球上的视图和交互体验。Cesium 的相机系统具备灵活性和强大的功能,允许开发者自定义视图、导航和交互方式。以下是 Cesium 相机系统的主要特点和功能:


1. 相机的基本概念

在 Cesium 中,相机表示为一个对象,包含位置、方向和视野范围等属性。相机的核心属性包括:

  • 位置(position):相机在世界坐标系中的位置,通常以 Cartesian3 表示。
  • 方向(direction):相机的朝向,即相机镜头的指向。
  • 上方向(up):定义相机的"上"方向。
  • 右方向(right):定义相机的"右"方向,通常与方向和上方向正交。

相机的这些方向属性决定了相机的视角和观察范围。


2. 视图控制功能

Cesium 提供了一组函数,用于控制相机视图的切换和动画:

  • 设置视图(setView):

    javascript 复制代码
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
        orientation: {
            heading: Cesium.Math.toRadians(heading),  // 朝向(方位角)
            pitch: Cesium.Math.toRadians(pitch),      // 倾斜角
            roll: Cesium.Math.toRadians(roll)         // 旋转角
        }
    });

    用于直接跳转到指定视图。

  • 飞行到视图(flyTo):

    javascript 复制代码
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
        duration: 5, // 飞行时间
        orientation: {
            heading: Cesium.Math.toRadians(heading),
            pitch: Cesium.Math.toRadians(pitch),
            roll: Cesium.Math.toRadians(roll)
        }
    });

    为用户提供平滑的动画过渡效果。

  • 缩放和倾斜:

    • camera.zoomIn(amount):放大视图。
    • camera.zoomOut(amount):缩小视图。
    • 通过调整 pitch 实现视角倾斜。

3. 相机限制

Cesium 支持为相机视图添加限制,以防止用户查看超出指定范围的区域:

  • 范围限制 :

    javascript 复制代码
    camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z; // 限制相机只能绕 Z 轴旋转
  • 矩形范围约束 :

    javascript 复制代码
    camera.lookAtRectangle(Cesium.Rectangle.fromDegrees(west, south, east, north));

4. 事件监听

Cesium 支持监听用户与相机交互的事件,例如鼠标滚轮缩放、拖动地图等。主要的事件有:

  • 鼠标操作事件 :通过 ScreenSpaceEventHandler 实现。

    javascript 复制代码
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function (movement) {
        var cartesian = viewer.camera.pickEllipsoid(movement.endPosition);
        console.log(cartesian);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

5. 相机视锥

相机的视锥决定了视图中显示的内容。主要参数包括:

  • 视锥角(Field of View, FOV) :
    相机的视锥角可以通过 camera.frustum 属性设置:

    javascript 复制代码
    viewer.camera.frustum.fov = Cesium.Math.toRadians(60); // 设置为60度
  • 视距范围(Near/Far Clipping Planes) :
    控制相机视锥的近剪裁面和远剪裁面:

    javascript 复制代码
    viewer.camera.frustum.near = 1.0; // 最小可见距离
    viewer.camera.frustum.far = 5000000.0; // 最大可见距离

6. 自由视角与锁定目标

  • 自由视角:用户可以通过鼠标或触摸手势自由调整相机。

  • 锁定目标 :使用 lookAt 方法使相机聚焦在特定目标上:

    javascript 复制代码
    var target = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
    viewer.camera.lookAt(target, new Cesium.Cartesian3(0, 0, 1000)); // 锁定目标,设置偏移量

7. 第三人称/第一人称视角

Cesium 支持模拟第三人称(鸟瞰)和第一人称(地面)视角切换:

  • 第三人称视角:通常使用较高的视距和倾斜角。

  • 第一人称视角:

    javascript 复制代码
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
        orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-90),
            roll: Cesium.Math.toRadians(0)
        }
    });

Cesium 的相机系统功能丰富,可满足从简单的视图控制到复杂的交互和动画效果等各种需求。

相关推荐
福兮说2 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
凤城老人4 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)4 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan4 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_5 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
yivifu6 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
weixin_448290257 小时前
书庐开发实战教学
javascript·css·html
默_笙7 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript
一木 之林7 小时前
DeepSeek Agent 开发(一)
开发语言·前端·javascript
樱花落木兰9 小时前
分布式登录实战:Session 会话共享改造,Redis 存储用户登录状态
java·javascript·数据库·redis·分布式·缓存