官网

https://cesiumjs.org/

说明

  • Cesium 基于 Apache 开源协议，支持商业和非商业免费使用

  • 基于 WebGL 的 JS 库，用于在浏览器中创建和显示动画 3D 计算机图形，侧重行星级渲染和 GIS 功能

  • Cesium 是国外一个基于 JavaScript 编写的使用 WebGL 的地图引擎。Cesium 支持 3D,2D,2.5D 形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和 mobile。 Cesium 支持三维地球（3D），二维地图（2D）以及 2.5D 哥伦布视图（2.5D）

  • 优化的 WebGL，充分利用硬件渲染图形，使用低级别的几何和渲染程序

    绘制大范围的折线，多边形，广告牌，标签，挤压以及走廊

    控制摄像头和创造飞行路径

    使用动画控件控制动画时间

参考

  1. 中文网 http://cesium.coinidea.com

  2. 教程 http://cesium.coinidea.com/guide/

  3. 在线演示 https://sandcastle.cesium.com/

  4. API 文档 https://cesium.com/learn/cesiumjs/ref-doc/

  5. 视频学习 https://www.bilibili.com/video/BV1B7411G7HP

资源链接

郑州的3D楼栋模型数据地址：http://49.232.88.135:8080/zzl/tileset.json

太原市3D楼栋模型数据地址：http://49.232.88.135:8080/ty/tileset.json

Cesium ion http://cesium.coinidea.com/guide/

Cesium ion是一个提供瓦片图和3D地理空间数据的平台，Cesium ion支持把数据添加到用户自己的CesiumJS应用中

小结

  1. 切换 2D、2.5D、3D视图效果

  2. 3D 模型

    1
    glb 3D模型数据

  3. 加载影像数据

    1
    2
    3
    ArcGisMapServerImageryProvider
    ArcGISTiledElevationTerrainProvider
    IonImageryProvider

  4. 加载地形数据

    1
    CesiumTerrainProvider

  5. 设置视角

    1
    2
    3
    4
    5
    6
    7
    viewer.scene.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(-122.3472, 47.598, 370),
      orientation: {
        heading: Cesium.Math.toRadians(90),
        pitch: Cesium.Math.toRadians(-90),
      },
    });

  6. 加载 Kml poi 点数据

    1
    KmlDataSource

  7. 加载 Czml 路径数据

    1
    CzmlDataSource

  8. 加载 geojson、topojson 区块数据

    1
    GeoJsonDataSource

  9. 加载 3D 切片

    1
    2
    3
    4
    5
    6
    7
    Cesium3DTileset Cesium3DTilesetStyle

    // Load the NYC buildings tileset
    var tileset = new Cesium.Cesium3DTileset({
      url: Cesium.IonResource.fromAssetId(75343),
    });
    viewer.scene.primitives.add(tileset);

  10. 三模型 gITF 支持动态三维模型

  11. 矢量图形和几何图形

  12. 实时动态展示，4D 展示

CesiumLab

说明

Cesiumlab是一款专为Cesium开源数字地球平台打造的免费数据处理工具集。目前包含 地形数据处理、影像数据处理、点云数据处理、数据下载、矢量数据处理(矢量楼块切片,矢量点转i3dm)、倾斜数据处理、三维场景(obj,fbx,ifc,3ds,dae)处理、BIM数据(revit,ifc,microstation,catia)处理等工具。同时提供一套node.js开发的数据服务器，形成从数据处理、服务发布、三维可视的完整工具链

image-20210917100622058

参考

  1. 官方 https://www.cesiumlab.com/

  2. 操作文档 https://www.cesiumlab.com/#/help

  3. 视频教程 https://www.bilibili.com/video/BV14t41177vm

数据处理

地形切片处理、影像切片处理、矢量楼块切片、矢量点转i3dm、点云切片、人工模型切片处理、倾斜模型转换

数据下载工具

  1. 数据源

    目前支持的影像数据来源 2 个地图，共计 8 个图层，这 2 大地图，一个是谷歌，一个是天地图，谷歌代表了世界上最好的地图精度和效果。而天地图的优势是无偏移的国内数据，基本满足一般项目的需要了，如果需要其他地图，请联系。 地形支持 Cesium 官方的，Agi 全球地形，但是注意，由于众所周知的原因，该地形在国内访问缓慢，建议如果下载地形，请挂载代理服务器。 下载速度基本可以跑满您的带宽。输出为 pak 格式文件

  2. 下载范围

    表示的某个区域在地图上显示的位置。默认显示的是 70,10,130,50，这四个参数分别表示的是东西南北这四个方位的具体位置。

  3. 最大级别

    表示强制设定最大级别。

  4. 请求参数

    显示在地图路径中的参数。

  5. 使用代理

    使用代理服务器。

  6. 输出目录

    输出文件存储位置。

