核心依赖库Cesium介绍

3/1/2023

Cesium (opens new window) 是一款开源的基于JavaScript的3D地图框架。

Cesium官网中描述写到:

CesiumJS is a geospatial 3D mapping platform for creating virtual globes. Our mission is to create the leading web-based globe and map for visualizing dynamic data. We strive for the best possible performance, precision, visual quality, ease of use, platform support, and content.
1

CesiumJS 是一款用于创建虚拟场景的3D地理信息平台。目标是用于创建以基于Web的地图动态数据可视化。目前尽力提升平台的性能、准确率、虚拟化能力、易用性以及平台的各种支持。

# 1. Cesium的作者:AGI公司

Cesium隶属于AGI公司,该公司一直致力于时空数据业务。正如很多开源项目都有一个个性化的名字,Cesium也不例外。Cesium原意是化学元素铯,铯是制造原子钟的关键元素,通过命名强调了Cesium产品专注于基于时空数据的实时可视化应用。 AGI的英文全称为Analytical Graphics Incorporation,三位创始人曾在通用公司宇航部的供职工程师,提供STK(System/Satellite Toolkit Kit)和Cesium两款产品。该公司是航天分析软件的领导者,而STK则是该公司的旗舰产品。经过多年来在时空数据的积累,AGI公司逐渐掌握了大量3D可视化技术,也感受到各行各业对海量3D数据的强烈需求,因此于2012年创建了cesiumjs开源项目,围绕Cesium生态圈打造了一套安全可靠易扩展且平台独立的企业级解决方案。

# 2. Cesium官方网站

建议大家将Cesium官网的博客都读一遍,博客大概分为三类,主要是技术类,比如性能优化,调度算法等,一类是定期的新版本特性,能够了解Cesium新功能和新特性,还有一类是大事记,比较轻松,不妨感受一下Cesium的团队文化。

Cesium官网 (opens new window) 官方博客 (opens new window) 团队成员介绍 (opens new window)

# 3. Cesium的源码

Cesium遵循Apache 2.0许可开源协议,可以免费的用于商业和非商业用途,无论是个人还是商业用途,可以任意修改源码不用开源,需要声明该产品使用了Cesium,比如Cesium.js,LICENSE.MD;MODIFICATIONS.md声明你的修改清单。

GitHub开源地址 (opens new window) 官方教程 (opens new window) 官方示例 (opens new window) API文档 (opens new window)

Cesium目前更新比较频繁,每个月月初会发布一次版本,当前最新版本是:

版本:v (发布时间:)    下载zip包(0MB)   或   Gihub releases列表

Npm version Npm downloads

# Cesium包中的资源及代码

  • Assets:Cesium中的静态资源,包括图片数据及JSON数据
  • Scene:自定义着色器指南,新手可以直接忽略
  • ThirdParty:Cesium中使用的第三方库
  • Widgets:Cesium中的CSS样式文件
  • Workers:Cesium多线程工作代码
  • Cesium.js:Cesium主文件

Cesium架构图,建议使用前先熟悉整体架构图,以便能够快速使用。 新窗口查看大图 架构图

# 4. Mars3D与Cesium的关系

Cesium库总体来说是很难用、API接口不友好的一个SDK,所以我们Mars3D对Cesium的类的使用做了一致性的封装,统一的API接口风格、并对一些事件、调度等做统一内部处理,外部使用更加简单易用。

两个SDK是互相独立解耦的,可以理解为mars3d对Cesium做了扩展和提升,并重新封装、并增加了很多新功能。

# 4.1 mars3d-Cesium库说明

因为cesium本身也有一些bug或需要优化的地方,Mars3D使用的cesium也修改了部分cesium源码文件。我们修改Cesium的原则:

  • 主要扩展都在mars3d类库中,没法外部扩展的,才会在内部去修改cesium底层;
  • 尽量不改变ceisum本身逻辑,通过参数来可控改变;
  • 并且所有修改都有完整注释说明。

Npm version Npm downloads

# 4.2 mars3d中如何使用Cesium类

开发时如果需要 Cesium 的内部接口可以直接使用Cesium.*来调用即可,vue等环境中也可以通过mars3d.Cesium.* 来获取 Cesium 相关对象。

# 4.3 mars3d类对象中获取原生Cesium对象

基本mars3d使用的所有Cesium类在其对应内部都有暴露使用的Cesium对象属性,

以下是我们列出的常用替代关系清单,如果你使用的一些Cesium原生代码也可以通过下面清单说明,直接使用mars3d暴露的原生cesium属性对象。

mars3d类 内部Cesium对象 说明
mars3d.Map (opens new window) map.viewer (opens new window) 地球主对象
mars3d.layer.BaseTileLayer (opens new window) tileLayer.layer (opens new window)tileLayer.imageryProvider (opens new window) 瓦片图层对象
mars3d.layer.TilesetLayer (opens new window) tilesetLayer.tileset (opens new window) (在readyPromise异步获取使用) 3dtiles三维模型图层
mars3d.graphic.BaseGraphic (opens new window) graphic.czmObject (不同子类实现) 矢量数据对象,不同子类中实现,比如下面 Polygon
mars3d.graphic.PolygonEntity (opens new window) graphic.czmObject (opens new window)graphic.entity (opens new window) Entity矢量数据对象,其他类型使用相似
mars3d.graphic.PolygonPrimitive (opens new window) graphic.czmObject (opens new window)graphic.primitive (opens new window) Primitive矢量数据对象,其他类型使用相似

# 5. 原生Cesium开发 相关学习网站

最好的教程其实是官方教程 (opens new window)官方示例 (opens new window),并在学习中随时查阅API文档 (opens new window)

# 教程

# 代码

# 其他

最后更新: 9/8/2023, 5:23:49 PM