search

Marinerer / store

转载 && 收藏 && 乱七八糟 :clap:
65 stars 10 forks source link

CesiumJS 学习 #52

Open Marinerer opened 8 months ago

Marinerer commented 8 months ago

大纲

Marinerer commented 8 months ago

.

Marinerer commented 8 months ago

CesiumJS 文档

Cesium 是什么

Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 JavaScript 库，它使用 WebGL 来进行硬件加速图形，在使用时不需要任何插件支持（但是浏览器必须支持 WebGL），它提供了基于 JavaScript 语言的开发包，方便用户快速搭建一款零插件的虚拟地球 Web 应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。

它支持 3D, 2.5D, 2D 形式的地图展示，可以用来显示海量 三维模型数据、影像数据、地形高程数据、矢量数据等等。同时也可以自行 绘制图形，高亮区域等，且支持绝大多数的浏览器和移动端。

Cesium是基于Apache2.0许可的开源程序，它可以免费的用于商业和非商业用途。

Cesium 能做什么

Cesium 支持的数据格式

常见功能

1. 场景创建

  1. 创建基本场景

创建基本场景及设置地球的初始位置、相机的视角和环境光照等参数。

new Cesium.Viewer(container, options)
  1. 加载地形数据

Cesium支持加载高程数据以呈现真实的地形效果。

new Cesium.CesiumTerrainProvider(options)

2. 地理信息展示

  1. 添加3D模型

Cesium支持添加各种格式的3D模型，如Collada、glTF等。

  1. 显示矢量数据

Cesium支持加载和显示矢量数据，如点、线、面等。比如加载 GeoJSON格式数据：

