皮皮网

1.CesiumJS 技术博客：glTF 模型（Model）加载新架构
2.教程 - 深度探讨在 Vue3 中引入 CesiumJS 的源码最佳方式
3.常见的三维可视化方法及总结之Cesium.js
4.CesiumJS 1.93下载并安装到Nginx运行（Win10）
5.Cesium常用功能封装，js编码，源码每个功能独立封装——第2篇
6.CesiumJS 更新日志 1.96 与 1.97 - 新构建工具 esbuild 体验及 Model API 更替完成

CesiumJS 技术博客：glTF 模型（Model）加载新架构

       在CesiumJS中，源码有一个长期的源码合作伙伴关系与glTF模型。早在年，源码CesiumJS就实现了第一个glTF加载器，源码源码转让社区社区当时称为“WebGLTF”。源码过去十年，源码glTF经历了多个版本迭代，源码从1.0到2.0，源码引入了PBR材质，源码社区扩展也日益丰富。源码最近发布的源码下一代3DTiles直接使用了glTF，允许在顶点级别编码属性元数据。源码为了适应这些变化，源码CesiumJS团队经过深思熟虑，设计了新的模型加载架构。

       新架构采用了一系列设计目标，以实现一个更强大的加载器。GltfLoader类负责获取.glb或.gltf文件及任何外部资源，如二进制文件和贴图图像文件。通过一系列转换，生成的ModelComponents对象结构类似glTF的JSON部分，但填充了CesiumJS特有的对象。例如，纹理对象被转换为CesiumJS的Texture实例。此架构还整合了来自下一代3DTiles的扩展（如EXT_mesh_features、EXT_structural_metadata），以获取更丰富的信息。此机制支持资源的共享，减少存储空间和网络传输压力。

       为了优化加载流程，CesiumJS引入了全局资源缓存机制，apk生成iapp源码确保资源仅加载一次，减少内存占用。同时，它利用并行网络请求来最大化数据传递效率。新架构显著提高了模型加载的灵活性和性能。

       渲染设计方面，CesiumJS引入了模块化管线阶段概念，支持静态和动态生成着色器代码。这使得渲染过程更加灵活，适应各种用户需求，同时保持代码的可维护性。管线阶段包括顶点着色器、片段着色器等，每个阶段都有对应的GLSL函数，以实现高度定制的渲染效果。

       与3DTiles集成后，新架构不仅简化了渲染流程，还提升了与glTF的兼容性，使得开发体验更加一致。这不仅增加了3DTiles的灵活性，还为后续的升级和扩展提供了便利。

       总的来说，CesiumJS的新模型加载架构旨在提供更强大、更灵活的加载和渲染机制，适应glTF和3DTiles的最新发展，同时优化性能和内存管理。这标志着CesiumJS在模型加载领域迈出了重要一步，为未来的开发和创新提供了坚实的基础。

教程 - 深度探讨在 Vue3 中引入 CesiumJS 的最佳方式

       在 Vue3 中引入 CesiumJS 的最佳实践已有所更新，考虑到 Vite 4.0的升级和CesiumJS的重大变化，建议参考新的教程，其内容更为详尽且包含图文说明。api接口对接源码

       在 Vue3的背景下，由于Vue2的组件内数据处理方式可能导致性能问题，Vue3提供了markRaw函数来处理复杂状态对象。本文将专注于基于Vue3的引入方法。

       了解基本概念前，CesiumJS是一个庞大的JavaScript库，通常使用官方构建版本而非源码。在项目中，CesiumJS的主库和静态资源需要正确配置。推荐使用Vite作为开发工具，因其快速且能有效管理依赖。使用create-vue脚手架创建项目，并配置pnpm以保持依赖版本稳定。

       在引入CesiumJS时，避免直接import模型文件，因为Vite不支持自动处理。外部化CesiumJS为外部依赖，利用vite-plugin-external和vite-plugin-html-config插件。记得在配置中指定资源访问路径，区分开发和运行时路径。

       创建项目时，确保安装NodeJS和npm或pnpm。使用create-vue脚手架创建项目，并锁定CesiumJS版本。配置外部依赖，指定资源复制脚本，以及使用环境变量CESIUM_BASE_URL来指定资源的运行时路径。

       为了跨组件共享 Viewer 对象，推荐使用全局状态管理库pinia，标记 Viewer 为非响应式，以优化性能。最后，靓号asp源码附带的示例工程包含了上述所有步骤的详细代码，供读者参考。

       请注意，实际代码可能与本文中展示的略有不同，完整工程请自行下载和研究。

