Cesium开发基础
CesiumLab--系统重启
目录
• 一，关于我们
• 二，Cesium介绍
• 三，快速入门
• 四，常见问题
• 五，学习方法
一，关于我们 --系统重启
• 2008年毕业于北京科技大学硕士，研究方向虚拟现实。
• 曾在灵图软件、易伟航科技就职。参与研发VRmap、易景地球、桔子地图等多款3d
GIS和地图产品。
• CesiumLab作者
• 目前主要研究空间大数据的预处理以及优化。
• 非大神，非砖家，只是偶入GIS领域的非主流野生程序员
一，关于我们--VTXF
• 2008年毕业于北京航空航天大学硕士，研究方向计算机辅助设计
• 曾在伟景行科技、飞渡科技就职。参与研发多款桌面端、web端三维渲染产品
• 目前主要研究针对Cesium渲染效果的深度定制和优化。
一，关于我们
• 为什么我们要提供培训？
二，CESIUM介绍– CESIUM在项目中的定位
服务端 Google， Baidu，高德，天地图 客户端
业 Mapbox BS Cesium
务 项目自建 Leaflet
服 （基于java，.net，等任何开发语言）
务
GeoServer HTTP OpenLayers 3D
2D
数 2D N个数字
据 GIS数据库 ArcGIS 地球SDK
ArcGIS Server Engine osgEarth
CS
服 Cesium ION QGIS
务 文件 3D
CesiumLab Google Earth
二，Cesium介绍—Cesium的依赖性
• 基于HTML5标准，无插件，跨平台
• 无法独立运行，依赖于浏览器（CesiumLab基于Electron架构）
• 浏览器又是基于HTTP协议的，所以Cesium要正确运行必须有HTTP Server
• 但是HTTP Server的实现不限于开发语言和服务器，学Cesium可以不用nodejs
二， Cesium介绍– 官方介绍
• 一个开源的javascript三维虚拟地球/地图
• https://cesiumjs.org/
• Cesium的目标是动态数据可视化的虚拟地球领导者，尽一切可能去优化性能、精
度、效果，易用性、平台支撑、内容。
• Cesium经过同行的公开评审，单元测试覆盖90%以上代码，完整的文档，以及一个
非常专业的开发团队。
二， Cesium介绍– 所有功能
• 使用3d tiles 格式流式加载各种不同的3d数据，包含 • 支持各种几何体：点、线、面、标注、公告牌、立方体、球体、
倾斜摄影模型、三维建筑物、CAD和BIM的外部和内 椭球体、圆柱体、走廊(corridors)、管径、墙体
部，点云数据。并支持样式配置和用户交互操作。
• 可视化效果包括：基于太阳位置的阴影、自身阴影、柔和阴影。
• 全球高精度地形数据可视化，支持地形夸张效果、 • 大气、雾、太阳、阳光、月亮、星星、水面。
以及可编程实现的等高线和坡度分析效果。 • 粒子特效：烟、火、火花。
• 地形、模型、3d tiles模型的面裁剪。
• 支持多种资源的图像图层，包括WMS，TMS， • 对象点选和地形点选。
WMTS以及时序图像。图像支持透明度叠加、亮度、 • 支持鼠标和触摸操作的缩放、渲染、惯性平移、飞行、任意视角、
对比度、GAMMA、色调、饱和度都可以动态调整。
支持图像的卷帘对比。 地形碰撞检测。
• 支持3d地球、2d地图、2.5d哥伦布模式。3d视图可以使用透视和正
• 支持标准的矢量格式KML、GeoJSON、TopoJSON，
以及矢量的贴地效果。 视两种投影方式。
• 支持点、标注、公告牌的聚集效果。
• 三维模型支持gltf2.0标准的PBR材质、动画、蒙皮和
变形效果。贴地以及高亮效果。
• 使用CZML支持动态时序数据的展示。
三， Cesium介绍-- 知识体系
• Cesium是一个跨界SDK，涉及三个知识领域
• Web前端 Web前端 图形学
• 计算机图形学
• 地理信息系统（GIS） html,div,css vertex
js ajax json normal
Cesium texture
jquery material
vue,react shader
… …
GIS
vector raster
wkt epsg
wms wfs
geojson kml
…
三，快速入门 – 源码获取
• 官网下载 https://cesiumjs.org/downloads/
• GitHub上下载 https://github.com/AnalyticalGraphicsInc/cesium
• 安装NodeJS https://nodejs.org/en/
• npm install -- 安装cesium开发和运行中依赖的第三方nodejs包
• npm run release – 把cesium各模块源码打包压缩生成统一cesium.js 命令深度解释
• npm start – 开启cesium的测试Http Server
• Sandcastle – Cesium教室
三，快速入门 – 最小项目
• npm install -g http-server
• http-server 简单http服务器
• vscode 免费开源的开发神器
• 新建目录，新建index.html ，拷贝cesium开发包
• 最小测试页面
• http-server
三，快速入门 – 学习路线
• Viewer 类学习 -- 一切API的入口
• Camera类学习 -- 想去哪里去哪里（ Cartesian3和Cartographic）
持 • ImageryLayer类学习 -- 地球原来如此多姿（ ImageryProvider类）
续
• TerrainProvider类学习 – 这才是“真”三维（ sampleTerrain）
深 • Entity API – 与地球交互起来（ DataSource， Scene.pick、 Property）
入
• Cesium3DTileset类 -- 让场景更细致真实点（ Cesium3DTileStyle类）
• Primitive API – 性能提升第一步（ GeometryInstance类、 Geometry类）
• Fabric – 玩点高级的（ Appearance类， Material类）
• ParticleSystem -- 锦上添点“花”（ Particle类， ParticleEmitter类）
三，快速入门-UI控件配置
• 去掉cesium默认的版权信息
• 去掉动画控件、地址搜索控件、图层选择控件，操作指南控件
• 自定义默认视点
三，快速入门– 全球地形和谷歌影像
• 谷歌地图影像
• Cesium全球地形
三，快速入门 --坐标系统
• WGS84坐标系定义
• 长半轴：6378137.0
• Cartographic 制图坐标(longitude, latitude, height)，对应经纬度坐标，不过是弧度表示，此类
主要用在用户接口上，理解起来更直观。
• Cartesian3 笛卡尔直角坐标系(x,y,z) 做空间计算使用
• Cartographic -> Cartesian3 Cartographic . toCartesian
• Cartesian3-> Cartographic Cartographic .fromCartesian
• 理解Cartesian3.dot、 cross、 normalize，
• 注意result参数
三，快速入门 -Camera对象
• var camera = viewer.camera;
• position 相机位置
• heading(朝向)、pith(俯仰) 、 roll(翻滚)
• flyTo 直接操作相机参数
• 自动正北
• flyToBoundingSphere
• Viewer.flyTo 和 zoomTo 依据对象位置计算相机参数
三，快速入门 -lookAt
• HeadingPitchRange(heading, pitch, range)
• lookAt(target, offset)
二，快速入门--Entity
• 添加一个最简单的图标点
• position,name,description
• 添加一个三维模型
二，快速入门--3d tile特点
• 3d tiles的特点 https://cesium.com/blog/2015/08/10/introducing-3d-tiles/
• 协议完全开放：任何组织机构都可以用此标准来定义自己的数据。
• 渐进加载和渲染：这是3dtiles的主要目的，采用HLOD技术，保证只加载和渲染和当前精度匹配的数据。
• 面向三维空间：定义在三维空间中，不仅仅是点、线、面等常规二维数据
• 可交互：支持鼠标选择和高亮
• 样式可配置：根据对象属性修改对象的显示样式。
• 更强的适应性：空间索引不仅仅支持常规四叉树，可以根据数据内容动态构建索引树。
• 更强的灵活性：动态调整数据加载精度
• 更广泛的数据支持：点云(pnts)、三维模型(b3dm,i3dm)、甚至地形、矢量(vctr)都可以用3d tiles格式定义。
• 精度：使用矩阵偏移解决大坐标值的漂移问题
• 实时的：支持动态数据
二，快速入门--3d tile使用
• 使用Cesium3DTileset
readyPromise
• 高度调整
fromTranslation
• 中心位置调整
eastNorthUpToFixedFrame
• 鼠标点选&属性输出
Cesium3DTileFeature
二，快速入门– 鼠标交互&自定义气泡
• scene.pick,InputAction,scene.pickPosition
• 再次例证cesium完全兼容HTML标准
四，新手常见问题– 问题定位
• Cesium是个跨界产品，前端、图形学、GIS相关的问题都可能会碰到
• 判断问题属于哪个领域，更容易解决问题
• 问题永远无法罗列，下面就几个常见简单问题分析下
四，新手常见问题– 404问题
• 症状： 浏览器输出404错误，所加载的对象没显示
• 问题定位：web前端开发，与cesium无关
• 问题复现：把资源的地址拷贝出来在浏览器地址栏里访问试下
• 问题原因：
资源相对路径不对、大小写敏感（某些服务器比如tomcat）、中文字符（某些页面
和服务器编码不一致）
四，新手常见问题– 跨域问题
• 症状： 浏览器输出CORS policy错误，所加载的对象没显示
• 问题定位：web前端开发，与cesium无关
• 问题复现：页面引用的一些不在当前页面地址的资源
• 问题解决： 服务器 页面
跨域问题的终极解决方法在服务端 外站资源
若服务端代码可改：添加跨域头
若服务端不可控：添加代理服务器 服务器 页面
外站资源
四，新手常见问题– 模型漂移
• 症状： 浏览器输出404错误，所加载的对象没显示
• 问题定位：图形学，与cesium有关
• 问题复现：模型和地形的相对高度不一致
• 问题解决：
1, viewer.scene.globe.depthTestAgainstTerrain=true;
2,调节对象高度；
3, viewer.scene. globe. depthTestAgainstTerrain=false;
四，新手常见问题– 底图偏移
• 症状： 浏览器输出404错误，所加载的对象没显示
• 问题定位：GIS数据源，与cesium有关
• 问题复现：国内公开访问的底图（除天地图）都有火星偏移
• 问题解决：
不要采用有偏移的底图数据（可以使用天地图底图）
或者实时编译修正
五，学习方法
• 带着需求去学 -- 目标明确、事半功倍，从Sandcastle中寻找近似示例
• 从官方教程开始 -- 体会研发者的苦心，从易到难，整体框架把握
• 学会查用户手册 -- 绝大部分问题的标准答案
• 跟踪源码 -- 善用GitHub去搜索代码
• 加入Cesium实验室（qq群：595512567） -- 大家一起进步
• 资料汇总
五，学习方法– 进阶之路
• Web前端方向：Cesium与webpack（裁剪以及压缩），Cesium与vue（框架设计，
嵌入复杂业务系统），Cesium的UI（UI设计，定制可复用的Cesium交互界面）
• 图形学方向：WebGL深入，基于Cesium的可视化定制（视阈、水淹，水面、热力
图，流场图，飞线图，扫描图）
• 数据预处理方向：投影变换，空间索引，LOD，3dtile生成，数据存储，数据分发
服务，解决超大空间数据如何在Cesium上流畅可视化的问题。
五，学习方法 --后续可能课程
• 前端开发框架步步通（1课时） • 地形数据处理&可视化（1课时）
webpack入门，VUE入门，框架设计
数据来源，arcmap操作，cesiumlab处理，cesium加载、高
• 图形学基础（1课时） 程&坡度着色以及等高线
三维向量、矩阵、顶点、法向量、纹理坐标、 webgl入门
• 影像数据处理&可视化（2课时）
• Primitive API 使用 （1课时）
Geometry & Fabric 数据来源，arcmap操作、cesiumlab处理，arcgis切片、
geoserver切片，cesium加载，亮度，对比度等调整
• 基于Cesium的高级渲染（1课时）
czm_* 函数总结、简单可视阈效果开发 • MAX、BIM数据处理&可视化（1课时）
数据导出，cesiumlab处理详细参数分析，cesium加载，场
景结构定位，点击交互
• 倾斜、矢量面处理&可视化（1课时）
斜数据处理、单体化矢量制作、cesium加载，单体化着色
谢谢