Cesium.GeoJsonDataSource.load('./data.geojson)

3. 相机控制

  1. 相机飞行

Cesium提供了相机飞行的功能，可以平滑过渡到指定的位置和视角。

  1. 添加相机标注

Cesium支持在场景中添加相机标注，用于标记特定位置的相机视角。

4. 图层叠加

  1. 加载影像数据

Cesium支持加载各种类型的影像数据，如WMS服务、TMS服务、ArcGIS MapServer等。

new Cesium.WebMapServiceImageryProvider(options)
  1. 叠加地形数据

除了加载影像数据外，Cesium还支持叠加地形数据，以增强地理信息展示效果。

new Cesium.CesiumTerrainProvider(options)

5. 交互操作

  1. 鼠标交互

Cesium支持鼠标交互操作，如平移、缩放、旋转等。

new Cesium.ScreenSpaceEventHandler(element);
  1. 键盘交互

Cesium还支持键盘交互操作，你可以通过监听键盘事件来实现自定义的交互功能。

概念

Viewer 视图

Viewer是Cesium的主窗口，它封装了创建和管理三维场景所需的大部分底层功能。Viewer为开发者提供了一个高级API,使得开发人员可以非常方便地加载和渲染各种格式的地理数据,如影像、三维模型、地形等。同时,Viewer还提供了一些预置的用户界面元素,如导航控件、时间轴控件等,这些控件可以帮助用户与三维场景进行交互。

Viewer对象主要包括如下属性：

Scene 场景

Scene是Cesium中表示三维虚拟世界的核心对象。它维护了场景的整个状态，包括相机、光源、地形、primitives(基本图形)、billboards(广告牌)等。Scene对象负责组织和渲染这些对象,并对它们应用相关的变换、材质和渲染状态。

Cesium 开发大多基于 Scene 类，其主要包含四部分内容：

Viewer和Scene是Cesium中构建三维地球场景的两个核心类。Viewer类负责创建和管理Scene对象，并提供一些用于控制场景的工具和控件。Scene类则负责渲染场景中的所有元素和状态管理。

Camera 相机

Cesium 通过 Camera 定义视点和视角，是三维场景观察的关键要素。它可以控制观察者在场景中的位置、方向、以及视野范围。使用相机Camera操作场景分为如下几类：

其他

CesiumJS API

坐标系及坐标变换

在GIS中，我们遇到的坐标系一般有两种：

地理坐标系经过投影后变成投影坐标系，投影坐标系因此由地理坐标系和投影组成，投影坐标系必然包括有一个地理坐标系

在 Cesium 中共有 4 种坐标表示方法：

常用坐标系

坐标系是用来确定物体在地球上位置的参考系统。它定义了经度、纬度和高程等地理位置的测量方法。不同的坐标系使用不同的参考点和测量方法，因此会导致同一个地物的坐标值不同。

坐标系 简介 使用范围
WGS84 世界大地坐标系1984，是目前国际上通用的全球卫星定位系统（GPS）使用的坐标系。 GPS、谷歌地图、高德地图、腾讯地图
CGCS2000 中国大地坐标系2000，是由中国国家测绘局制定的国家标准坐标系。 国家天地图
GCJ-02 火星坐标系，是由中国国家测绘局制定的地理坐标系统，是由WGS84加密后得到的坐标系。 高德地图、腾讯地图
BD-09 百度坐标系，是在GCJ-02基础上再一次加密的坐标系，用来保护用户隐私。 百度地图
  1. WGS84和CGCS2000是地球坐标系，它们之间相差很小(经度相同，纬度上存有0.11mm上下的区别)，可以近似认为是同一个坐标系。GCJ-02是WGS84经过加密后的坐标系，与WGS84和CGCS2000存在一定的偏移。
  2. BD-09是GCJ-02经过二次加密后的坐标系，与GCJ-02存在一定的偏移。

坐标系拾取

Entity和Primitive

Entity 和 Primitive 是Cesium中用于绘制三维对象的两个重要类。

Entity 实体

Entity是Cesium中用于表示具有特定位置、方向、大小和样式的地理或非地理对象的抽象概念。Entity通常用于表示地图上的点、线、面、模型等，它们可以包含多个属性（Property），这些属性可以是静态的，也可以是动态随时间变化的。Entity的属性包括位置（position）、方向（orientation）、缩放（scale）、颜色（color）等。

Entity的一个重要特点是它们可以包含多个子Entity，形成一个层次结构。这种结构使得Entity非常适合表示复杂的地理信息和构建复杂的场景。例如，一个Entity可以代表一个城市，它的子Entity可以代表城市中的建筑物、道路、公园等。

Primitive 原始对象 (几何体)

Primitive是Cesium中用于构建基本几何形状的对象，如点、线、多边形等。它们是构建更复杂Entity的基础。Primitive不包含位置信息，它们的位置是由包含它们的Entity决定的。Primitive可以有材质（Material），这使得它们可以显示不同的纹理和颜色。

Primitive通常用于创建地图上的简单几何图形，如在地图上绘制一个矩形区域（RectanglePrimitive）、一条线（PolylinePrimitive）或一个点（PointPrimitive）。它们也可以用于创建更复杂的结构，如通过组合多个Primitive来构建三维模型（ModelPrimitive）。

总结 ：

总结来说，Entity是构建复杂场景的基本单元，它们可以包含位置、属性和子对象。而Primitive是构建Entity的基础，它们是基本的几何形状，通常用于创建简单的视觉效果。

事件

Cesium中的事件包含 鼠标事件、相机事件、键盘事件、场景触发事件 以及其他一些事件，例如实体事件、动画事件、时间线事件等。

根据使用情况，可以把Cesium中的事件大体分为三种，即

  1. 屏幕空间事件处理程序 Cesium.ScreenSpaceEventHandler
  2. 屏幕空间相机控制器 viewer.scene.screenSpaceCameraController
  3. 场景触发事件

1. 屏幕空间事件处理程序

屏幕空间事件处理程序，对应API中的 Cesium.ScreenSpaceEventHandler 。官方解释是，处理用户输入事件，可以添加自定义函数，以便在用户输入时执行。可以理解为我们常说的鼠标事件（或键盘事件），是与鼠标和键盘输入相关的事件处理程序。 使用时，我们需要先对 ScreenSpaceEventHandler 类进行实例化，再注册事件或注销事件。

const handler = new Cesium.ScreenSpaceEventHandler(HTMLCanvasElement);

//绑定屏幕空间事件
handler.setInputAction(action, type, modifier)

//移除屏幕空间事件
handler.removeInputAction(type, modifier)

//返回要在输入事件上执行的函数。
handler.getInputAction(type, modifier)

屏幕空间事件类型

屏幕空间事件类型(ScreenSpaceEventType), 此 枚举类型 用于对鼠标事件进行分类：向下、向上、单击、双击、移动和按住按钮时移动。

名称 类型 描述
LEFT_DOWN number 表示鼠标左键按下事件。
LEFT_UP number 表示鼠标左键向上事件。
LEFT_CLICK number 表示鼠标左键单击事件。
LEFT_DOUBLE_CLICK number 表示鼠标左键双击事件。
RIGHT_DOWN number 表示鼠标左键按下事件。
RIGHT_UP number 表示鼠标右键向上事件。
RIGHT_CLICK number 表示鼠标右键单击事件。
MIDDLE_DOWN number 表示鼠标中键按下事件。
MIDDLE_UP number 表示鼠标中键向上事件。
MIDDLE_CLICK number 表示鼠标中键单击事件。
MOUSE_MOVE number 表示鼠标移动事件。
WHEEL number 表示鼠标滚轮事件。
PINCH_START number 表示触摸表面上的两指事件的开始。
PINCH_END number 表示触摸表面上的两指事件的结束。
PINCH_MOVE number 表示触摸表面上两指事件的变化。

示例

Cesium.ScreenSpaceEventType.LEFT_CLICK

键盘修饰符类型

键盘修饰符类型（KeyboardEventModifier），此枚举类型用于表示键盘修饰符。除了其他事件类型之外，还按住这些键。

名称 类型 描述
SHIFT number 表示shift键被按下。
CTRL number 表示ctrl键被按下。
ALT number 表示alt键被按下。

示例

Cesium.ScreenSpaceEventType.LEFT_CLICK

键盘修饰符 不可以单独使用，需要配合鼠标输入事件使用。

示例代码

// 绑定屏幕空间事件 (设置鼠标左键点击事件)
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(event){
    console.log('shift + 左键单击', event.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

// 移除屏幕空间事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

2. 屏幕空间相机控制器

根据在画布上的鼠标输入修改摄像机的位置和方向。可以理解为我们常说的相机事件，是与相机控制相关的事件处理程序。 Cesium在 Viewer 类的实例化过程中，也实例化了其他很多类，其中就包括 ScreenSpaceCameraController 类，并把实例化结果赋给了 viewer.scene.screenSpaceCameraController ，所以我们在使用时可以直接操作 viewer.scene.screenSpaceCameraController。 另外，我们可以更改默认操作模式。

相机事件类型

相机事件类型（CameraEventType），此枚举用于与相机交互的可用输入。（查看文档）

名称 类型 描述
LEFT_DRAG number 按下鼠标左键，然后移动鼠标并松开按钮。
RIGHT_DRAG number 按下鼠标右键，然后移动鼠标并松开按钮。
MIDDLE_DRAG number 按下鼠标中键，然后移动鼠标并松开按钮。
WHEEL number 滚动鼠标中键滚轮。
PINCH number 双指触控屏幕。

默认操作模式

操作 3D视图 2.5D视图 2D视图
LEFT_DRAG 绕地球旋转 地图上平移 地图上平移
RIGHT_DRAG 地图缩放 地图缩放 地图缩放
MIDDLE_DRAG 倾斜地球 倾斜地图 无
WHEEL 地图缩放 地图缩放 地图缩放
PINCH 倾斜地球 倾斜地图 无
CTRL + LEFT_DRAG 倾斜地球 倾斜地图 无
CTRL + RIGHT_DRAG 倾斜地球 倾斜地图 无

修改默认操作模式

如果需要改变默认操作模式，可以在初始化地球之后，通过改变 ScreenSpaceCameraController 的几个属性来实现。

属性名 类型 描述
lookEventTypes CameraEventType|Array|undefined 3D视图、2.5D视图改变相机观察方向
rotateEventTypes CameraEventType|Array|undefined 3D视图相机绕地球旋转
tiltEventTypes CameraEventType|Array|undefined 3D视图、2.5D视图倾斜视角
translateEventTypes CameraEventType|Array|undefined 2.5D视图、2D视图地图上平移
zoomEventTypes CameraEventType|Array|undefined 地图缩放

示例：

// 1. 将默认`倾斜视图操作`修改为仅鼠标右键触发
viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG];
// 2. 将`倾斜视图操作`修改为以下4种触发方式
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.RIGHT_DRAG, //使用鼠标右键拖拽来倾斜相机
    Cesium.CameraEventType.PINCH, //使用双指缩放来倾斜相机
    //按住 Ctrl 键的同时使用鼠标左键拖拽来倾斜相机。
    {
        eventType: Cesium.CameraEventType.LEFT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
    },
    //按住 Ctrl 键的同时使用鼠标右键拖拽来倾斜相机。
    {
        eventType: Cesium.CameraEventType.RIGHT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
    },
];

// 1. 将默认`视图缩放操作`修改为仅鼠标滚轮滚动
viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL];
// 2. 将`视图缩放操作`修改为以下3种触发方式
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.MIDDLE_DRAG,
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
];

