1、下载tif高程数据

（1）地理空间数据云：http://www.gscloud.cn/

image.png

image.png

2、将下载的tif数据转化成cesium能够加载的terrain高程数据格式

使用工具cesiumlab：https://www.cesiumlab.com/

image.png

image.png

转化后的数据

image.png

3、cesium加载terrain高程数据

（1）将terrain文件夹和layer.json复制到tomcat下，并启动tomcat服务。

image.png

（2）cesium中展示高程数据
1、在cesium的沙盒中直接展示：

var viewer = new Cesium.Viewer('cesiumContainer');
var terrainLayer = new Cesium.CesiumTerrainProvider({
         url: "http://localhost:8080/wzf_terrain", 
});
viewer.scene.terrainProvider = terrainLayer;

//设置初始位置
viewer.camera.setView({
    destination:Cesium.Cartesian3.fromDegrees(80, 30, 10000)
});

image.png

2、在vue工程中展示

<template>
    <div id="cesiumDiv">
        <div id="cesiumContainer">

        </div>
    </div>
</template>

<script>
    import Cesium from 'cesium/Source/Cesium.js'
    import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
    import "cesium/Source/Widgets/widgets.css";

    export default {
        name: 'CesiumTest',
        components:{},
        data () {
            return {
                viewer:''
            }
        },
        mounted:function(){
            var _this = this;
            //设置静态资源目录
            buildModuleUrl.setBaseUrl('../../static/Cesium/');
            //创建viewer实例
            this.viewer = new Cesium.Viewer('cesiumContainer',{
                animation: false,
                baseLayerPicker: false,
                fullscreenButton: false,
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                selectionIndicator: false,
                timeline: false,
                navigationHelpButton: false,
                infoBox: false,
                navigationInstructionsInitiallyVisible: false,
                imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
                    url:"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
                    layer:"tiandituImg",
                    style:"default",
                    format:"image/jpeg",
                    tileMatrixSetID:"tiandituImg",
                    show:true,
                    maximumLevel:18
                })
            });
            this.viewer._cesiumWidget._creditContainer.style.display = "none";  //去掉logo

            //加载terrain高程数据
            var terrainLayer = new Cesium.CesiumTerrainProvider({
                url: "http://localhost:8080/wzf_terrain", // 默认立体地表
            });
            this.viewer.scene.terrainProvider = terrainLayer;

            //设置初始位置
            this.viewer.camera.setView({
                destination:Cesium.Cartesian3.fromDegrees(80, 30, 10000)
            });
            
            _this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        },
        methods:{

        }
    }
</script>


<style scoped>
    #cesiumDiv{
        width:100%;
        height:88%;
        position: absolute;
        top:76px;
    }
    #cesiumContainer{
        width:100%;
        height:100%;
    }
</style>

image.png