常见的三维可视化方法及总结之Cesium.js

       三维可视化方法之Cesium.js简介及优缺点

       Cesium.js，一款由Analytical Graphics, Inc. (AGI) 开发并开源的GIS工具，凭借其地理空间数据支持和丰富的GIS功能，成为智慧城市和数字孪生领域中三维可视化的热门选择。官网 cesium.com 提供了丰富的示例和教程，便于用户入门和实践。

       Cesium.js的主要优点包括：

       地理空间数据处理能力强：支持地球空间坐标系，可用于测量距离、面积等，且支持开挖分析、淹没分析等专业应用。

       兼容多种3D数据格式：包括倾斜摄影模型、点云和BIM模型，采用3D Tiles优化数据加载，提升渲染效率和交互性。

       多视角支持：提供3D地球、2D地图和2.5D哥伦布模式，以及不同天气效果。

       然而，Cesium.js也存在一些不足：

       早期版本的渲染质量欠佳，存在锯齿，但在Cesium 1.版本中有所改善。

       交互性相对较弱，开发者可能需要结合three.js以增强动态交互。

       总的来说，Cesium.js适用于以下场景：

       长线路工程的定位和标绘，如GIS功能集成。spring mvc 源码视频

       灾害防御和预警系统中的空间分析和地质分析。

       工程规划中的空间分析和标绘。

       数字孪生流域中的空间可视化。

       多模型融合，如倾斜摄影、BIM和点云的集成应用。

       海陆空交通分析，如航线、调度和时空分析。

CesiumJS 1.下载并安装到Nginx运行（Win）

       CesiumJS是一个用于网络上3D地理空间可视化的开源JavaScript库，支持3D、2D、2.5D形式的地图展示，并提供自定义图形绘制、高亮区域等功能，且兼容大多数浏览器与移动设备。

       官网为 cesium.com/，无需注册即可浏览。

       官网页面包含在线示例，通过浏览器访问 sandcastle.cesium.com/ 即可体验，仅需一行代码“const viewer = new Cesium.Viewer("cesiumContainer");”即可显示3D场景。

       CesiumJS提供下载页面 cesium.com/downloads/，用户无需注册即可下载所需文件。

       下载后解压，文件名为“Cesium-1..zip”，解压后存放于Nginx安装目录下，通常位于“D:\Programs\nginx-1..0\conf”。

       在“nginx.conf”配置文件中添加server配置，内容如下：

       启动Nginx后，浏览器输入网址 /kasteluo/... 以获取更多关于CesiumJS的信息。

Cesium常用功能封装，js编码，每个功能独立封装——第2篇

       Cesium功能封装与js编码

       此文章聚焦于Cesium的常用功能，通过js编码实现每个功能的独立封装，便于直接应用至项目中。实现前端独立运行，项目集成了Vue3、js与ElementUI-Plus的前端框架，以及Spring Boot、Mysql和Redis的后端架构，GIS引擎选用Cesium，同时支持OpenLayers等其他GIS引擎的编码案例。

       功能列表涵盖广泛，包括但不限于：

       1. 点聚合-JSON

       2. 气象站加载与优化

       3. 导航与比例尺

       4. 飞机飞行模拟

       5. 卫星控制

       6. 右键菜单与操作

       7. 遮罩反选功能

       8. 热力图展示

       9. 鹰眼多视图与自定义视图模式

       . 坡度分析

       . 高程分析与地形显示

       . 光照与透明度调整

       . 通视分析与环视分析（基于故宫geojson加载）

       . 淹没分析（基于故宫geojson加载）

       . 卷帘对比与卷帘分析

       . Gltf吊车模型与演示

       . 大雁塔模型展示

       . 3DTiles+楼群渲染

       . 高动态范围与模糊效果控制

       . 辐射圈分析

       . 动态墙模拟

       . GIF动图生成

       . 风场模拟与粒子效果

       . 流动水面渲染

       . 天际线展示

       . 道路穿梭与渲染方式

       . 道路闪烁效果

       . 火焰粒子效果

       . 下雨与雪花效果模拟

       此文章旨在提供全面的Cesium功能封装与js编码实践，为开发者提供直接应用于项目的强大工具集。