开启默认事件处理程序

屏幕空间相机控制器（ScreenSpaceCameraController）提供了多个用于控制该类所提供的功能是否启用的属性成员，这些属性可以帮助开发者灵活地定制视点控制行为。

名称 类型 描述
enableInputs boolean 用户有条件地允许使用标志 enableTranslate、enableZoom、enableRotate、enableTilt 和 enableLook 进行输入。如果为 false，则禁用所有输入。（注意：此设置适用于临时用例，例如相机飞行时可禁用用户拖动或缩放，结束时设置为True）
enableLook boolean 允许用户改变相机观察方向。如果为 false，则只能通过平移或旋转来更改相机视图方向。此标志仅适用于 3D 和哥伦布视图(2.5D)模式。
enableRotate boolean 是否允许用户通过鼠标或键盘旋转视点。
enableTilt boolean 是否允许用户通过鼠标或键盘倾斜视点。
enableTranslate boolean 是否允许用户通过鼠标拖拽平移视点。
enableZoom boolean 是否允许用户通过鼠标滚轮或键盘缩放视点。

示例：

//禁止用户平移
viewer.scene.screenSpaceCameraController.enableTranslate = false;

//禁止用户缩放
viewer.scene.screenSpaceCameraController.enableZoom = false;

3. 场景触发事件

