Cesium基础教程篇八

Cesium基础教程篇八

---

---

前言

Cesium官网：官网链接
Cesium 是一个开源的、高性能的 3D 地球和地图可视化平台，它允许开发者创建基于 Web 的、交互式的地理空间应用程序。Cesium 的核心是一个 WebGL 驱动的引擎，它能够渲染大规模的地理数据集，支持高精度的地球模型和动态数据可视化。

---

一、Cesium3DTileset介绍

Cesium3DTileset类是Cesium中用来加载大范围3D地理空间数据的接口，比如常见的倾斜模型、BIM、点云数据等等。

1. 倾斜摄影
   

2. BIM
   

3. 点云数据

这些数据的原始格式并不能直接通过Cesium3DTileset类加载，需要转换为Cesium支持的3dtiles格式。
常见的转换工具
1、Cesiumlab
2、Osgblab
3、Dasviewer
等等，感兴趣的可以百度搜索下，是有很多好的产品等待你的发掘

二、Cesium加载3dtiles数据

数据转换为3dtiles格式后，您只需要将数据存储在能够访问到的服务器上，然后将其作为普通静态资源进行加载即可，（推荐使用nginx使用静态资源的方式）。Cesium3DTileset类提供了fromUrl方法来加载我们的3dtiles数据

1、标准方式

 Cesium.Cesium3DTileset.fromUrl(url)
       .then(res => {
           viewer.scene.primitives.add(res);
           viewer.zoomTo(res);
  })

2、参数配置的方式

		let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
          url: 'xxx/tileset.json',
          skipLevelOfDetail: true,
          preferLeaves: true,
          baseScreenSpaceError: 1024,
          skipScreenSpaceErrorFactor: 16,
          skipLevels: 1,
          immediatelyLoadDesiredLevelOfDetail: false,
          loadSiblelings: false,
          cullWithChildrenBounds: true,
          dynamicScreenSpaceError: true,
          dynamicScreenSpaceErrorDensity: 0.00278,
          dynamicScreenSpaceErrorFactor: 4.0,
          dynamicScreenSpaceErrorHeightFalloff: 0.25,
          maximumMemoryUsage: 1024,
        }));
        tileset.readyPromise.then(tileset => {
          window.viewer.flyTo(tileset)
        })

三、高度调整

通常情况下，我们通过Cesium3DTileset加载的数据都是具有正确的高程信息的，这会导致一个问题，就是当我们没有使用地形的情况下，这些数据会漂浮在空中。
1、官网高度调整实例：沙盘实例
2、测试使用

Cesium.Cesium3DTileset.fromUrl(url)
 .then(tileset => {
     viewer.scene.primitives.add(tileset);
     viewer.zoomTo(tileset);
     const cartographic = Cesium.Cartographic.fromCartesian(
         tileset.boundingSphere.center
     );
     const surface = Cesium.Cartesian3.fromRadians(
         cartographic.longitude,
         cartographic.latitude,
         0.0
     );
     const offset = Cesium.Cartesian3.fromRadians(
         cartographic.longitude,
         cartographic.latitude,
         -cartographic.height+30
     );
     const translation = Cesium.Cartesian3.subtract(
         offset,
         surface,
         new Cesium.Cartesian3()
     );
     tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
})

3、运行效果

四、矢量白膜

当没有倾斜摄影的时候，我们经常会通过shp矢量面拉伸制作有立体感的三维数据，我们称之为矢量白膜。我的下载资源里全国62主要城市的白膜可以下载（当前也可以自己去cesiumlab生成）

五、矢量白膜样式

Cesium3DTilset类提供了style属性来设置3dtiles数据的显示风格，这个属性在显示矢量白膜中时很有用，通过style属性，我们可以为矢量白膜设置各种显示风格，用以匹配我们的图风格。
1、沙盘案例：案例
2、测试效果

 tileset.style = new Cesium.Cesium3DTileStyle({
     color: {
         conditions: [
             ['${Floor} >= 16', 'rgb(59 178 208)'], //Floor 数据中的楼层数据 确保数据有该属性字段 可设置其他表达式 如height字段 ${height} >= 106
             ['${Floor} >= 13', 'rgb(21 209 242)'],
             ['${Floor} >= 8', 'rgb(21 209 242)'],
             ['${Floor} >= 3', 'rgb(34 59 83)'],
             ['true', 'rgb(251 176 59)'] //默认
         ] 
     }
 });

3、除了可以使用style属性来设置矢量白膜的样式外，还可以通过customShader属性来通过glsl着色器的方式修改矢量白膜的显示样式。

tileset.customShader = new Cesium.CustomShader({
     lightingModel: Cesium.LightingModel.UNLIT,
     fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
      {
        vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
        // 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
        float _baseHeight = 50.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
        float _heightRange = 380.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
        float _glowRange = 400.0; // 光环的移动范围(高度)
        // 建筑基础色
        float height = position.z - _baseHeight; //position.y数据为y轴朝上
        float a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
        float a12 = height / _heightRange + sin(a11) * 0.1;
        material.diffuse = vec3(0.0, 0.0, 1.0); // 颜色
        material.diffuse *= vec3(a12);// 渐变
        // 动态光环
        float time = fract(czm_frameNumber / 360.0);
        time = abs(time - 0.5) * 2.0;
        float h = clamp(height / _glowRange, 0.0, 1.0);
        float diff = step(0.005, abs(h - time));
        material.diffuse += material.diffuse * (1.0 - diff);
      } `
 })

总结

这是第八章Cesium3dtile的基础知识学习，更多进一步的cesium相关知识请关注我，带你更深层次了解cesium

后续更多和cesium有关的更深度的内容可以在创奇社区找我 点击进入创奇社区