皮皮网

1.CesiumJS 使用 WebGL 2.0
2.Cesium开发基础篇 | 05glTF介绍及加载
3.cesium 实现 3d-tiles 平移旋转贴地(附源码下载)
4.Cesium专栏-淹没分析（附源码下载）
5.cesium 之加载地形图 Terrain 篇（附源码下载）
6.cesium之地图贴地量算工具效果篇（附源码下载）

CesiumJS 使用 WebGL 2.0

       在CesiumJS的官方1.版本及后续版本中，默认启用WebGL 2.0。源码用法源码系统会根据硬件环境自动判断是实战否启用，若硬件不支持则自动回退至WebGL 1.0。官方

       对于后续版本中涉及自定义着色器（如CustomShader）的源码用法源码场景，需要使用GLSL 语法。实战安卓手机查看系统源码失败若需强制使用WebGL 1.0，官方可进行以下操作：

       对于1.版本存在的源码用法源码小问题，在1.版本中已修复。实战

       Cesium的官方默认上下文选择WebGL 1.0的WebGLRenderingContext，而非WebGL 2.0的源码用法源码WebGL2RenderingContext。若需开启WebGL 2.0，实战只需在初始化时设置相应的官方参数。

       通过检查源码判断是源码用法源码否使用WebGL 2.0，这是实战一项有效的技能，前提是代码质量高且目标明确。

Cesium开发基础篇 | glTF介绍及加载

       在Cesium开发中，了解如何加载和使用glTF模型是非常重要的。glTF，即Graphics Language Transmission Format，是一种专为图形应用设计的高效、可扩展且互操作的3D内容传输格式，由Khronos集团维护，现已成为Web上的3D对象标准。

       glTF提供了一种通用的方式来传输和加载3D模型，几乎所有的3D Web框架都支持glTF格式。它通过JSON文件描述模型，支持外部数据，并允许将文件转换为二进制格式glb。Cesium提供了一个源码库，可将obj文件转换为glTF格式，方便开发者使用。

       glTF模型结构包括一个JSON文件和可选的外部文件，以及两种主要格式：glTF和glb。glTF文件定义了场景、节点、网格、相机、材质等元素，而glb则将所有内容封装在二进制格式中。JSON文件中的场景对象以数组形式存储，每个对象通过引用节点定义了场景图。节点可以包含变换参数、整站源码会员网格引用、相机等，并通过索引定义了对象之间的关系。

       每个glTF模型的核心是其JSON结构，包括场景、节点、相机、网格、皮肤、动画、访问器、材质和纹理等元素。场景由引用节点定义，节点可以包含变换参数、网格和相机，以及描述网格变换的蒙皮。相机定义了渲染场景的视锥体配置，网格描述了场景中的几何数据，皮肤定义了蒙皮参数，动画描述了节点随时间变化的参数，访问器提供了数据源，材质定义了3D对象的外观参数，而纹理定义了图像如何在对象上张贴。

       为了验证和查看glTF模型，可以使用多个在线工具，如glTF在线验证器、浏览-Sketchfab、PlayCanvas查看器、ThreeJS查看器、BabylonJS查看器等。开发者还可以使用glTF转glb工具将模型转换为二进制格式。

       Cesium提供了两种加载glTF模型的方式：通过Entity API和Primitive API。Entity API允许开发者创建和管理模型，而Primitive API则负责渲染模型。使用模型时，可以设置模型矩阵属性，定义模型的坐标转换，为模型创建一个局部坐标系。

       为了深入学习Cesium和glTF，推荐查阅相关文档和书籍。此外，了解glTF规范、景点管理源码掌握Cesium API，并尝试使用不同工具加载和查看模型，可以极大地提升开发技能。通过实践和学习，开发者能够更好地利用Cesium实现复杂的3D可视化应用。

cesium 实现 3d-tiles 平移旋转贴地(附源码下载)

       cesium 实现三维瓷砖平移旋转贴地是一个涉及3D建模与cesium平台交互的技术操作。为了使三维瓷砖在cesium环境中实现平移和旋转，并使其贴合地面，核心在于应用旋转、平移矩阵的相乘原理，具体操作步骤如下：

       首先，根据cesium API文档，我们需要熟悉并掌握Cesium.Matrix3类的使用，特别是从旋转轴（X、Y、Z轴）创建旋转矩阵的函数，如Cesium.Matrix3.fromRotationX、Cesium.Matrix3.fromRotationY、Cesium.Matrix3.fromRotationZ等。这些矩阵用于控制三维物体的旋转方向和角度。

       接着，为了实现物体的平移，我们使用Cesium.Matrix4.fromRotationTranslation函数结合Cesium.Matrix4.multiply函数，将旋转与平移矩阵相乘，进而调整三维模型的位置。这个过程涉及到三维空间中的坐标变换，确保模型能够精确地贴合地面或按照预期路径移动。

       在实现过程中，参考的资源包括文章和教程，如jianshu.com和cesium.xin的WordPress文章，这些资源提供了理论指导和实践示例，帮助开发者理解和应用cesium平台的高级功能。

       完成上述步骤后，开发者可以通过cesium的在线实例和官方API文档进行验证和调试，确保实现效果符合预期。

       为了方便学习和实践，提供了一个源代码示例下载链接：pan.baidu.com/s/1mIkVg5... 提取码：dh6k。通过下载并运行该代码，开发者可以直接观察和理解如何在cesium环境中实现三维瓷砖的平移旋转贴地操作。