场景中一些变化触发的监听事件，随着Cesium中一些对象实例化而产生的事件。

常用的场景触发事件有：

示例：

// 需要回调的函数 
function callbackFunc(event){
    cosnole.log(event)
}
// 渲染之前执行
viewer.scene.preRender.addEventListener(callbackFunc);
viewer.scene.preRender.removeEventListener(callbackFunc);

// 更新之前执行
viewer.scene.preUpdate.addEventListener(callbackFunc);
viewer.scene.preUpdate.removeEventListener(callbackFunc);

// 实时渲染执行
viewer.scene.postRender.addEventListener(callbackFunc);
viewer.scene.postRender.removeEventListener(callbackFunc);

// 实时更新执行
viewer.scene.postUpdate.addEventListener(callbackFunc);
viewer.scene.postUpdate.removeEventListener(callbackFunc);

Refs

工具类

Cesium

Cesium 项目

Github源码

教程

Marinerer commented 8 months ago

CesiumJS API

API 大纲

常用的 CesiumJS API

1. 场景管理

2. 实体管理

3. 事件处理

4. 动画和时间

5. 其他

  1. 场景控制和相机操作
    • Viewer: 创建和管理虚拟地球场景的主要入口
    • Camera: 控制相机视角,包括相机位置、方向、投影矩阵等
    • Scene: 管理渲染场景,包括光源、雾、天空盒等
    • SceneMode: 控制场景模式(2D、3D或是2D+3D组合模式)
  2. 图元绘制
    • Entity: 渲染点、线、标注、3D模型等图元
    • EntityCollection: 管理一组实体对象
    • Primitive: 渲染底层图元,如平面、立方体、球体等基本形状
    • PrimitiveCollection: 管理一组基本图元对象
  3. 几何体数据
    • PolygonGeometry: 生成多边形几何体数据
    • EllipseGeometry: 生成椭圆几何体数据
    • BoxGeometry: 生成立方体几何体数据
    • SphereGeometry: 生成球体几何体数据
  4. 贴地渲染
    • GeoJsonDataSource: 加载GeoJSON数据
    • GeoJsonDataSource.load: 加载本地或远程GeoJSON数据
    • GroundPrimitive: 渲染贴地几何体
  5. 三维模型
    • Model: 加载和渲染3D格式模型(glTF)
    • ModelAnimation: 控制3D模型动画
  6. 地形
    • CesiumTerrainProvider: 加载离线地形数据
    • TerrainSource: 提供在线地形服务
  7. 地图投影
    • Scene.mapProjection: 设置地图投影方式
    • SceneTransforms: 提供地球参考几何计算
  8. 时间和动画
    • Clock: 管理动画模拟时钟
    • Animation: 创建并播放动画
  9. 事件响应
    • ScreenSpaceEventHandler: 处理鼠标、触摸等输入事件
  10. ImageProvider
    • createWorldImagery: 加载影像
    • createOpenStreetMapImageryProvider: 加载OpenStreetMap地图服务
  11. 材质和样式
    • ColorMaterialProperty: 设置实体颜色材质
    • PolylineGlowMaterialProperty: 设置线材质发光效果
    • Cesium3DTileStyle: 设置3D瓦片样式

