往期回顾：

【Cesium入门教程】第一篇：Cesium简介与快速入门

【Cesium入门教程】第二篇：基础操作与地图控制

【Cesium入门教程】第三篇：Cesium 实体(Entity)与数据源(DataSources)

图(Primitive)的概念

在Cesium中，图(Primitive)是一种用于创建和操作三维几何形状的底层API。

Cesium丰富的空间数据可视化API分为两部分:Primitive API 面向三维图形开发者，更底层一些。Entity API是数据驱动更高级一些。

与Entity API相比，Primitive API更加底层和灵活，允许开发者直接控制几何体的创建和外观表现。图通常由几何体(Geometry)和外观(Appearance)组成。

entity调用方便，封装完美是基于primitive的封装 primitive更接近底层可以绘制高级图形由Geometry(几何形状)、(Appearance)外观组成

创建基本图

以下是一个创建基本图的官方示例：

const primitive = new Cesium.Primitive( geometryInstances: new Cesium.GeometryInstance( geometry: new Cesium.EllipseGeometry( center: Cesium.Cartesian3.fromDegrees(-100.0, 20.0), semiMinorAxis: .0, semiMajorAxis: .0, rotation: Cesium.Math.PI_OVER_FOUR, vertexFormat: Cesium.VertexFormat.POSITION_AND_ST ), ), appearance: new Cesium.EllipsoidSurfaceAppearance( material: Cesium.Material.fromType('Stripe') ) ); viewer.scene.primitives.add(primitive);

这段代码是一个官方示例，实现步骤如下：

1. 创建一个基本几何体对象（Primitive）:

使用Cesium.Primitive构造函数创建一个新的几何体对象。

2. 定义几何实例:

geometryInstances属性接受一个Cesium.GeometryInstance对象，这个对象包含几何体的具体信息。

3. 创建椭圆形几何体（EllipseGeometry）:

geometry属性是一个Cesium.EllipseGeometry对象，它定义了一个椭圆的几何形状。

center属性定义了椭圆的中心点，这里使用Cesium.Cartesian3.fromDegrees方法，接受经度和纬度，创建了一个三维笛卡尔坐标点。

semiMinorAxis属性定义了椭圆的半短轴长度，数值为500,000.0。

semiMajorAxis属性定义了椭圆的半长轴长度，数值为1,000,000.0。

rotation属性定义了椭圆的旋转角度，这里使用了Cesium.Math.PI_OVER_FOUR，表示旋转了45度。

vertexFormat定义了顶点格式，表示顶点包含位置和纹理坐标。

4. 定义外观（EllipsoidSurfaceAppearance）:

appearance属性接受一个Cesium.EllipsoidSurfaceAppearance对象，它定义了几何体的外观。

material属性定义了材质，这里使用了Cesium.Material.fromType方法，并传入了Stripe类型，表示使用条纹材质。

5. 添加几何体到场景（Viewer）:

最后，使用viewer.scene.primitives.add(primitive)将创建的几何体添加到Cesium Viewer的场景中，viewer是一个已经配置好的Cesium Viewer实例。

这段代码演示了如何在Cesium中创建一个具有特定位置、大小、旋转角度和材质的椭圆形状，并将其添加到3D场景中。

下面是实现后的效果图：

组合代码

下面是一个组合图形的代码示例和实现步骤：

const rectangleInstance = new Cesium.GeometryInstance( geometry: new Cesium.RectangleGeometry([ rectangle: Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0), vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FoRMAT ]), id:'rectangle', attributes: { color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5) } ); ​ const ellipsoidInstance = new Cesium.GeometryInstance({ geometry: new Cesium.EllipsoidGeometry([ radii: new Cesium.Cartesian3(.0,.0,.0), vertexFormat: Cesium.VertexFormat.PoSITION AND NORMAL ]), modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-95.59777,40.03883) ),new Cesium.Cartesian3(0.0, 0.0, .0), new Cesium.Matrix4()), id:'ellipsoid', attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA) } }); ​ viewer.scene.primitives.add(new Cesium.Primitive( geometryInstances:[rectangleInstance, ellipsoidInstance], appearance: new Cesium.PerInstanceColorAppearance() ));

通过定义不同的几何形状和颜色，展示了如何在Cesium中创建并展示具有特定属性的几何图形。

主要实现步骤如下：

1. 创建矩形几何实例：

使用Cesium.RectangleGeometry定义一个矩形的几何体，指定矩形的经纬度边界，并设置顶点格式为Cesium.PerInstanceColorAppearance.VERTEX_FORMAT。同时，定义了一个颜色属性，使用透明度为0.5的绿色。

2. 创建椭球几何实例：

使用Cesium.EllipsoidGeometry定义一个椭球的几何体，指定椭球的三个半轴长度，并设置顶点格式包含位置和法线。

定义椭球的模型矩阵，将椭球放置在特定的经纬度位置并提升至.0单位的高度。颜色属性设置为水绿色。

3. 添加几何实例到场景:

创建一个Cesium.Primitive对象，将矩形和椭球几何实例作为其geometryInstances，并且定义外观，允许为每个几何实例设置独立的颜色。

4. 将几何体添加到Cesium Viewer:

最后，使用viewer.scene.primitives.add将创建的Cesium.Primitive对象添加到Cesium Viewer的场景中，使得几何体可以在3D地球或地图上显示出来。

实现效果如下：

PDTiles加载

PDTiles是一种用于高效渲染大规模三维瓦片数据的格式。Cesium支持加载PDTiles格式的数据，使得可以在Web上渲染数以百万计的三维瓦片。

三维模型加载