Cesium专栏-淹没分析（附源码下载）

       Cesium是一款全球领先的JavaScript开源三维地球地图产品。借助其提供的JavaScript开发包，开发者能轻松构建高性能、源码开源测试精度高、渲染质量佳的无插件虚拟地球Web应用。

       淹没分析专注于模拟特定区域，在极端洪水情况下的随时间迁移的淹没情况，研究范围涵盖从地块到城市乃至国家级别的区域。

       进行淹没分析需要考虑的参数包括淹没区域范围与水面上升速度。如果研究区域位于平原或地形不显著，模拟效果可能受限。

       具体操作流程如下：

       1. 初始化，加载影像与地形。

       2. 指定研究区域。

       3. 添加polygon实体以可视化显示。

       4. 设定动画效果以呈现淹没过程。

       尽管这是一套基础方法，但也有更高级的做法，如实时计算淹没土方与面积，动态显示研究区域内特定点的实际淹没高度。

       对于希望深入学习与实践的朋友们，源代码可以私信我获取，价格为8.8元。

cesium 之加载地形图 Terrain 篇（附源码下载）

       在探索Cesium的强大功能时，官方网站cesium.io 提供了详尽的API文档和在线示例，是学习这个三维地图库的宝贵资源。

       本文将着重介绍如何使用Cesium实现地形图Terrain的效果，并提供相关源代码示例。首先，地形图的加载涉及到配置选项，如RequestWaterMask和requestVertexNormals，这两个参数用于指示Cesium是否需要额外获取水体和光照效果，它们的默认值为false，可以根据需求进行调整。

       以下是一个直观的展示，演示了地形图加载后如何呈现出丰富的细节和效果：

       （插入地形图加载效果展示）

       如果你对这个功能感兴趣，源代码demo可供下载。想要获取源码的伙伴，可以私信我，价格为8.8元。这将帮助你更好地理解和运用Cesium的Terrain功能。

cesium之地图贴地量算工具效果篇（附源码下载）

       本文将详细展示如何在Cesium中实现地图贴地量算工具功能，并附上源代码下载。

       首先，了解Cesium官网API文档及其在线示例，团购网php源码可为学习Cesium提供宝贵资源。

       实现地图贴地量算工具效果的思路如下：

       1. 首先，需要在Cesium地图中创建一个量算工具对象。

       2. 设置量算工具的相关参数，如量算类型（直线、矩形、区域等）、单位等。

       3. 调用量算工具的量算方法，获取量算结果。

       4. 将量算结果以适当的格式展示在地图上，如在量算点或量算区域上显示量算值。

       实现上述步骤的Cesium源代码如下，感兴趣的读者可以自行下载：

       感兴趣的伙伴们，若需要源代码，可私信我获取，代码价格为8.8元。

Cesium的Property机制总结

       Cesium的Property机制总结

       Cesium的官方教程《空间数据可视化》中提到了关键的Property机制，尤其在Entity API中占有重要地位。然而，这部分教程迟迟未完成，这促使我们自己来解析Property的作用和分类。

       Property的核心在于与时间的关联性，允许在不同时间点动态返回不同的属性值。例如，通过SampledProperty，我们可以创建一个盒子随时间渐变尺寸，无需频繁修改position。代码如下：

       blueBox.box.dimensions = new Cesium.SampledProperty(...);

       Property类型丰富多样，包括SampledProperty（线性插值）、TimeIntervalCollectionProperty（时间区间属性）、ConstantProperty（恒定值，可通过setValue修改）等。CompositeProperty允许组合不同类型的Property以实现复杂的动画效果。

       PositionProperty专门处理位置，具有referenceFrame属性，区分FIXED（地球中心）和INERTIAL（太阳系中心）两种参考系。Cesium提供了PositionProperty的多种子类，如SampledPositionProperty用于动态位置变化。

       MaterialProperty则用于材质，例如ColorMaterialProperty可以动态改变颜色。CallbackProperty让用户自定义返回值，ReferenceProperty则可以链接到其他对象的Property。

       PropertyBag和PropertyArray允许包装对象或数组，提供动态属性的功能。例如，仅修改dimensions的x值：

       new PropertyBag({ dimensions: { x: new SampledProperty(...) } })

       VelocityOrientationProperty和VelocityVectorProperty则用于计算和表示物体的移动方向和速度。

       尽管官方教程延迟，Property机制在Cesium的数据驱动和time-dynamic可视化中扮演了关键角色。欲了解更多详情，可通过GitHub源码获取。