Billboard：由一个二维图像或一组图像组成，以单个点定位，并总是对准摄像机。

CesiumWidget：一个较小的 viewer，用于在没有 timeline 或 navigation widgets 的情况下进行场景渲染。

imageryProvider：提供加载图像的方法。

DataSource：为了在 viewer 中加载数据，DataSource API 提供了加载和显示各种标准格式的方法，包括 CZML、GeoJSON、KML 和 TopoJSON。

1. Cesium.Viewer

Cesium.Viewer 文档

options

基本配置:

小部件配置:

这些选项用于控制视图器中包含的小部件的创建和行为。

图层配置:

这些选项用于配置视图器中的图层，包括地形和影像图层。

渲染配置:

这些选项用于控制视图器的渲染行为和性能。

Members

场景控制:

图像和地形:

用户交互:

可视化元素:

其他:

注意:

  • provider 属性已经废弃，请使用 terrainProvider 代替。

Methods

2. Cesium.Scene

Cesium.Scene 文档

options

Cesium.Scene(options) 的 options 参数：

Members

场景控制:

渲染设置:

图层:

环境:

拾取 & 交互:

事件:

其他:

Methods

场景控制:

拾取:

地形:

渲染:

其他:

  1. viewer.scene.camera === viewer.scene

3. Cesium.Camera

Merbers

1. 相机属性 (位置和方向):

2. 视图矩阵:

3. 事件:

4. 其他:

默认值:

Methods

1. 视图控制:

2. 拾取和测量:

3. 坐标转换:

4. 其他:

Examples

viewer.camera.setView({
    destination : cartesianPosition, //相机在WGS84坐标中的位置
    orientation: { //相机的方向
        heading : Cesium.Math.toRadians(90.0), // 朝向 左右旋转
        pitch : Cesium.Math.toRadians(-90),    // 仰角 上下旋转
        roll : 0.0                             // 翻转 左右摇晃
    }
});

4. Cesium.Entity

options

身份标识

可见性

位置和姿态

父级关系

可视化对象

其他属性

注意:

Members

标识和可见性

数据存储

位置和姿态

父级关系

可视化对象

属性

事件

集合

注意:

Methods

静态方法：

实例方法：

5. Cesium.Clock

6. Event

ScreenSpaceEventHandler

屏幕空间事件处理程序。处理用户输入事件，可以添加自定义函数，以便在用户输入时执行。可以理解为我们常说的鼠标事件（或键盘事件），是与鼠标和键盘输入相关的事件处理程序。

1. setInputAction ⭐

设置要在输入事件上执行的函数。 

setInputAction(action, type, modifier)

2. removeInputAction ⭐

移除要在输入事件上执行的函数。 

removeInputAction(type, modifier)

3. getInputAction

返回要在输入事件上执行的函数。 

getInputAction(type, modifier) → ScreenSpaceEventHandler.PositionedEventCallback|ScreenSpaceEventHandler.MotionEventCallback|ScreenSpaceEventHandler.WheelEventCallback|ScreenSpaceEventHandler.TwoPointEventCallback|ScreenSpaceEventHandler.TwoPointMotionEventCallback

ScreenSpaceCameraController

屏幕空间事件类型

属性名 类型 描述
lookEventTypes CameraEventType|Array|undefined 3D视图、2.5D视图改变相机观察方向
rotateEventTypes CameraEventType|Array|undefined 3D视图相机绕地球旋转
tiltEventTypes CameraEventType|Array|undefined 3D视图、2.5D视图倾斜视角
translateEventTypes CameraEventType|Array|undefined 2.5D视图、2D视图地图上平移
zoomEventTypes CameraEventType|Array|undefined 地图缩放

EventHelper

Cesium.EventHelper 是一个辅助类，用于简化在多个事件上附加事件监听器的常见模式，并允许在之后的某个时刻（例如在销毁方法中）一次性移除所有这些监听器。

const helper = new Cesium.EventHelper();

// 实例方法 add, removeAll

