当前位置：首页 > article >正文

Cesium.js（6）：Cesium相机系统

article 2026/1/24 22:09:50

Camera表示观察场景的视角。通过操作摄像机，可以控制视图的位置、方向和角度。

帮助文档：Camera - Cesium Documentation

1 setView

setView 方法允许你指定相机的目标位置和姿态。你可以通过 Cartesian3 对象来指定目标位置，并通过 orientation 对象来设置相机的航向、俯仰和翻滚角。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);viewer.camera.setView({destination:position,orientation:{heading:Cesium.Math.toRadians(0),pitch:Cesium.Math.toRadians(-90),roll:0}})</script>
</body>
</html>

destination：接受两种类型，一个是Cartesian3，我们这里用鼠标点击获取到经纬度之后，转换成笛卡尔坐标系传递。另一个类型是Rectangle，这个我们在下边讲解。

orientation（欧拉角）：调整相机视角方向的；它有3个参数：heading、pitch、roll

heading 值为 0 时，指向正北方，随着数值变大，顺时针旋转（模型左右摆动），航向角，代表飞机的航向。
pitch 值为 0 时，相机前后保持水平，改变数值（模型上下摆动），负值时俯视，负得越大，越向下俯视，正值时仰视，正得越大，越向上仰视，这就是为什么用-180°-180°的角度范围，而不是0°-360°，很方便记忆和理解，俯仰角，俯（向下）为负，仰（向上）为正。
roll 值为 0 时，相机左右保持水平，改变数值（模型左右摆动），roll和pitch的表现类似，只是将前后变成了左右，左为负，右为正，用-180°-180°也很方便记忆和理解。

duration：飞行时间，单位秒；

您可以修改控件上的值，然后看每个值被修改后，相机是如何变化的，您会得出以下结论。

效果如下：

2 flyTo

flyTo 方法会让相机以动画的方式飞到指定的位置，你可以设置飞行时间和其他动画参数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);viewer.camera.flyTo({destination:position,orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-90),roll: 0},duration:5,})</script>
</body>
</html>

这里的参数和setView中的一致，这里就不讲解了。

效果如下：

启动后，会发现相机通过飞行的方式到底制定位置。

3 lookAt

lookAt 方法允许相机以某个位置为中心来确定位置和姿态。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const center = Cesium.Cartesian3.fromDegrees(116.39,39.91);const heading = Cesium.Math.toRadians(50);const pitch = Cesium.Math.toRadians(-90);const range = 2500;viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading,pitch,range));</script>
</body>
</html>

效果如下：

4 viewBoundingSphere

它的视角切换效果也是和setView方法一样，没有飞行过渡效果，直接切换视口到指定目的地。优点是可以指定玩目标点后，可以从多个角度更好的观测。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,1500);var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90,0,0));var entity = viewer.entities.add({position:position,orientation:orientation,model:{uri:"../../libs/models/Cesium_Air.glb",minimumPixelSize:100,maximumScale:10000,show:true}});viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0));</script>
</body>
</html>

效果如下：

无论如何移动相机的视角都是绑定在飞机模型上的，由此发现，当我们需要对一个物体进行多角度观测时，或者建筑物进行定点漫游时，我们就需要viewBoundingSphere方法。

Cesium.js（6）：Cesium相机系统

Camera表示观察场景的视角。通过操作摄像机，可以控制视图的位置、方向和角度。帮助文档：Camera - Cesium Documentation 1 setView setView 方法允许你指定相机的目标位置和姿态。你可以通过 Cartesian3 对象来指定目标位置，并通过 orien…...

编程日记 2026/1/20 20:37:36

AI 代码生成工具如何突破 Java 单元测试效能天花板？

一、传统单元测试的四大痛点时间黑洞：根据 JetBrains 调研，Java 开发者平均花费 35% 时间编写测试代码覆盖盲区：手工测试覆盖率普遍低于 60%（Jacoco 全球统计数据）维护困境：业务代码变更导致 38% 的测试用…...

编程日记 2026/1/20 16:47:35

AF3 ProteinDataset类的_patch方法解读

