生成Cesium地形文件（terrain)，并用Cesium完成调用

Cesium 中的地形系统是一种由流式瓦片数据生成地形的技术。cesiumjs 支持
两种类型的地形，STK World Terrain 和 Small Terrain。

STK World Terrain 是高分辨率, 基于 quantized mesh 的地形。这是一种基
于 TIN 三角网的地形，可充分利用 GL 中的 Shader 来渲染，效果相当逼真。STK
World Terrain 使用了多种数据源，分别适应不同地区和不同精度时的情形。STK
World Terrain 地形是怎样生成的是不公开的，如需应用于封闭的局域网时，则需购
买 AGI 的 STK terrain server。但是 AGI 提供了一个 webapi 可供因特网上调用，并
提供了这种地形的格式细节，期待早日有高手作出一个转换工具。

Small Terrain 是中等高分辨率,基于 heightmap 的地形，渲染出的地形效果
不如 quantized mesh 的地形，但也基本能接受。网上已经有一些开源的生成工具可
以由 DEM 数据生成这种规范的.terrain 文件,因此我们下面重点说明这种类型的地形生
成。

数据准备

• 必须要有坐标系
• 数据格式必须正确
• 如需裁剪，请参考《QGIS使用矢量面裁剪TIF影像》

工具安装

下载cesiumlab实验室的工具

开始切地形

地形发布

请看《深夜总结：使用QGIS切片并用Cesium完成调用》3. 发布切片章节

Cesium调用

	const key="天地图key"
	const terrainProvider = new Cesium.CesiumTerrainProvider({
        url: "http://localhost:8091/terrain_tiles"
    });
    const viewer = new Cesium.Viewer('cesiumContainer', {
       	terrainProvider,
        imageryProviderViewModels: [
            new Cesium.ProviderViewModel({
                name: "天地图影像",
                iconUrl: "/imgs/map/tdt_img.jpg",
                creationFunction: () => {
                    const imgImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                        url: "http://t{s}.tianditu.com/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + key,
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                        tilingScheme: new Cesium.GeographicTilingScheme(),
                        tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
                    })
                    return [imgImageryProvider]
                }
            })
        ]
    })

    const dataSource = Cesium.GeoJsonDataSource.load('../datas/qzgy.geojson', {
        stroke: Cesium.Color.HOTPINK,
        fill:  Cesium.Color.TRANSPARENT ,
        strokeWidth: 3,
        markerSymbol: '?'
    })
    viewer.dataSources.add(dataSource);
    viewer.flyTo(dataSource);

珠穆朗玛峰