//add: 向指定的事件添加一个监听器
helper.add(event: Event, listener: function, scope?: object) → EventHelper.RemoveCallback
//  event: Event - 要附加到的事件。
//  listener: function - 当事件被触发时执行的函数。
//  scope: object (可选) - 一个可选的对象，用作监听器函数执行时的 this 指针。

//removeAll: 用于注销所有之前添加的监听器
helper.removeAll()

在实际应用中，Cesium.EventHelper 类可以极大地简化事件管理，特别是在需要清理资源的情况下。通过使用 add 方法添加监听器，并在适当的时候使用 removeAll 方法移除它们，可以防止内存泄漏和其他潜在的事件处理问题。这种方式也使得代码更加清晰和易于维护。

示例:

// 地球初次加载完成调用
const helper = new Cesium.EventHelper();
const RemoveCallback = helper.add(viewer.scene.globe.tileLoadProgressEvent, (e) => {
    if (e == 0) {
        console.log('onload');
        // 初次加载完成后，删除事件监听
        RemoveCallback();
    }
});

场景触发事件 API

Camera.changed ⭐

readonly changed : Event 获取当相机（camera）被 percentageChanged 改变时触发的事件。简言之，就是当相机发生变化时触发的事件。

示例：

// 监听摄像机属性的变化
viewer.camera.changed.addEventListener(() => {
  // 获取当前地图的缩放级别（zoom 层级）
  const height = viewer.camera.positionCartographic.height;
  console.log('zoom 视图中心位置的高度：', height);
});

Camera.moveStart ⭐

readonly moveStart : Event 获取当相机（camera）开始移动时被触发的事件。

Camera.moveEnd ⭐

readonly moveEnd : Event 获取当相机（camera）停止移动时被触发的事件。

Cesium3DTileset.allTilesLoaded ⭐

allTilesLoaded : Event 此事件触发以指示此帧的所有满足屏幕空间误差的瓦片已加载完毕。此视图的瓦片集（tileset）已完全加载。
此事件在场景渲染后的帧末尾触发。

示例：

tileset.allTilesLoaded.addEventListener(function() {
  console.log('All tiles are loaded');
});

Cesium3DTileset.initialTilesLoaded ⭐

initialTilesLoaded : Event 此事件触发以指示此帧的所有满足屏幕空间误差的瓦片已加载完毕。一旦初始视图加载完成，此事件就被触发。
此事件在场景渲染后的帧末尾触发。

Cesium3DTileset.loadProgress ⭐

loadProgress : Event 此事件触发以指示加载新瓦片（tiles）的进度。此事件在请求新瓦片时，请求的瓦片结束下载时，下载好的瓦片处理完成时和瓦片准备好要渲染时触发。
挂起的瓦片请求数量（numberOfPendingRequests）和处理中的瓦片数量（numberOfTilesProcessing）被传递给事件监听器。
此事件在场景渲染后的帧末尾触发。

示例：

tileset.loadProgress.addEventListener(function(numberOfPendingRequests, numberOfTilesProcessing) {
    if ((numberOfPendingRequests === 0) && (numberOfTilesProcessing === 0)) {
        console.log('Stopped loading');
        return;
    }

    console.log(`Loading: requests: ${numberOfPendingRequests}, processing: ${numberOfTilesProcessing}`);
});

Cesium3DTileset.tileFailed ⭐

tileFailed : Event 此事件触发以指示一个瓦片内容加载失败。如果没有事件监听器，控制台会打印错误消息。传递给事件监听器的错误对象包含两个属性:

示例：

tileset.tileFailed.addEventListener(function(error) {
    console.log(`An error occurred loading tile: ${error.url}`);
    console.log(`Error: ${error.message}`);
});

Cesium3DTileset.tileLoad ⭐

tileLoad : Event 此事件触发以指示一个瓦片内容已加载。
已加载的Cesium3D瓦片传递给了事件监听器。
在渲染帧时，此事件在遍历瓦片集（tileset）期间被触发，以便对瓦片的更新在同一帧生效。不要在事件监听器期间创建或修改Cesium实体（entity）或原始对象（primitives）。

Cesium3DTileset.tileUnload ⭐

tileUnload : Event 此事件触发以指示一个瓦片内容已卸载。
已卸载的Cesium3D瓦片传递给了事件监听器。
在渲染帧时，此事件在瓦片内容被卸载前立即触发，以便事件监听器能够访问瓦片内容（tile’s content）。不要在事件监听器期间创建或修改Cesium实体（entity）或原始对象（primitives）。