Cesium中文网——如何开发一款地图下载工具[一]

       Cesium中文网： cesiumcn.org/ | 国内快速访问： cesium.coinidea.com/

       Cesium中文网的朋友们其中一个关注点是：独立开发一款地图（瓦片图）下载工具。

       我们将通过多个博客文章[所有用户]和视频[付费用户]的形式来拆分并介绍这个主题。源代码将不断更新并提交到Github，地址：github.com/hujiulin/Map...。源代码对所有用户开放，若您觉得对您有帮助，请给予一个star以示鼓励。

       重剑无锋，大巧不工。

       这个工具将以C#和JavaScript的形式呈现。编程语言只是形式，理解其内部逻辑和流程，您也可以使用Java，Python，PHP或其他开发语言进行实现。

       目前开源的工具非常简单（简陋），但我将定期更新和维护代码。如果您有任何问题，可以在Github上提交issue，或在公众号：Cesium中文网；QQ群：；论坛： cesium.coinidea.com/上留言和提问。

       准备工作：

       找到自己熟悉的一门开发语言，它支持：

       一般来说，现代的开发语言都支持上述大部分功能。本文选择的是C#。在整个主题的中部，会引入JavaScript。

       瓦片图服务器：

       本文选择的是百度地图，其实大部分的瓦片图服务器都会有x, y, z（level）三个参数，百度地图的URL Pattern是：online{ 0}.map.bdimg.com/onlinelab...{ 1}&y={ 2}&z={ 3}&styles=pl&udt=&scaler=1&p=0

       如果我们把x=1, y=1, z=3，在浏览器打开上述URL

       online0.map.bdimg.com/o...

       样例瓦片图

       既然我们已经知道了瓦片图的生成规则，那我们只要指定具体的下载链接，我们就可以下载对应的了。C#的核心下载代码是，这里代码可以轻易地在网络上搜索到：

       瓦片图批量下载：

       接下来我们要做的是：

       之前提到过地图的核心思想是四叉树，所以我们可以再次简单的处理，认为瓦片图也是四叉树构成的，一共分为级（网上可查）左右。那么

       levelminX~maxXminY~maxY~~~~~~4…n1~2^(n-1)1~2^(n-1)

       四叉树

       批量下载的核心代码如下：

       上述的运行代码肯定能下载，但是有很多问题。这些问题将在下一步中进行讨论。

       当前软件界面

       下载结果

       下一步：

       上面的这些问题将在后续的文章中进行介绍。

       声明：

       一般来说，地图服务器需要很大的存储资源和带宽资源，本文仅从学术角度和大家探讨现在的下载软件内部原理，如有错误欢迎大家指正。

       Again: Github地址：github.com/hujiulin/Map...。源代码对所有用户开放，如果大家觉得有益，请轻轻地给一个star进行鼓励。

       本文和软件仅做学术交流，严禁用于商业用途。

       Cesium中文网交流QQ群：

       Cesium中文网： cesiumcn.org/ | 国内快速访问： cesium.coinidea.com/

CesiumJS 源码杂谈 - 从光到 Uniform

       CesiumJS 源码探索：光照与Uniform的转换之旅

       CesiumJS 对光照的处理主要依赖于其底层API与WebGL着色器的交互。尽管它默认只支持一个太阳光，但通过DirectionalLight扩展，可模拟各种光照效果。光在CesiumJS中被转换为Uniform值，以统一的形式传递给着色器执行。

       首先，CesiumJS的光照类型主要包括场景默认的太阳光和DirectionalLight，后者允许设定光照方向。例如，官方示例中的《Lighting》展示了如何运用DirectionalLight创建灯光效果。方向光多了一个方向属性，通常表示为单位向量。

       在源码中，光照信息通过UniformState对象在每帧渲染时传递给Renderer。这个过程始于Scene.js模块的render函数，其中的uniformState会更新来自FrameState的光照参数。当Context对象执行DrawCommand时，ShaderProgram的_uniforms列表会填充来自uniformState的值，包括那些由AutomaticUniforms自动更新的，如光的属性。

       光照Uniform在着色器中的应用十分广泛，如点云着色时使用czm_lightColor，冯氏着色法（Phong）材质通过czm_lightColor进行漫反射和高光计算，Globe.js则在GlobeFS片元着色器中使用czm_lightColor。在Model API的PBR着色法中，czm_lightColorHdr变量在光照阶段的计算中扮演重要角色。

       总的来说，CesiumJS的光照系统通过Uniform的转换，确保光照信息在复杂渲染流程中的顺畅传递。然而，深入研究光照材质，特别是在自定义光照效果方面，仍需要进一步学习实时渲染（RealTimeRendering）的知识。