Cesium支持加载多种格式的三维模型，包括glTF（GL Transmission Format）。glTF是一种用于3D模型的传输和加载的高效、可扩展格式。

let viewer = new Cesium.Viewer('cesiumContainer', { shadows: true, //显示阴影 shouldAnimate: true, }); const position = Cesium.Cartesian3.fromDegrees(114.30, 30.50, 200); const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0)); const entity = viewer.entities.add({ position: position, orientation: orientation, model: { uri: '/src/assets/Cesium_Air.glb' }, minimumPixelSize: 200, //模型最小尺寸 maximumScale: 5000, //最大比例尺大小 show: true }); viewer.zoomTo(entity);

在这个示例中，在Cesium Viewer中加载和显示一个3D模型。

1. 初始化Cesium Viewer: 创建一个新的Cesium Viewer实例，设置容器为'cesiumContainer'，启用阴影和动画。
2. 定义模型位置和方向: 使用经纬度和高度信息创建模型的位置，并通过Cesium.Transforms.headingPitchRollQuaternion定义模型的方向。
3. 添加模型实体: 使用viewer.entities.add方法添加一个模型实体到Viewer中，指定模型的位置、方向、URI路径，以及最小像素尺寸和最大比例尺大小。
4. 缩放至模型: 最后，调用viewer.zoomTo(entity)方法将视角自动调整至新添加的模型实体，以便用户可以清晰地看到模型。

粒子系统

粒子系统是一种图形技术，可以模拟复杂的物理效果。通过使用诸如初始位置、速度和寿命等属性指定单个粒子的行为，可以控制这些复杂的效果。

粒子系统效应在电影和电子游戏中很常见。例如，为了表示飞机的损坏，技术艺术家可以使用粒子系统来表示飞机引擎上的爆炸，然后渲染不同的粒子系统，表示飞机坠毁时的烟雾轨迹。

Cesium中的粒子系统可以用于创建各种视觉效果，如火焰、烟雾、雨滴等。粒子系统通过定义发射器、粒子的生命周期和外观等属性来工作。

let viewer = new Cesium.Viewer('cesiumContainer', shadows: true, shouldAnimate: true, ); const position = Cesium.Cartesian3.fromDegrees(114.30, 30.50, 200); const orientation = Cesium.Transforms.headingPitchRollQuaternion(position Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0)); const entity = viewer.entities.add( position: position, orientation: orientation, model: { uri:'/src/assets/Cesium_Air.glb', minimumPixelSize: 200, maximunScale:5000, show: true } ); viewer.zoomTo(entity); viewer.scene.primitives.add(new Cesium.ParticleSystem( image:'/src/assets/fire.png', imageSize: new Cesium.Cartesian2(20, 20), //尺寸 startScale：1.0, //初始大小 endScale：4.0, //最后大小 particleLife：3.0, //设置每一个粒子存在的时间 speed：5.0, //发射粒子的速度 emitter: new Cesium.CircleEmitter(2), //设置发射器（圆形发射器） // emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(10, 10, 10)), emissionRate：5, //例子发射数量 modelMatrix: entity.computeModelMatrix( viewer.clock.startTime, //时间控件中的起始时间 new Cesium.Matrix4() //4*4矩阵数据 ), lifetime：16, //生命期属性为所需的持续时间 // loop：false, //只循环一次 ));

在这个例子中，演示了如何在Cesium中创建3D模型并添加粒子系统效果，增强了视觉效果，适用于模拟如火焰、烟雾等动态效果。

1. 初始化Cesium Viewer: 创建一个Cesium Viewer实例，设置容器ID为cesiumContainer，启用阴影和动画。
2. 定义模型位置和方向: 使用Cesium.Cartesian3.fromDegrees创建模型的经纬度和高度位置，并通过Cesium.Transforms.headingPitchRollQuaternion定义模型的朝向。
3. 添加模型实体: 使用viewer.entities.add方法添加模型实体，设置模型位置、方向、URI路径，以及最小像素尺寸和最大比例尺。
4. 缩放至模型: 调用viewer.zoomTo(entity)将视角自动调整至模型实体。
5. 创建粒子系统: 添加一个新的Cesium.ParticleSystem到场景中，设置粒子的图像、尺寸、生命周期、速度、发射器类型、发射率等属性。
6. 绑定粒子系统到模型: 使用entity.computeModelMatrix计算模型矩阵，将粒子系统的位置和方向与模型实体同步。
7. 设置粒子系统生命周期:lifetime属性设置粒子系统的持续时间。

结语

本教程详细介绍了Cesium中的图(Primitive)、PDTiles加载、三维模型加载和粒子系统的使用。这些高级特性为Cesium提供了强大的三维图形处理能力，允许开发者创建复杂的三维场景和视觉效果。

理解这些概念和API的使用对于开发高级Cesium应用程序非常重要。在后续的教程中，我们将继续探索Cesium中的交互事件处理、性能优化和最佳实践。

本系列教程持续更新，不想错过的同学请关注我！

新中地教育是由中国著名GIS科学家、教育家、企业家吴信才教授、刘永教授创办，依托国家地理信息工程技术研究中心、中地数码集团雄厚的科研、师资、项目等资源，研发出GIS开发工程师人才培养课程体系，面向社会推出GIS开发特训营教育产品。

领取本开源Cesium视频教程的同学加小助手备注【cesium】

https://www.wjx.cn/vm/Qm8Ful2.aspx​www.wjx.cn/vm/Qm8Ful2.aspxhttps://link.zhihu.com/?target=https%3A//www.wjx.cn/vm/Qm8Ful2.aspx

cesium入门课程及笔记源码可免费分享