Cesium3DTileset.tileVisible ⭐

tileVisible : Event 此事件为帧中的每一个可见瓦片都触发一次。这可以用于手动设置瓦片集（tileset）的样式。
可见Cesium3D瓦片传递给了事件监听器。
在渲染帧时，此事件在遍历瓦片集（tileset）期间被触发，以便对瓦片的更新在同一帧生效。不要在事件监听器期间创建或修改Cesium实体（entity）或原始对象（primitives）。

示例：

tileset.tileVisible.addEventListener(function(tile) {
    const content = tile.content;
    const featuresLength = content.featuresLength;
    for (let i = 0; i < featuresLength; i+=2) {
        content.getFeature(i).color = Cesium.Color.fromRandom();
    }
});

Clock.onStop

当时间到达 Clock#stopTime 时触发的事件。

Clock.onTick

当 Clock#tick 函数被调用时触发的事件。Viewer初始化时会绑定clock.onTick事件，确保每一帧都会调用。

DataSource.changedEvent

获取在底层数据更改时触发的事件。

DataSource.errorEvent

获取在处理过程中遇到错误时触发的事件。

DataSource.loadingEvent

获取在数据源开始或停止加载时 (isLoading值发生变化时) 触发的事件。

DataSourceClock.definitionChanged

readonly definitionChanged : Event 获取每当分配新属性时触发的事件。

DataSourceCollection.dataSourceAdded

readonly dataSourceAdded : Event 获取当添加一个数据源（data source）到集合中时触发的事件。被添加的数据源传递给里事件处理程序。

DataSourceCollection.dataSourceMoved

readonly dataSourceMoved : Event 获取当改变一个数据源（data source）的位置时触发的事件。被移动的数据源，移动后的新索引（index）和移动前的旧索引传递给里事件处理程序。

DataSourceCollection.dataSourceRemoved

readonly dataSourceRemoved : Event 获取当移除一个数据源（data source）到集合中时触发的事件。被移除的数据源传递给里事件处理程序。

Entity.definitionChanged ⭐

readonly definitionChanged : Event 获取每当更改或修改属性或子属性时触发的事件。

EntityCluster.clusterEvent

clusterEvent : Event.<EntityCluster.newClusterCallback> 获取当一个新的集群要显示时触发的事件。事件监听器的签名是 EntityCluster.newClusterCallback 。

EntityCollection.collectionChanged

readonly collectionChanged : Event.<EntityCollection.CollectionChangedEventCallback> 获取在从集合中添加或删除实体时触发的事件。生成的事件是一个 EntityCollection.collectionChangedEventCallback 。

FrameRateMonitor.lowFrameRate

获取检测到低帧速率时触发的事件。函数接收到的第一个参数是场景实例（Scene instance），第二个参数是采样窗口每秒帧数的平均值。

FrameRateMonitor.nominalFrameRate

获取当帧率在降低后返回到正常水平时引发的事件。函数接收到的第一个参数是场景实例（Scene instance），第二个参数是采样窗口每秒帧数的平均值。

Globe.imageryLayersUpdatedEvent

readonly imageryLayersUpdatedEvent : Event 获取在添加、显示、隐藏、移动或删除影像图层（imagery layer）时触发的事件。

Globe.terrainProviderChanged

readonly terrainProviderChanged : Event 获取在地形提供者发生变化时触发的事件。

ImageryProvider.errorEvent

readonly errorEvent : Event 获取当影像提供者（imagery provider）遇到异步错误时触发的事件。通过订阅此事件，您将收到错误通知，并有可能从中恢复。一个瓦片提供者错误（TileProviderError）实例传递给了事件监听器。

ModelAnimation.start

获取在动画开始时触发的事件。比如说，可以用在动画开始时需要播放声音或启动粒子系统。此事件在帧末尾场景（scene）渲染之后触发。

示例：

animation.start.addEventListener(function(model, animation) {
  console.log(`Animation started: ${animation.name}`);
});

ModelAnimation.stop

获取在动画结束时触发的事件。比如说，可以用在动画结束时需要播放声音或启动粒子系统。此事件在帧末尾场景（scene）渲染之后触发。

ModelAnimation.update

获取在每一帧当动画更新时触发的事件。动画的当前时间（相对于glTF动画时间范围）传递给了事件。例如，我们可以在相对于动画播放的特定时间启动新的动画。

示例：

