Cesium 视角切换功能全解析「10 分钟掌握 Cesium 视角切换」

Cesium视角切换全解析

柳晓黑胡椒

已于 2025-09-08 14:50:44 修改

阅读量332

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # 再识Cesium 文章标签： cesium 视角切换

于 2025-09-03 08:48:37 首次发布

柳晓黑胡椒

本文链接：https://blog.youkuaiyun.com/hr_beginner/article/details/151135382

再识Cesium 专栏收录该内容

10 篇文章 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、优快云优质创作者
💟 作者：柳晓黑胡椒❣️
📝 专栏：再识Cesium
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

本文基于 Cesium 1.132 版本进行演示，其他版本在 API 上可能略有不同。

本文整理了常见的五大类切换方式，配合示例代码，你可以在实际项目中直接使用或二次封装，提升开发效率。
✨ 欢迎大家在评论区提出建议或交流心得，如果需要完整源码，可以私聊我获取。
cesium

Cesium 的视角切换是什么

Cesium 的视角切换是指通过相机（Camera）、实体（Entity）、瓦片（3DTiles）等对象的方法，来实现地球缩放、定位、跟踪、旋转等动态效果。它本质上是对相机位置（Camera Position）和方向（Orientation）的控制，从而让用户快速切换到不同的空间位置与观察角度。

Cesium 的视角切换的优点

交互直观：用户能快速聚焦到目标区域，减少手动操作。
增强体验：飞行动画和跟踪效果，让地图更有沉浸感。
业务友好：结合按钮、菜单、业务逻辑，可以一键跳转到目标位置，提升效率。
功能丰富：支持瞬间切换、平滑过渡、跟随跟踪等多种方式，满足不同需求。

方案与代码展示

一、地球

旋转入场动画

旋转入场动画可以增强地图进入时的视觉效果

const flyAnimation = () => {
  const flycenter = {x: 114.387137, y: 30.551429, z: 1e4}
  viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(flycenter.x, flycenter.y, 23000000)});
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(flycenter.x, flycenter.y, 15000000), // 设置位置
    duration: 3, // 设置飞行持续时间，默认会根据距离来计算
    flyOverLongitude: 117, // 如果到达目的地有2种方式，设置具体值后会强制选择方向飞过这个经度
    complete: () => viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(flycenter.x, flycenter.y, flycenter.z), // 设置位置
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0),
      },
      duration: 2,
      easingFunction: Cesium.EasingFunction.LINEAR_NONE,
      complete: () => 1
    })
  });
}

重置主视图

重置视图可以快速回到初始主界面(viewer 定义的视角)

viewer.camera.flyHome(1)

在这里插入图片描述

二、相机

zoomIn

zoomIn 用于相机快速放大

viewer.camera.zoomIn(1000)

在这里插入图片描述

zoomOut

zoomIn 用于相机快速缩小

viewer.camera.zoomOut(1000)

在这里插入图片描述

三、经纬度定位

setView（瞬间定位）

setView 可以瞬间切换到指定经纬度

viewer.camera.setView({
 destination: Cesium.Cartesian3.fromDegrees(114.347137, 30.541429, 2 * 1e4),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: Cesium.Math.toRadians(0)
  },
})

在这里插入图片描述

flyTo（飞行动画定位）

flyTo 可以平滑飞行到目标位置

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(114.347137, 30.541429, 2 * 1e4),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: Cesium.Math.toRadians(0)
  },
  duration: 2
})

在这里插入图片描述

四、实体

flyTo

飞行到实体位置

viewer.flyTo(entity)

在这里插入图片描述

zoomTo

缩放聚焦到实体范围

viewer.zoomTo(entity)

在这里插入图片描述

实体跟踪1

自动跟随实体位置移动

viewer.trackedEntity = entity

在这里插入图片描述

取消实体跟踪1

停止跟踪实体

viewer.trackedEntity = undefined

实体跟踪2（相机绑定）

相机实时锁定实体

viewer.camera.lookAt(entity.position.getValue(), new Cesium.Cartesian3(0, 0, 1000))

在这里插入图片描述

取消实体跟踪2

解除相机锁定

viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)

五、瓦片

flyTo

飞行到瓦片范围

viewer.flyTo(tileset)

在这里插入图片描述

zoomTo

缩放聚焦瓦片

viewer.zoomTo(tileset)

在这里插入图片描述

setView

瞬间切换到瓦片中心

viewer.camera.setView({
  destination: tileset.boundingSphere.center,
  orientation: {heading: 0, pitch: -Math.PI / 4, roll: 0}
})

在这里插入图片描述

viewBoundingSphere

相机调整到瓦片包围球范围，理解为一个半球，下层是一个圆，按照其半径画球

viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0))

在这里插入图片描述

flyToBoundingSphere

动画飞行到瓦片包围球范围

viewer.camera.flyToBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0))

在这里插入图片描述

瓦片跟踪

相机跟随瓦片位置

viewer.camera.lookAt(tileset.boundingSphere.center, new Cesium.Cartesian3(0, 0, 1000))

在这里插入图片描述

取消瓦片跟踪

停止跟随瓦片

viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)