88 lines
4.6 KiB
Markdown
88 lines
4.6 KiB
Markdown
|
---
|
|||
|
|
title: 核心类
|
|||
|
|
author: ac
|
|||
|
|
date: 2022-01-16
|
|||
|
|
tags:
|
|||
|
|
- CesiumJS
|
|||
|
|
- Viewer
|
|||
|
|
- Scene
|
|||
|
|
- Entity
|
|||
|
|
categories:
|
|||
|
|
- GIS
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 核心类
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
> `Viewer` 是 `CesiumJS` 一切 `API` 入口，是展示三维要素内容的主窗口。另外还包含一些基础控件，所以在定义Viewer对象的同时需要设定基础部件、图层等的初始化状态。
|
|||
|
|
|
|||
|
|
Cesium开发的大部分工作在 `Scene `场景中执行，包括调用图层、3D Tiles数据加载、场景交互等。`Viewer` 和 `Scene` 有部分内容相同，如设置相机参数，通过这两个类都可以完成，在下文中会对类似情况做出说明。另外Cesium提供了`Entity` 、`DataSource` 等封装好的数据加载方式,降低了三维开发难度。
|
|||
|
|
|
|||
|
|
### 1. Viewer
|
|||
|
|
|
|||
|
|
Viewer类对应地图可视化展示的主窗口，Viewer对象创建的语句为:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
new Cesium.Viewer(cesium.Container,options);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
其中，cesiumContainer 是地图主窗口div的ID，options指 Cesium.Viewer 可选设置参数，包含图层、地形、时间系统等参数，种类多样。接下来通过例子介绍常用的选项设置
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
new Cesium.Viewer('cesiumContainer', {
|
|||
|
|
geocoder: false, // 位置查找工具
|
|||
|
|
baseLayerPicker: false,// 图层选择器（地形影像服务）
|
|||
|
|
timeline: false, // 底部时间线
|
|||
|
|
homeButton: false,// 视角返回初始位置
|
|||
|
|
fullscreenButton: false, // 全屏
|
|||
|
|
animation: false, // 左下角仪表盘（动画器件）
|
|||
|
|
sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. Scene
|
|||
|
|
|
|||
|
|
`Scene` 是构建场景的类，是场景对象的容器。Cesium开发大多基于 `Scene` 类，其主要包含四部分内容：
|
|||
|
|
|
|||
|
|
- 基础地理环境设置。如地球参数（globe）、光照（light）、雾（fog）、大气（skyAtmosphere）
|
|||
|
|
- 基础图层设置。包含地图图层、地形图层等，需要注意**在Viewer类中设置图层等价于在Scene中设置图层**，console.log(viewer.imageryLayers==viewer. scene.imageryLayers)显示”true“，意味着Viewer和Scene中imageryLayers属性是同一个对象。
|
|||
|
|
- 场景数据。Cesium底层空间数据绘制方式是依赖Primitive。`Primitive API`功能强大面且非常灵活.为程序员绘制高级图形提供很大自由度、开发者可根据图形学原理自定义高级图形。技术难度较大，对于初学者较为困难，相比较而言`Entity`封装程度高，构造简单，使用便捷，目前不支持自定义。`3D Tiles`是`Primitive`的非常重要部分，可以实现大数据量加载。
|
|||
|
|
- 场景交互函数。如pick（鼠标事件）、camera（相机事件）。需要注意的是，conole.log（viewer.camera==viewer.scene.camera）显示"true"，表示**Viewer和Scene中camera属性相同**。
|
|||
|
|
|
|||
|
|
它在原型链上有一个`render`方法，控制三维场景中物体的更新、渲染，包括：
|
|||
|
|
|
|||
|
|
- 生命周期事件（`preUpdate` 、`preRender`、`postUpdate`、`postRender`）回调触发；
|
|||
|
|
- 更新帧状态和帧号
|
|||
|
|
- 更新Scene中的Primitive
|
|||
|
|
- 移交渲染权给模块内的render函数触发WebGL绘制
|
|||
|
|
|
|||
|
|
> `Scene.prototype.render`方法调用一次，只更新并渲染一帧。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 3. Entity
|
|||
|
|
|
|||
|
|
`Entity` 是由，Primitive 封装而来，但是 **`Entity `并不属于 `Scene`**。`Entity API`是对高层次抽象对象的一致性的设计，这些对象将**相关的可视化和信息整合成统一的数据结构**，称之为`Entity`，使得开发者专注于数据的呈现，而不必关心底层的可视化机制。它还提供了用于构建复杂的、**时间动态可视化的结构**，与静态数据自然地结在一起。 虽然`Entity API`底层上使用了`Primitive API`实现，但这是一个实现细节，几乎不必关心。`Entity API`能够提供灵活的、高性能的可视化，同时提供一致性的、 易于学习的、易于使用的接口。由于Entity易学易用，而且功能丰富。在简单场景开发过程中，Entity的使用频率要高于Primitive。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 4. DataSourceCollection
|
|||
|
|
|
|||
|
|
`DataSoureCollection` 是Cesium中加载**矢量数据**的主要方式之一，最大特点是支持加载矢量数据集与外部文件的调用，主要分为：
|
|||
|
|
|
|||
|
|
- `CzmlDataSource`
|
|||
|
|
- `KmlDataSource`
|
|||
|
|
- `GeoJsonDataSource`
|
|||
|
|
- `GpxDataSource`
|
|||
|
|
|
|||
|
|
分别对应加载`CZML`、`KML`、 `GeoJSON`和`gpx`格式数据。
|
|||
|
|
|
|||
|
|
GIS开发中加载矢量数据是必不可少的功能，将矢量数据转换为以上任意一种方式，便可在 `Cesium` 中实现矢量数据的加载和存取。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 参考文章
|
|||
|
|
|
|||
|
|
[1] Cesium 核心类 https://blog.csdn.net/qq_36213352/article/details/122766308
|