Cesium 核心思想及基础概念应用

放逐者-保持本心，方可放逐2025-04-03 14:58

文章目录

    • [Cesium 基础理解（一）](#Cesium 基础理解（一）)
      • [1. 场景（Scene）](#1. 场景（Scene）)
      • [2. 查看器（Viewer）](#2. 查看器（Viewer）)
      • [3. 相机（Camera）](#3. 相机（Camera）)
      • [4. 实体（Entity）](#4. 实体（Entity）)
      • [5. 图元（Primitive）](#5. 图元（Primitive）)
      • [6. 数据加载与解析](#6. 数据加载与解析)
      • [7. 时间系统（TimeLine & Clock）](#7. 时间系统（TimeLine & Clock）)
      • [8. 坐标系与变换](#8. 坐标系与变换)
      • [9. 材质与着色器](#9. 材质与着色器)
      • [10. 交互与事件](#10. 交互与事件)
      • [11. 性能优化](#11. 性能优化)
      • [12. 扩展与插件](#12. 扩展与插件)
      • 总结
    • [Scene、Camera 和 Viewer 相关介绍](#Scene、Camera 和 Viewer 相关介绍)
      • 三者之间的关系
        • [1. `Viewer`](#1. Viewer)
        • [2. `Scene`](#2. Scene)
        • [3. `Camera`](#3. Camera)
      • 正确运用和理解
        • [1. `Viewer` 的运用](#1. Viewer 的运用)
        • [2. `Scene` 的运用](#2. Scene 的运用)
        • [3. `Camera` 的运用](#3. Camera 的运用)
    • [实体（Entity） 与 图元（Primitive）](#实体（Entity） 与 图元（Primitive）)
    • [Entity 或 Primitive 之 DataSource 与 Group](#Entity 或 Primitive 之 DataSource 与 Group)

Cesium 基础理解（一）

1. 场景（Scene）

  • 作用：负责渲染三维地球、地图、实体和其他可视化元素。
  • 功能：管理光照、阴影、雾效、大气效果等渲染属性。

2. 查看器（Viewer）

  • 作用：封装了常用的交互界面（如地图控制、时间轴、图层管理），提供快速初始化应用的入口。
  • 功能：包含相机控制、全屏切换、数据加载等预设功能。

3. 相机（Camera）

  • 作用：控制视角的位置、方向和投影方式（如透视投影或正交投影）。
  • 功能：支持自由飞行、路径动画、固定视角等模式。

4. 实体（Entity）

  • 作用：用于在场景中添加几何对象（点、线、面、模型等），并绑定属性（如颜色、标签、时间动态）。
  • 示例：飞机轨迹、建筑模型、气象数据标记等。

5. 图元（Primitive）

  • 作用：底层渲染对象，直接操作几何数据（如三角形网格），适合高性能需求场景。
  • 优化：支持分层细节（LOD）和实例化渲染。

6. 数据加载与解析

  • 支持格式：GeoJSON、KML、CZML（Cesium 自定义时间序列格式）、3D Tiles（大规模三维模型）等。
  • 数据源 ：通过 DataSource 管理外部数据的加载、更新和可视化。

7. 时间系统（TimeLine & Clock）

  • 作用：管理时间轴动画，支持动态数据（如车辆轨迹、气象变化）的时间驱动展示。
  • 功能：时间缩放、关键帧控制、实时数据同步。

8. 坐标系与变换

  • 核心类 ：Cartesian3（三维坐标）、Cartographic（经纬度高度）、Transforms（坐标系转换）。
  • 投影：墨卡托投影（Web Mercator）、地理坐标系（WGS84）等。

9. 材质与着色器

  • 作用：自定义对象外观，支持纹理、颜色渐变、动态效果（如流光、闪烁）。
  • 扩展：通过 GLSL 着色器实现复杂视觉效果（如水体涟漪、热力图）。

10. 交互与事件

  • 作用：处理鼠标、键盘、触摸等输入事件，支持自定义交互逻辑。
  • 示例：点击查询实体属性、拖拽调整相机位置。

11. 性能优化

  • 技术：层次细节（LOD）、延迟加载、异步渲染、WebGL 优化。
  • 工具：性能分析器（Profiler）帮助定位瓶颈。

12. 扩展与插件

  • 生态：支持第三方库（如 Three.js 模型导入）和自定义插件（如数据可视化工具）。
  • 社区资源：Cesium Sandcastle 提供丰富的代码示例。

总结

Cesium 通过上述核心元素，结合 WebGL 的高性能渲染能力，实现了三维地理信息的动态可视化与交互。开发者可根据需求灵活组合这些组件，构建从简单地图到复杂三维场景的应用。

Scene、Camera 和 Viewer 相关介绍

三者之间的关系

1. Viewer

Viewer 是 Cesium 中用于快速搭建三维地理信息系统应用的高级封装对象。它就像是一个完整的应用容器，初始化时会自动创建很多必要的组件，其中就包括 Scene 和 Camera。它为用户提供了一个包含地图控件、时间轴、图层管理等交互界面的完整应用环境。

2. Scene

Scene 是 Cesium 中负责渲染三维场景的核心对象。它管理着场景中的所有元素，比如地球、地形、模型、实体等，同时也处理光照、阴影、大气效果等渲染相关的属性。Viewer 在创建时会自动初始化一个 Scene 对象，用户可以通过 Viewer.scene 来访问这个场景。

3. Camera

Camera 控制着场景的视角，决定了用户从哪个位置、以什么方向和投影方式来观察场景。Viewer 同样会自动创建一个 Camera 对象，用户可以通过 Viewer.camera 来访问它。Camera 是 Scene 的一部分，它的状态变化会直接影响 Scene 的渲染结果。

可以简单理解为，Viewer 是一个完整的应用窗口，Scene 是这个窗口里展示的具体内容，而 Camera 则是观察这个内容的"眼睛"。

正确运用和理解

1. Viewer 的运用

Viewer 适用于快速搭建一个功能较为完整的三维地理信息系统应用。以下是一个简单的示例代码：

javascript 复制代码 
// 创建一个 Viewer 实例，它会自动初始化场景和相机
var viewer = new Cesium.Viewer('cesiumContainer');

// 可以通过 viewer 来添加数据，例如添加一个 KML 文件
var kmlOptions = {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas
};
viewer.dataSources.add(Cesium.KmlDataSource.load('path/to/your.kml', kmlOptions));

在这个示例中，我们创建了一个 Viewer 实例，并将其挂载到 cesiumContainer 这个 HTML 元素上。然后通过 viewer.dataSources.add 方法添加了一个 KML 文件。

2. Scene 的运用

Scene 主要用于管理场景的渲染属性和元素。以下是一些常见的操作示例：

javascript 复制代码 
// 获取 Viewer 中的 Scene 对象
var scene = viewer.scene;

// 设置场景的光照模式
scene.globe.enableLighting = true;

// 禁用大气效果
scene.skyAtmosphere.show = false;

// 在场景中添加一个实体
var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    point: {
        pixelSize: 10,
        color: Cesium.Color.YELLOW
    }
});

在这个示例中，我们通过 viewer.scene 获取了 Scene 对象，然后设置了光照模式和大气效果，最后在场景中添加了一个实体。

3. Camera 的运用

Camera 主要用于控制视角。以下是一些常见的相机操作示例：

javascript 复制代码 
// 获取 Viewer 中的 Camera 对象
var camera = viewer.camera;

// 设置相机的位置和方向
camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 5000),
    orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0),
        roll: 0.0
    }
});

// 相机飞行到指定位置
camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 5000),
    duration: 5 // 飞行时间为 5 秒
});

在这个示例中，我们通过 viewer.camera 获取了 Camera 对象，然后设置了相机的位置和方向，最后让相机飞行到指定位置。

综上所述，Viewer 提供了一个便捷的应用入口，Scene 负责场景的渲染管理，Camera 控制视角。在实际开发中，你可以根据需求灵活运用这三个对象来构建丰富的三维地理信息系统应用。

在 Cesium 中，Scene、Camera 和 Viewer 是三个非常重要的概念，下面为你详细介绍它们之间的关系以及如何正确运用和理解。

实体（Entity） 与 图元（Primitive）

在 Cesium 中，实体（Entity） 和 图元（Primitive） 是用于在三维场景中渲染几何对象的两种核心方式，它们的设计目标和应用场景有所不同。以下是它们的详细对比：

一、核心定义与区别

特性 实体（Entity） 图元（Primitive）
抽象层级 高层封装，提供简单易用的 API（如点、线、面、模型等） 底层渲染对象，直接操作几何数据（如三角形网格）
使用场景 快速开发、简单数据可视化（如标记点、路径、建筑模型等） 高性能需求、复杂几何处理（如大规模地形、3D Tiles 模型、自定义着色器效果）
灵活性 预设属性丰富（颜色、标签、动画等），但自定义能力有限 需手动管理几何数据和渲染参数，支持高度定制（如自定义着色器、顶点属性）
性能 中等（适用于中小规模数据） 更高（通过分层细节 LOD、实例化渲染等优化）

二、实体（Entity）

1. 核心作用
  • 快速创建几何对象 ：通过 viewer.entities.add() 方法直接添加点、线、面、模型等。
  • 封装常用属性：内置颜色、透明度、标签、时间动态等属性，无需手动处理底层渲染。
2. 典型应用场景
  • 数据标注：在地图上标记兴趣点（POI）。
  • 路径展示：飞机或车辆的移动轨迹。
  • 简单模型加载：如 KML/KMZ 文件中的建筑模型。
3. 示例代码
javascript 复制代码 
// 添加一个点实体
var pointEntity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-122.4175, 37.7749), // 经纬度坐标
  point: {
    pixelSize: 12, // 点的大小
    color: Cesium.Color.RED, // 颜色
    outlineColor: Cesium.Color.WHITE, // 描边颜色
    outlineWidth: 2 // 描边宽度
  },
  label: {
    text: "San Francisco", // 标签文本
    font: "14px sans-serif",
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM
  }
});

三、图元（Primitive）

1. 核心作用
  • 底层渲染控制：直接操作几何数据（顶点、索引、材质等），适合高性能场景。
  • 复杂效果支持：通过自定义着色器实现动态纹理、水体涟漪等高级效果。
2. 典型应用场景
  • 大规模三维模型：如 3D Tiles 格式的城市模型。
  • 地形与地质数据：分层细节（LOD）优化的地形渲染。
  • 自定义可视化：热力图、动态流线等复杂数据可视化。
3. 示例代码
javascript 复制代码 
// 创建一个立方体图元
var cubeGeometry = Cesium.GeometryPrimitives.createBoxGeometry({
  length: 100000,
  width: 100000,
  height: 100000
});

var cubePrimitive = new Cesium.GeometryPrimitive({
  geometry: cubeGeometry,
  appearance: new Cesium.MaterialAppearance({
    material: Cesium.Material.fromType('Color', {
      color: Cesium.Color.BLUE.withAlpha(0.5)
    })
  }),
  asynchronous: false
});

viewer.scene.primitives.add(cubePrimitive);

四、如何选择？

  1. 优先使用实体（Entity）：

    • 开发效率优先，快速验证功能。
    • 数据量较小，无需复杂渲染逻辑。

  2. 使用图元（Primitive）：

    • 处理大规模数据（如城市级 3D 模型）。
    • 需要自定义着色器或精细控制渲染性能。
    • 实现复杂可视化效果（如动态流体、自定义光照）。

五、关键补充

  • 实体与图元的关系 ：Cesium 的 Entity 本质上是对 Primitive 的封装，通过 Entity 添加的对象最终会被转换为 Primitive 进行渲染。
  • 性能优化 ：Primitive 支持分层细节（LOD）、实例化渲染（Instancing）等技术，适合处理百万级以上的几何对象。
  • 扩展能力 ：Primitive 允许直接操作 WebGL 资源，适合与 Three.js 等 3D 库结合使用。

通过合理选择实体和图元，可以兼顾开发效率与渲染性能，构建高效的三维地理信息应用。

Entity 或 Primitive 之 DataSource 与 Group

在 Cesium 中，实体（Entity） 和 图元（Primitive） 是三维场景的核心渲染对象，而 数据源（DataSource） 和 分组（Group） 则是用于组织和管理这些对象的重要概念。以下是它们之间的关系及正确运用方式：

一、核心概念对比

概念 作用 与实体/图元的关系
数据源（DataSource） 管理数据加载、解析和组织的容器（如 KML、GeoJSON、自定义数据） 实体的容器，通过 datasource.entities 管理一组实体，图元不直接关联数据源
分组（Group） 逻辑或物理上的对象集合，用于批量操作（如隐藏、移动、设置统一属性） 可包含实体或图元，通过 viewer.entities.addCollection() 或 scene.primitives.add() 管理

二、数据源（DataSource）与实体的关系

1. 数据源的作用
  • 数据加载：从外部文件（如 KML、GeoJSON）或自定义数据格式加载实体。
  • 生命周期管理 ：通过 viewer.dataSources.add() 添加数据源，自动处理数据的解析、更新和释放。
  • 统一控制 ：通过 datasource.visible 开关整个数据源的可见性。
2. 实体与数据源的绑定
javascript 复制代码 
// 创建数据源并添加实体
const dataSource = new Cesium.CustomDataSource('My Data');
const entity = dataSource.entities.add({
  position: Cesium.Cartesian3.fromDegrees(117.267, 31.861), // 合肥坐标
  point: { color: Cesium.Color.RED }
});

// 添加数据源到场景
viewer.dataSources.add(dataSource);
3. 关键特点
  • 动态更新：数据源支持实时更新实体属性（如位置、颜色）。
  • 性能优化 ：通过 datasource.isLoading 控制加载状态，避免阻塞主线程。

三、分组（Group）与实体/图元的关系

1. 分组的作用
  • 逻辑组织：将多个实体或图元归为一类（如"城市建筑"、"交通路线"）。
  • 批量操作：统一设置属性（如透明度）、隐藏/显示、删除。
  • 性能优化 ：通过 GroupPrimitive 合并图元，减少渲染调用。
2. 实体分组
javascript 复制代码 
// 创建实体分组
const group = new Cesium.EntityCollection();
group.add({
  position: Cesium.Cartesian3.fromDegrees(117.267, 31.861),
  point: { color: Cesium.Color.BLUE }
});

// 添加分组到场景
viewer.entities.addCollection(group);
3. 图元分组（GroupPrimitive）
javascript 复制代码 
// 创建多个图元并合并为GroupPrimitive
const primitives = [primitive1, primitive2, primitive3];
const groupPrimitive = new Cesium.GroupPrimitive({ primitives });

// 添加到场景
viewer.scene.primitives.add(groupPrimitive);
4. 关键特点
  • 层次化管理：分组可嵌套（如城市分组包含建筑分组、道路分组）。
  • 实例化渲染 ：GroupPrimitive 支持实例化，提升大规模图元渲染效率。

四、四者关系总结

  1. 数据源 → 实体

    • 数据源是实体的容器，通过 datasource.entities 管理一组实体。
    • 示例：加载 KML 文件生成多个实体，存入同一个数据源。

  2. 分组 → 实体/图元

    • 分组是独立于数据源的集合，可包含任意实体或图元。
    • 示例：将多个实体（来自不同数据源）放入同一分组，统一设置透明度。

  3. 图元与数据源的间接关联

    • 图元不直接关联数据源，但实体最终会被转换为图元渲染（通过 Entity#primitive 属性）。

五、典型应用场景

场景 使用方式
加载 KML 文件 使用 KmlDataSource 加载，自动生成实体并关联到数据源
管理动态数据 通过数据源的 entities 集合实时增删实体，保持数据一致性
优化大规模渲染 将相似图元合并为 GroupPrimitive，减少 WebGL 绘制调用
分层可视化 按业务逻辑创建分组（如"行政区"、"水系"），通过 viewer.entities 控制可见性

六、注意事项

  1. 数据源 vs 分组

    • 数据源侧重数据加载和生命周期管理，分组侧重对象组织和操作。
    • 一个数据源可包含多个分组，一个分组可包含多个数据源的实体。

  2. 性能优化

    • 避免在同一分组中混合大量实体和图元，优先使用 GroupPrimitive 合并图元。
    • 通过 viewer.entities 或 scene.primitives 的 removeAll() 及时释放资源。

通过合理使用数据源和分组，可以高效管理三维场景中的实体和图元，提升开发效率和渲染性能。

相关推荐
Damon_X5 天前
Pre-flash和Main flash
camera
该怎么办呢7 天前
Cesium双击放大地图
javascript·cesium·webgis
DragonBallSuper8 天前
在Cesium中使用ThreeJs材质(不是场景融合哦）
webgl·材质·threejs·cesium·可视化渲染
前端付杰8 天前
轻松搞定 TIFF：基于 Three.js 和 Cesium 的渲染技巧分享
前端·three.js·cesium
汪洪墩10 天前
知道自己鼠标在某个竖直平面上的经纬度信息在这个竖直的平面上的实时坐标
服务器·前端·cesium
GISBox11 天前
PLY格式文件如何转换成3DTiles格式——使用GISBox软件实现高效转换
arcgis·信息可视化·node.js·gis·webgl·cesium
瑾凌12 天前
Cesium 自定义路径导航材质
前端·javascript·vue.js·vue·材质·cesium
幸会同学18 天前
使用three-to-cesium.js轻松融合Three和Cesium场景
three.js·cesium
Damon_X22 天前
Android : Camera之CHI API
android·camera
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】