Cesium最全系列教程！从零到一完成智慧城市实战项目！

大家好，我是日拱一卒的攻城师不浪，致力于技术与艺术的融合。这是2024年输出的第36/100篇文章。
可视化&Webgis交流群+V：brown_7778（备注来意）

效果预览

Cesium之智慧城市

前言

小伙伴A：博主，有没有Cesium基础系列类教程，能够把大部分知识点串联起来的那种？

我之前是一个只接触过二维的前端，日常工作就是写写大屏，后台管理、H5或者小程序之类的，最近公司领导突然要求我学习一下Cesium，为公司后期一些三维项目开发做准备。

作为一个只会curd的前端，刚接触Cesium着实让我有点头大，一堆的API，一堆陌生的名词，如空间直角坐标系，欧拉角，3D Tiles，倾斜摄影，BIM模型，矩阵，geoJson等等，这些我之前根本就没接触过。

所以我想有没有这样一个从基础教起的教程，让我一个普通前端能够快速入门Cesium，理解其中大部分常用的功能，并很快能够实战完成公司的项目呢？

我：额…

全网搜了一下，目前确实还没有比较基础且详细的Cesium教程，没有一个看了能够让开发者对Cesium有一个整体掌控的教程，那么，我认为，我可以去填补这个知识空缺，因为我是三维开发的爱好者，同时我对Cesium也很有兴趣。

前阵子，英伟达老总黄仁勋在发布会上介绍，他们正致力于数字孪生地球平台Earth-2的研究，然而，Cesium也参与了其中，并发布了Cesium for Omniverse插件，所以，我认为Cesium今后在GIS、数字孪生、全球仿真等前沿领域肯定大有作为。

Cesium教程

接下来，介绍一下Cesium-V1版本教程的目录大纲，内容从基础开始，由浅入深。

为什么是V1版本？因为这个教程是一个长期更新的教程，毕竟Cesium是一个庞大的知识体系，笔者想一口气全部理解并输出，并不是很现实，这也是为什么教程是图文，因为方便修改，更新，完善。

第一章

第一章主要是对Cesium做一个全面的介绍，包括它是什么，能做什么，它的架构体系，代码目录结构是怎样的，以及从零搭建一个Cesium + Vue3 + Vite的初始项目。

再就是讲解一下Ceisum中常用到的一些GIS基础知识。

第二章

第二章涉及的知识点就相对比较多了，包括三维中的相机使用，各种地形、影像加载方式，都有哪些矢量数据类型，如何使用，点线面的构建，加载国产地图以及加载各种3D模型等等。

部分教程截图如下：

第三章

第三章主要跟日常业务开发相贴合，理解Ceisum中的各种事件，这是我们做三维交互所离不开的属性。

学会各种Colletion集合的应用，提高代码可读性，可维护性等。

如何渲染一个三维汽车模型，如何让它按照自己设定的轨迹移动，Cesium中的动画以及时间概念等。

Primitive图元，这个概念，你做Ceisum项目一定要知道，它是提高渲染性能的一大利器！特别是在渲染大量元素的时候。

在我的技术交流群里，经常会有小伙伴问我，为什么他的项目里渲染点位，页面总是特别卡顿。

我问他多少个点？他说七八千个吧。

我问他，你是不是用Entity渲染的，他说是，我说你去了解下Primitive，改成它去渲染，几十万个点瞬间秒出！

小伙伴用了之后连连称赞，说这个API太牛了，页面瞬间就不卡了。

所以，有时候不是能力不行，而是认知没有跟上！

第四章

这一章是比较有难度的一章，因为涉及到写shader，写着色器，对于很多没有学过webgl的小伙伴来说，一开始上手会比较费劲，但是书读百遍，其意自现，我也会不断的去打磨这一个模块，争取做到通俗易懂，也会写更多的案例去让小伙伴不断的熟悉其中的奥义。

第五章

第五章主要是场景美化以及一些开发时有帮助以及效率提升工具的介绍等。

这一章其实也蛮有意思的，试想一下你把一个丑丑的影像一点一点变得高级美观起来，那甲方不得对你刮目相看呐！

毕竟，谁不喜欢看美女呢？！

项目实战

当学完以上这些基础或者进阶篇之后，我们基本上就能一起从零到一去开发一个智慧城市实战项目了，这个实战项目我也会提供源码给大家。

并且基本上每一个功能场景，我都封装成了一个大类，使用以及修改起来更加方便。

最后

Ceisum从入门到实战课程介绍，如果对教程感兴趣的小伙伴可以联系我：brown_7778（备注来意）。

如果说你已经是Cesium高手了，但想进可视化&Webgis交流群也可以加我，我拉你进群装X。