cesium 笔记-自定义Primitive

       在 Cesium 技术中，`Primitive` 是一个关键接口，尤其对于新手来说，通常会更熟悉 `Entity`。官方也提供了相应的指导文档来解释 `Entity` 和 `Primitive` 的区别。相比之下，`Entity` 在 Cesium 中属于更上层的接口，它封装了一系列的图形，提供了一致的对外 API，更加易于理解和使用。`Entity` 具备强大的属性功能，但性能方面不如更底层的 `Primitive`。而 `Primitive` 更多面向底层图形开发人员，通过 `Geometry` 和 `Appearance` 实现更底层的绘制操作。它提供了接近原始 WebGL 的接口，但在上层进行了一定的封装，使其相对于原始 WebGL 更加易于使用。

       使用 `Primitive` 创建一个矩形并添加贴图，主要代码如下。第一步是创建一个矩形，并添加所需的贴图。在第二步，我们考虑更改皮肤。我们知道，像 Windy 的色斑图渲染通常使用 canvas 方式，而现在我们使用单通道，可以考虑类似 Wind-Layer 的方式在着色器中进行双线性插值和着色，使渲染效果更佳。下面是如何进行改造的步骤。

       在着色器中，我们创建一个 * 1 的 canvas 来兼容渐变色带和非渐变色带，具体效果可以通过观察结果来验证。接着，我们修改材质的 uniforms，并新增一些数据以适应这个变化。然而，到目前为止，我们还无法获得预期效果。我们还需要修改 fabric 以添加一个新的材质着色器。最后，我们改变 options.colorScaleType，将其设置为 step，并指定插值步长，重新查看效果。

       在实现预期效果后，我们提出需求，需要针对瓦片数据进行拾取。基于材质的修改，我们尝试使用默认的 `scene.pick` 方法。虽然结果表明 `Primitive` 被正确拾取，但我们无法获取对应数据位置的像素数据。因此，我们考虑使用鼠标位置计算其在原始灰度数据瓦片的位置，然后读取数据。然而，在处理大规模图像数据时，这种方法在 JS 中操作效率较低。为提高效率，我们应考虑使用类似 `pick` 的方式通过 GPU 进行读取，这需要我们对 `Primitive` 进行自定义。

       自定义 `Primitive` 需要实现以下接口，以达到实现上节效果的目的。关键点包括顶点着色器实现、顶点数据生成、适应 3D 和 2D 渲染需求、数据投影兼容性、渲染过程和拾取操作。在 SCENE3D 下渲染时，代码可以正常工作，但在 SCENE2D 和 COLUMBUS_VIEW 视图中无法渲染。我们在查看 Cesium 相关资料时发现，实际内部使用的顶点数据是区分 3D 和 2D 的。在源码的 `Primitive.prototype.update` 函数中，可以看到它并未直接使用 `vertexArray` 的数据，而是经过了一系列处理步骤。这些步骤包括 `PrimitivePipeline.combineGeometry` 的处理，以及 `loadSynchronous` 和 `createVertexArray` 的具体工作，有兴趣的开发者可以自行查看源码。完成这些处理后，需要根据 `va` 的数量生成多个 `DrawCommand`。

       数据投影兼容性是实现自定义 `Primitive` 的重要部分，特别是在使用不同投影系统时。例如，当使用 Web Mercator 纹理数据时，需要对数据进行重投影计算。在实现中，这一步骤确保了与 Cesium 内部使用的投影系统相兼容。

       在创建 `DrawCommand` 同时，应创建与之对应的 framebuffer 的渲染。这两个渲染是一一对应的，fboShaderProgram 的顶点着色器复用真实绘制的顶点着色器，但在去除灰度值与色带的对应逻辑后，将计算结果保存到 framebuffer 的纹理输出。从 framebuffer 读取像素值的过程较为复杂，需要先将对应数据渲染到 framebuffer，然后读取鼠标位置的颜色值，根据传入参数计算像素值对应的数值。

       在完成以上步骤后，即可实现预期功能，如对鼠标位置的像素值进行计算，进而获取真实值。这涵盖了自定义 `Primitive` 的关键实现过程，包括渲染、拾取操作等，为实现更复杂的图形渲染功能提供了基础。