animation.update.addEventListener(function(model, animation, time) {
  console.log(`Animation updated: ${animation.name}. glTF animation time: ${time}`);
});

ModelAnimationCollection.animationAdded

获取在将动画添加到集合时触发的事件。比如说，可以用在保持UI的同步。

示例：

model.activeAnimations.animationAdded.addEventListener(function(model, animation) {
  console.log(`Animation added: ${animation.name}`);
});

ModelAnimationCollection.animationRemoved

获取在将动画从集合中移除时触发的事件。比如说，可以用在保持UI的同步。

ParticleSystem.complete

获取在粒子系统到达它的生命周期结束时触发的事件。

Property.definitionChanged

readonly definitionChanged : Event 获取当此属性定义发生变化时触发的事件。如果对 getValue 的调用将在同一时间返回不同的结果，则认为定义已更改。

PropertyArray.definitionChanged

readonly definitionChanged : Event 获取当此属性定义发生变化时触发的事件。每当调用 setValue 函数时，如果调用的数据与当前值不同，或者数组中的一个属性也发生了变化，则定义就会发生变化。

PropertyBag.definitionChanged

readonly definitionChanged : Event 获取当此对象中包含的属性集更改或其中一个属性本身发生变化时触发的事件。

Scene.morphStart ⭐

事件发生在一个场景过渡的开始。

Scene.morphComplete ⭐

事件发生在一个场景过渡完成后。

Scene.preUpdate ⭐

readonly preUpdate : Event 获取在场景（scene）更新和场景渲染之前触发的事件。事件的订阅者接收到的第一个参数为场景（Scene）实例，第二个参数为当前时间作。

Scene.postUpdate ⭐

readonly postUpdate : Event 获取在场景（scene）更新后和场景渲染之前立即触发的事件。事件的订阅者接收到的第一个参数为场景（Scene）实例，第二个参数为当前时间作。

Scene.preRender ⭐

readonly preRender : Event 获取在场景（scene）更新后和场景渲染之前触发的事件。事件的订阅者接收到的第一个参数为场景（Scene）实例，第二个参数为当前时间作。

Scene.postRender ⭐

readonly postRender : Event 获取在场景（scene）渲染后立即引发的事件。事件的订阅者接收到的第一个参数为场景（Scene）实例，第二个参数为当前时间作。

Scene.renderError ⭐

readonly renderError : Event 获取当 render 函数中报错时触发的事件。场景实例（scene instance）和抛出的错误是传递给事件处理程序的仅有的两个参数。默认情况下，事件触发后错误会再次抛出，我们也可以通过设置 Scene#rethrowRenderErrors 属性来改变。

Scene.terrainProviderChanged ⭐

readonly terrainProviderChanged : Event 获取当地形提供者（terrain provider）变化时触发的事件。

TerrainProvider.errorEvent

readonly errorEvent : Event.<TerrainProvider.ErrorEvent> 获取当地形提供者（terrain provider）遇到异步错误时触发的事件。通过订阅此事件，您将收到错误通知，并有可能从中恢复。一个瓦片提供者错误（TileProviderError）实例传递给了事件监听器。

Viewer.selectedEntityChanged ⭐

readonly selectedEntityChanged : Event 获取当选择的实体（entity）发生变化时触发的事件。

Viewer.trackedEntityChanged ⭐

readonly trackedEntityChanged : Event 获取当追踪的实体（entity）发生变化时触发的事件。

其他

HeadingPitchRollValues

HeadingPitchRollValues 类表示一个三维旋转，由航向角、俯仰角和滚转角组成。

属性说明

属性名 类型 默认值 描述
heading number 0 航向角，以弧度为单位，范围为[0, 2π]。0表示正北，π/2表示正东，π表示正南，3π/2表示正西。
pitch number 0 俯仰角，以弧度为单位，范围为[-π/2, π/2]。0表示水平，π/2表示垂直向上，-π/2表示垂直向下。
roll number 0 滚转角，以弧度为单位，范围为[-π, π]。0表示没有滚转，π/2表示逆时针旋转90度，-π/2表示顺时针旋转90度。 
// 创建一个HeadingPitchRollValues对象
const headingPitchRoll = new Cesium.HeadingPitchRollValues(
  Cesium.Math.toRadians(90), // 航向角，90度
  Cesium.Math.toRadians(30), // 俯仰角，30度
  Cesium.Math.toRadians(45) // 滚转角，45度
);