AlphaFold3 protein_dataset模块 ProteinDataset 类 _patch 方法的主要目的是围绕锚点残基（anchor residues）裁剪蛋白质数据，提取一个局部补丁（patch）作为模型输入。源代码： def _patch(self, data):"""Cut the data around the anchor residues."…...

编程日记 2025/12/18 16:21:45

客户端负载均衡与服务器端负载均衡详解

客户端负载均衡与服务器端负载均衡详解 1. 客户端负载均衡（Client-Side Load Balancing） 核心概念定义：负载均衡逻辑在客户端实现，客户端主动选择目标服务实例。典型场景：微服务内部调用（如Spring Cloud…...

编程日记 2026/1/20 20:42:29

vue-element-plus-admin的安装

文档链接：开始 | vue-element-plus-admin 之前尝试按照官方文档来安装，运行npm run dev命令却不能正常打开访问浏览器，换一个方式首先在目录下打开命令窗口 1、克隆项目从 GitHub 获取代码 # clone 代码 git clone https://github.com…...

编程日记 2025/11/28 0:53:48

基于springboot的“流浪动物管理系统”的设计与实现（源码+数据库+文档+PPT)

基于springboot的“流浪动物管理系统”的设计与实现（源码数据库文档PPT) 开发语言：Java 数据库：MySQL 技术：springboot 工具：IDEA/Ecilpse、Navicat、Maven 系统展示系统功能结构图局部E-R图系统首页界面系统…...

编程日记 2026/1/19 19:02:05

爬虫解决debbugger之替换文件

鼠鼠上次做一个网站的时候，遇到的debbugger问题，是通过打断点然后编辑断点解决的，现在鼠鼠又学会了一个新的技能首先需要大家下载一个reres的插件，这里最好用谷歌浏览器先请大家看看案例国家水质自动综合监管平台这里我们只…...

编程日记 2026/1/22 1:56:28

奇怪的电梯——DFS算法

题目题解每到一层楼都面临了两种选择：上还是下？因此我们可以定义一个布尔数组用来记录选择。终止条件其实也明显，要么到了B层，要么没有找到楼层。如果找到了，选择一个步骤少的方式。又怎么表示没有找到楼层&…...

编程日记 2026/1/20 19:48:09

Open GL ES-＞工厂设计模式包装 SurfaceView + 自定义EGL的OpenGL ES 渲染框架

XML文件 <?xml version"1.0" encoding"utf-8"?> <com.example.myapplication.EGLSurfaceView xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"…...

编程日记 2026/1/20 15:51:36

2.4goweb加解密和jwt

MD5的基本实现 1. 标准库调用 Go语言通过crypto/md5包提供MD5算法的实现。核心步骤包括： 创建哈希对象：使用md5.New()生成一个实现了hash.Hash接口的实例。写入数据：通过Write()方法或io.WriteString()将数据写入…...

编程日记 2025/12/9 8:44:35

深入解析多表联查（MySQL）

前言在面试中以及实际开发中，多表联查是每个程序员必备技能，下文通过最简单的学生表和课程表的实例帮大家最快入门多表联查技能。建立数据表 1. 学生表（students） 创建学生表 CREATE TABLE students (student_id INT AUTO_…...

编程日记 2026/1/18 16:08:02

宇视设备视频平台EasyCVR打造智慧酒店安防体系，筑牢安全防线

一、需求背景酒店作为人员流动频繁的场所，对安全保障与隐私保护有着极高的要求。为切实维护酒店内部公共区域的安全秩序，24小时不间断视频监控成为必要举措。通常情况下，酒店需在本地部署视频监控系统以供查看，部分连锁酒店还希…...

编程日记 2026/1/21 16:10:50

C++ 编程指南36 - 使用Pimpl模式实现稳定的ABI接口

一：概述 C 的类布局（尤其是私有成员变量）直接影响它的 ABI（应用二进制接口）。如果你在类中添加或修改了私有成员，即使接口不变，编译器生成的二进制布局也会变，从而导致 ABI 不兼容。…...

编程日记 2025/11/27 23:16:11

Linux中的文件传输（附加详细实验案例）

一、实验环境的设置 ①该实验需要两台主机，虚拟机名称为 L2 和 L3 ，在终端分别更改主机名为 node1 和 node2，在实验过程能够更好分辨。然后再重新打开终端，主机名便都更改了相应的名称。 ②用 ip a 的命令分别查看两个主机的 …...

编程日记 2026/1/20 4:19:39

基于 OpenHarmony 5.0 的星闪轻量型设备应用开发——Ch2 OpenHarmony LiteOS-M 内核应用开发

写在前面： 此篇是系列文章《基于 OpenHarmony5.0 的星闪轻量型设备应用开发》的第 2 章。本篇介绍了如何在 OpenHarmony 5.0 框架下，针对 WS63 进行 LiteOS-M 内核应用工程的开发。为了方便读者学习，需要OpenHarmony 5.0 WS63 SDK 的小伙伴可…...

编程日记 2026/1/20 11:12:39

论文阅读：2024-arxiv How to Steer LLM Latents for Hallucination Detection?

总目录大模型安全相关研究：https://blog.csdn.net/WhiffeYF/article/details/142132328 How to Steer LLM Latents for Hallucination Detection? https://arxiv.org/pdf/2503.01917 https://www.doubao.com/chat/2818934852496130 其它资料： https://blog.csdn.net/we…...

编程日记 2026/1/14 2:09:42

Linux--线程概念与控制

目录 1. Linux线程概念 1-1 什么是线程 1-2 分⻚式存储管理 1-2-1 虚拟地址和⻚表的由来 1-2-2 物理内存管理 1-2-3 ⻚表 1-2-4 ⻚⽬录结构 1-2-5 两级⻚表的地址转换 1-2-6 缺⻚异常 1-3 线程的优点 1-4 线程的缺点 1-5 线程异常 1-6 线程⽤途 2. Linux进程VS线…...

编程日记 2026/1/20 18:32:53

Python | kelvin波的水平空间结构

写在前面简单记录一下之前想画的一个图： 思路整体比较简单，两个子图，本质上就是一个带有投影，一个不带投影，通常用在EOF的空间模态和时间序列的绘制中，可以看看之前的几个详细的画法。 Python | El Ni…...

编程日记 2026/1/22 19:51:46

【音视频】SDL播放PCM音频

相关API 打开音频设备 int SDLCALL SDL_OpenAudio(SDL_AudioSpec * desired, SDL_AudioSpec * obtained); desired：期望的参数。obtained：实际音频设备的参数，一般情况下设置为NULL即可。 SDL_AudioSpec typedef struct SDL_AudioSpec { i…...

编程日记 2026/1/23 4:05:16

BERT - Bert模型框架复现

本节将实现一个基于Transformer架构的BERT模型。 1. MultiHeadAttention 类这个类实现了多头自注意力机制（Multi-Head Self-Attention），是Transformer架构的核心部分。在前几篇文章中均有讲解，直接上代码 class MultiHeadAtt…...

编程日记 2026/1/20 18:35:09

【LeetCode 热题100】二叉树遍历入门：从中序遍历到层序与右视图（力扣94 / 102/199）（Go语言版）

🌳 二叉树遍历入门：从中序遍历到层序与右视图本文涵盖 LeetCode 上的三道基础但极具代表性的二叉树遍历题： 二叉树的中序遍历二叉树的层序遍历二叉树的右视图通过这些题目，我们将从 DFS 到 BFS，深入理解如何处理…...

编程日记 2025/12/16 12:23:46

docker创建容器添加启动--restart选项

一、通过 Docker 命令直接修改已启动的容器（推荐-已验证） 操作步骤： 1.执行更新命令： docker update --restartalways <容器名或ID>此命令会将容器的重启策略调整为 always（无论容器以何种状态退出&#xff0…...

编程日记 2026/1/21 12:18:22

一文读懂WPF系列之常用控件以及样式

WPF控件控件分类概览常用控件常用控件代码示例和效果样式与模板应用样式定义方式行内样式页面/窗口级资源样式（Local Resource）应用程序全局资源独立资源字典（ResourceDictionary）控件模板（ControlTemplate&…...

编程日记 2026/1/22 21:11:47

嵌入式硬件篇---单片机周期

文章目录前言前言在单片机中，时序控制是其执行指令和协调外设的核心基础。以下是单片机中常见的各种周期及其详细说明，以层次结构展开： 时钟周期（Clock Cycle） 定义： 时钟周期是单片机的最小时间单位&a…...

编程日记 2025/11/27 17:21:12

【双指针】专题：LeetCode 283题解——移动零

移动零一、题目链接二、题目三、题目解析四、算法原理两个指针的作用以及三个区间总结五、与快速排序的联系六、编写代码七、时间复杂度、空间复杂度一、题目链接移动零二、题目三、题目解析 “保持非零元素的相对顺序”，比如，示例1中非零元素1…...

编程日记 2026/1/21 6:48:06

2025蓝桥杯JavaB组

说明博主自己水平有限，而且答案也不一定对，下面代码和思路仅作分享。我只把我考场上做了的写出来了，有什么问题欢迎评论区交流。 A：逃离高塔思路： 由于有了去年的经验，所以一上来我就是找规律&#xf…...

编程日记 2026/1/20 20:11:01

SQL学习--基础语法学习

SQL和excle对比学习目标单表查询项目背景 SQL 练习环境 SQL Online Compiler - Next gen SQL Editor 商品信息表：https://study-zhibo.oss-cn-shanghai.aliyuncs.com/test/%E5%95%86%E5%93%81%E4%BF%A1%E6%81%AF%E8%A1%A8.csv 订单明细表：https://…...

编程日记 2026/1/21 10:45:12

MATLAB2022b安装

1 从百度网盘下载MATLAB2022b，下载完成后解压到某个文件夹； 链接: MATLAB2022b 提取码: 6666 2 打开解压后的文件夹，进入setup文件夹，双击打开“setup.exe”文件； 3 在弹出窗口中选择“高级选项”-->“我有文件安…...

编程日记 2026/1/21 10:05:51

如何更改OCP与metadb集群的连接方式 —— OceanBase运维管理

背景许多用户都会借助OCP平台来进行OceanBase集群的运维与监控，且因为考虑单节点的OCP部署，在遇故障时可能会短时间出现无法管控 OceanBase集群，多数用户倾向于采用多节点方式来部署OCP，即 OCP的 metadb集群也是三节点的集群部署…...

编程日记 2025/11/26 16:36:46

HTTP实现心跳模块

HTTP实现心跳模块使用轻量级的cHTTP库cpp-httplib重现实现HTTP心跳模块头文件HttplibHeartbeat.h #ifndef HTTPLIB_HEARTBEAT_H #define HTTPLIB_HEARTBEAT_H#include <string> #include <thread> #include <atomic> #include <chrono> #include …...

编程日记 2026/1/22 12:27:59

1 setView

2 flyTo

3 lookAt

4 viewBoundingSphere

相关文章：