分发服务

image-20210917104835941

三维可视

image-20210917110016491

示例

城市建筑三维白膜数据的制作与效果展示

1. 城市建筑数据的获取

源建筑数据「SHP/GEOJSON/KML」

  • 测绘
  • 购买，例如太乐地图

2. 城市建筑数据的三维白膜建模

注意
  1. SHP数据格式最好是WGS84坐标系
  2. 属性字段中有高度字段
  3. 文件编码最好是UTF-8
步骤

  1. 打开 CesiumLab 软件

  2. 数据处理-矢量楼块切片

  3. 输入文件

    点击输入文件按钮，选择一个 shp 输入文件。系统自动会读取输入数据里的信息，例如建筑数量，字段列表等。如果有错误会弹出错误提示

  4. 建筑高度

    固定高度：所有建筑高度相同，默认高度为 10。

    高度字段：输入的字段值乘高度比率为最终建筑高度。shp 中包含高度字段时选择该选项的高度字段，如 FLOOR , X 3 「单层 3 米」

  5. 底面高度「楼栋底座高度，一般是」

    固定高度：底面高度相同，默认高度为 0。

    高度字段：输入的字段值乘高度比率为最终底面高度。

  6. 其他选项

    楼顶分离：把楼顶和侧面单独构造对象，便于设置不同显示样式。

    构造底面：默认只是构造顶面和测面，构造底面后，每个建筑为封闭几何体。

    绝对高度：勾选后，建筑的模型高度=建筑高度-底面高度。

    强制双面：强制正反面都显示。

    无光照：勾选后，显示的是无光照对建筑物的影响。

    顶点压缩：对生成的三角网进行 draco 压缩，减少存储传输数据量。

    分类单体：生成符合 cesium 分类 3dtiles 标准的 3dtiles，具体看https://www.jianshu.com/p/a1ec34e675a3。

  7. 字段列表

    选择矢量文件后，会自动列出。

    是否存储：勾选后保存到 3dtiles 中。

    名称小写：勾选后字段名变小，比如 Height 在 3dtiles 中存为 height。

    值转数字：比如这里的 Height 字段，类型是 String（字符串），但是实际存的是高度，那么勾选后，3dtiles 中将保存数值类型，数值类型我们可以在设置 3dtiles 样式的时候使用。

    矢量楼块切片字段列表截图

  8. 贴图效果

    条件：为字段设置范围，默认是任意的。

    顶面纹理：建筑物的顶面纹理配置，默认是无纹理的。

    侧面纹理：建筑物的侧面纹理配置，默认是无纹理的。

    矢量楼块切片贴图效果截图

  9. 地形高程

    可选的操作，如果对应的 shp 有地形高程文件，那么选择后，可以处理为 3dtiles 的时候自动附加地表高程。

    这里注意，国内的 shp 一般都是加偏的，但是 dem 都用 srtm 等都是未加偏的，用户最好自己保证数据是否匹配。

    矢量楼块切片地形高程截图

  10. 其他参数

    默认支持的字段中文编码为 UTF8，对于一些国产的 shp 数据，中文可能是 GBK，如果在 cesium 点击查看属性的时候发现乱码，请按 GBK 尝试

    筛选阈值：根据建筑大小决定模型显示的级别。

    误差倍率：调节保存到 tileset.json 中的 gemetricError。

    对象简化：对矢量面做简化，简化阈值单位为米。

    对象缓冲：对矢量面数据做缓冲扩展，单位为米。

    仅外轮廓：仅保留外轮廓，忽略內洞。

    矢量楼块切片地形高程截图

  11. 输出目录

    输出文件存储位置

3. 城市建筑模型的三维可视化

  1. 把CesiumLab处理好的数据放入一个静态资源服务器（Nginx、Tomcat等）中，当然也可以直接使用CesiumLab自己的服务

  2. 得到一个服务地址：“http://localhost:90/beijing_building/tileset.json”。

  3. 在cesium中使用Cesium3DTileset接口加载

  4. 通过3D Tiles Styling language 3D瓦片样式语言 配合 Cesium3DTileStyle 接口来做一些简单的可视化效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    tileset.style = new Cesium.Cesium3DTileStyle({
        color : {
            conditions : [
                ['${Height} >= 100', 'color("purple", 0.5)'],
                ['${Height} >= 50', 'color("red")'],
                ['true', 'color("blue")']
            ]
        },
        show : '${Height} > 0',
        meta : {
            description : '"Building id ${id} has height ${Height}."'
        }
    });
    tileset.style = new Cesium.Cesium3DTileStyle({
        color : 'vec4(${Temperature})',
        pointSize : '${Temperature} * 2.0'
    });