cesium(三)添加地形

前言

在cesium中，通过将terrainProvider选项传递给Viewer，可以指定不同的地形提供器。地形的效果可以是三维的，包括海洋、湖泊、河流、山峰流体。

2. 使用默认地形

2.1 基础属性

• terrainProvider: 是 Cesium Viewer 的一个属性，用于指定地形数据的来源。地形提供者负责提供 3D 地形数据，以便在地球上进行高质量的可视化。
• requestWaterMask: 如果设置为 true，请求水面掩膜。这会使得地形数据中的水体区域呈现得更真实。
• requestVertexNormals: 如果设置为 true，请求地形的顶点法线，这对于渲染光照和阴影效果非常重要。

2.2 踩坑 createWorldTerrain

很多教程中是这样使用默认的地形：

 let viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider:  Cesium.createWorldTerrain({
        requestWaterMask: true,//请求水面掩膜。这会使得地形数据中的水体区域呈现得更真实。
        requestVertexNormals: true,//请求地形的顶点法线，这对于渲染光照和阴影效果非常重要
      }),
    });

但是在运行的时候报错，提示Cesium.createWorldTerrain is not a function 查看github.com/CesiumGS的变更记录，可以看到如下：

createWorldTerrain was deprecated in CesiumJS 1.104. It will be removed in 1.107. Use createWorldTerrainAsync instead

也就是createWorldTerrain已经在1.107版本上不支持了，所以要用createWorldTerrainAsync来替代。

2.3 使用createWorldTerrainAsync

那么上述的代码的应该修改为：

onMounted(async () => {
 try {
    let viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: await Cesium.createWorldTerrainAsync({
        requestWaterMask: true,//请求水面掩膜。这会使得地形数据中的水体区域呈现得更真实。
        requestVertexNormals: true,//请求地形的顶点法线，这对于渲染光照和阴影效果非常重要
      }),
    });
  } catch (error) {
    console.log(error);
  }
})

3. 使用Cesium ion中的地形

在cesium ion中，也提供了一些可选的Terrain地形图。

可以选择合适的添加到个人权限中。在cesium ion 的My Assets中，提供的写法如下：

viewer.scene.setTerrain(
  new Cesium.Terrain(
    Cesium.CesiumTerrainProvider.fromIonAssetId(1),
  ),
);

如果需要将水面掩膜和地形的顶点法线加上，可以改为：

  viewer.scene.setTerrain(
    new Cesium.Terrain(
      Cesium.CesiumTerrainProvider.fromIonAssetId(1, {
        requestWaterMask: true, //请求水面掩膜。这会使得地形数据中的水体区域呈现得更真实。
        requestVertexNormals: true, //请求地形的顶点法线，这对于渲染光照和阴影效果非常重要
      })
    )
  );

也可以使用terrainProvider的方式将地形一开始就加载上去。

  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1, {
      requestWaterMask: true, 
      requestVertexNormals: true,
    }),
  });

3. 总结

通过地形的展示学习，看到了cesium更加立体和逼真的效果。在学习地形的时候，还有两个全局的设置可以尝试看看。

 viewer.scene.globe.enableLighting = true;
 viewer.scene.globe.depthTestAgainstTerrain = true;

• enableLighting:默认值为false。设为true启用场景光源照明地球仪。
• depthTestAgainstTerrain:默认值为false。用于控制相机查看对象时是否进行深度测试，从而确保对象与地形的交互效果。实现的效果更贴近自然，确保场景中的物体在视觉上正确的与地形相交。