地形数据

Cesium 提供了 TerrainProvider 基类，该 Provider 负责每一个Tile对应的地形数据的构建，定义了一套地形 Provider 需要实现的接口和规范，但它本身并不会参与其中的操作。

基于此类，Cesium为我们封装了 5 个现成的继承类操作地形数据：

Cesium 支持渐进式的加载和渲染全球高精度地形，并且包含海、湖、河等睡眠效果。相对于 2D 地图，山峰、山谷等其他地形特征更适合在 3D 地球中显示。

Cesium 支持两种类型的地形，STK World Terrain 和 Small Terrain（两种地形有什么区别，查看文章）。

清除默认地形图

viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({})

Ellipsoid 地形

EllipsoidTerrainProvider 是默认采用的地形Provider，它不支持水面，没有法向量，所以即使开启光照，对Tile也是无效的。

它提供了全球范围内 高度为 0 的地形，不需要额外的地形文件，加载地图的负担更小（感觉就是平面的地形图，不带有高程数据）。

方式一

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  baseLayerPicker: false,
  terrainProvider: new Cesium.EllipsoidTerrainProvider()
});

方式二

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  baseLayerPicker: false
})

viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider()

ArcGIS 地形

ArcGISTiledElevationTerrainProvider 用于加载 ArcGIS 提供的地形，它是真实的、带高程的地形地图。其原理和 EllipsoidTerrainProvider 一样，因此同样不支持法线和水面，但是它可以选择TileScheme。

与 EllipsoidTerrainProvider 不同之处在于每个切片会根据 ArcGIS 规范请求一张图片，该图片中的像素对应的值就是该像素的高度。

const provider = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl(
  "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
  {
    token:
    "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg.."
  }
);

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  baseLayerPicker: false,
  terrainProvider: provider
});

// 或者
// viewer.terrainProvider = provider;

Cesium 地形

CesiumTerrainProvider 用来加载Cesium官方提供的标准地形地图，该Provider支持两种地形格式，分别为高度图（已废弃）和 带有TIN网格的STK地形。

Cesium 提供的 STK 地形服务，最大的优点就是使用 QuantizedMeshTerrainData 封装了 STK 地形数据格式，支持水面和法线，同时数据量小。

方式一

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  baseLayerPicker: false,
  // 3956的地形图睡眠没有光照，不会呈现出波光粼粼的效果（想实现的话，见方式四）
  terrain: new Cesium.Terrain(
    Cesium.CesiumTerrainProvider.fromIonAssetId(3956, {
      requestVertexNormals: true, // 请求地形照明数据
      requestWaterMask: true      // 请求水体效果所需要的海岸线数据
    })
  )
});

方式二

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

方式三

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  baseLayerPicker: false
})

var provider = await Cesium.CesiumTerrainProvider.fromIonAssetId(3956, {
  requestVertexNormals: true,
  requestWaterMask: true
})

// 通过 viewer 对象的方式设置
viewer.terrainProvider = provider

方式四

const viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  terrainProvider: await Cesium.createWorldTerrainAsync({
    requestVertexNormals: true, // 请求地形照明数据
    requestWaterMask: true, 		// 请求水体效果所需要的海岸线数据
  })
});

// 渲染水体波光粼粼的效果,搭配 terrainProvider 使用,默认true
viewer.scene.globe.showWaterEffect = true;