CesiumJS 更新日志 1. 与 1. - 新构建工具 esbuild 体验及 Model API 更替完成

       本文将对CesiumJS的1.与1.版本进行概述，并详细介绍构建工具esbuild的使用与新Model API的更替。对于1.版本，主要更新内容包括两项过期API消息。至于1.版本，尽管尚未发布，但在源码仓库中已完成Model API的替换，相关更新内容将持续更新。

       在新构建工具esbuild的引入中，CesiumJS项目经历了重大改进，包括优化代码构建过程，减小发行版库文件体积，提升加载速度以及解决Linux系统中Chrome浏览器的长期问题。esbuild的使用不仅带来更小体积的库文件，还加速了构建过程，显著缩短了网络加载时间。

       esbuild与Rollup的对比显示，CesiumJS在构建过程中存在未进行轻量化与最小化处理的问题。因此，选择esbuild作为构建工具，以替代Rollup，来实现ESModule到库文件的转换，同时解决WebWorker的遗留问题。目前，由于Firefox仍未在WebWorker中支持ESModule，开发人员暂时使用Rollup和RequireJS解决此问题。一旦Firefox更新支持，CesiumJS将完全切换至esbuild。

       构建过程中的重头戏包括旧构建指令的移除与新指令的用法。官方对构建脚本进行了重新评估和设计，包括构建、build-ts、build-docs、release等关键指令的引入或变更。这些更新旨在优化构建过程，提高效率并确保兼容性。

       使用esbuild进行构建后，CesiumJS的性能显著提升。例如，与使用gulp时的构建速度相比，使用build指令的加速效果十分明显，从加载时间到库文件大小，都实现了优化。此外，基于HTTP2的CDN传输体积也能进一步提升加载速度。

       未来CesiumJS可能考虑转向TypeScript，并在Firefox支持ESM后，彻底移除RequireJS和Rollup，以进一步加速构建过程和减小发布版本的库代码。对于开发者而言，了解如何最优地引入CesiumJS并利用CDN加速，以及避免应用打包器对CesiumJS的额外打包，将是提高项目性能的关键。

Cesium常用功能封装，js编码，每个功能独立封装——第1篇

       Cesium的强大功能，逐一探索与封装

       在前端开发中，Cesium的GIS引擎提供了丰富的功能，我们将其精心封装，使得每一项特性都能独立使用，无缝融入到项目中。无需额外配置，只需几步操作，就能享受到强大的地理信息处理能力。

       前端实战示例

       这款基于Vue3、ElementUI-Plus的前端脚手架，与Spring Boot和Mysql、Redis后端完美集成，为你的项目提供了完整的解决方案。对于GIS功能的研究者，可以直接使用前端框架，无需深入后端细节。

       直观操作体验

       功能点清晰明了，如图1所示，系统运行界面直观展示项目效能。通过独立封装，每个功能都拥有独立的文件夹，只需复制到新项目中，如图4所示，只需实例化对象并调用相应方法，即可实现高程分析等效果，如图5所示的全球视角和地面空中视角切换。

       实用功能概览

二三维切换- 如图7和图8展示

地图导出- 二维和三维场景下的导出功能，如图9所示

空间几何- 简单的点线面加载，图中可见

测量工具- 包括测距、侧面测量和地形高度测量，如图和图

图层管理- 图演示图层切换功能

全球影像加载- 图展示了单张静态的加载，来自网络，版权信息请自行处理

天气效果- 雨水和雪天效果，如图和图

经纬网展示- 两地坐标标注，图和图

地理区域加载- 国家省份示例，如图，通过Cesium.GeoJsonDataSource加载

地形处理- 加载和移除地形，如图

视觉效果- 天空盒子切换，图

图形绘制- 点、线、面、圆、矩形绘制，获取坐标数据，图至图

标绘与保存- 实时标绘并记录坐标，图

数据聚合- 地理数据的点聚合，如图

       每项功能都经过精心设计，旨在提升开发效率，让你在Cesium的世界中游刃有余。了解更多详情，欢迎查看第二篇更深入的封装内容，视频演示链接同样精彩。

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）的知识。