欢迎光临散文网 会员登陆 & 注册

cesium入门路线|基于 WebGL 的地图引擎

2023-10-30 10:53 作者:热爱前端的w  | 我要投稿

1)Cesium 简介

Cesium 是一个不需要插件在浏览器中创建 3D 地球和 2D 地图的 JavaScript 库。它使用 WebGL 来进行硬件加速图形,并且是跨平台、跨浏览器,并且适应于动态数据可视化。

Cesium 是基于 Apache2.0 许可的开源程序。 它可以免费的用于商业和非商业用途。

Cesium是国外一个基于 javascript 编写的使用 webgl 的地图引擎。Cesium 支持 3D,2D,2.5D 形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持。且 支持绝大多数的浏览器和 mobile。Cesium 中支持载入 3D 模型,不过只支持 gltf 格式。  

gltf 是 khronos 组织(起草 OpenGL 标准的那个组织)定义的一种交换格式,用于互 联网或移动设备上展现 3d 内容,充分支持 opengl,webgl,opengles 图形加速标准。  

gltf  目 前 可 以 由 collada  格 式 转 换 而 来 , 官 网 上 也 提 供 了 一 个 转 换 工 具:https://www.khronos.org/gltf

2)Cesium的依赖性

◆基于HTML5标准,无插件,跨平台

◆无法独立运行,依赖于浏览器(CesiumLab基于Electron架构)

◆浏览器又是基于HTTP协议的,所以Cesium要正确运行必须有HTTP Server

◆但是HTTP Server的实现不限于开发语言和服务器,学Cesium可以不用nodejs

3)官方介绍

◆一个开源的javascript三维虚拟地球/地图 ◆https://cesiumjs.org

◆Cesium的目标是动态数据可视化的虚拟地球领导者,尽一切可能去优化性能、精度、效果,易用性、平台支撑、内容.

◆Cesium经过同行的公开评审,单元测试覆盖90%以上代码,完整的文档,以及一个非常专业的开发团队。

4)Cesium的所有功能

◆使用3d tiles 格式流式加载各和不同的3d数据,包含倾斜摄影模型、三维建筑物、CAD和BIM的外部和内部,点云数据。并支持样式配置和用户交互操作。 ◆全球高精度地形数据可视化,支持地形夸张效果.

以及可编程实现的等高线和坡度分析效果。

◆支持多和资源的图像图层,包括VVMS,TMSVMTS以及时序图像。图像支持透明度叠加、亮度对比度、GAMMA、色调、饱和度都可以动态调整.支持图像的卷帘对比。

◆支持标准的矢量格式KML、GeolSON、TopolSON以及矢量的贴地效果。

◆三维模型支持gltf2.0标准的PBR材质、动画、蒙皮和变形效果。贴地以及高亮效果。

◆使用CZML支持动态时序数据的展示。

◆支持各种几何体:点、线、面、标注、公告牌、立方体、球体椭球体、圆柱体、走廊(corridors)、管径、墙体 ◆可视化效果包括: 基于太阳位置的阴影、自身阴影、柔和阴影大气、雾、太阳、阳光、月亮、星星、水面。

◆粒子特效: 烟、火、火花。

◆地形、模型、3d tiles模型的面裁剪

◆对象点选和地形点选。

◆支持鼠标和触摸操作的缩放、渲染、惯性平移、飞行、任意视角.地形碰撞检测。

◆支持3d地球、2d地图、2.5d哥伦布模式。3d视图可以使用透视和正视两种投影方式

◆支持点、标注、公告牌的聚集效果

5)Cesium的知识体系

◆Cesium是一个跨界SDK,涉及三个知识领域

◆Web前端

◆计算机图形学

◆地理信息系统 (GIS)

6)快速入门源码获取

• 官网下载 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教室

7)快速入门的学习路线

Viewer 类学习 一切API的入口 Camera类学习—想去哪里去哪里Cartesian3和Cartographic

lmageryLayer类学习—地球原来如此多姿 (lmageryProvider类)

TerrainProvider类学习 -这才是“真”三维(sampleTerrain

Entity API- 与地球交互起来 

( DataSourceScene.pick、Property)

Cesium3DTileset类—让场景更细致真实点

( Cesium3DTileStyle类

Primitive API- 性能提升第一步 ( Geometrylnstance类、Geometry类

Fabric - 玩点高级的 (Appearance类Material类

ParticleSystem- 锦上添点“花”( Particle类ParticleEmitter类)

8)学习方法—进阶之路

Web前端方向:

 Cesium与webpack (裁剪以及压缩) ,Cesium与vue (框架设计嵌入复杂业务系统),Cesium的UI (UI设计,定制可复用的Cesium交互界面)

◆图形学方向: 

WebGL深入,基于Cesium的可视化定制 (视阑、水淹,水面、热力图,流场图,飞线图,扫描图)

◆数据预处理方向: 

投影变换,空间索引,LOD,3dtile生成,数据存储,数据分发服务,解决超大空间数据如何在Cesium上流畅可视化的问题

9)cesium的基础入门教程

想要获取更多GIS资料、cesium电子书(演示类)、Cesium课程可以添加小北v 备注:cesium

cesium入门路线|基于 WebGL 的地图引擎的评论 (共 条)

分享到微博请遵守国家法律