1吉懊、下載tif高程數(shù)據(jù)

（1）地理空間數(shù)據(jù)云：http://www.gscloud.cn/

image.png

image.png

2、將下載的tif數(shù)據(jù)轉(zhuǎn)化成cesium能夠加載的terrain高程數(shù)據(jù)格式

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

image.png

image.png

轉(zhuǎn)化后的數(shù)據(jù)

image.png

3假勿、cesium加載terrain高程數(shù)據(jù)

（1）將terrain文件夾和layer.json復(fù)制到tomcat下，并啟動(dòng)tomcat服務(wù)转培。

image.png

（2）cesium中展示高程數(shù)據(jù)
1恶导、在cesium的沙盒中直接展示：

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

//設(shè)置初始位置
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;
            //設(shè)置靜態(tài)資源目錄
            buildModuleUrl.setBaseUrl('../../static/Cesium/');
            //創(chuàng)建viewer實(shí)例
            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高程數(shù)據(jù)
            var terrainLayer = new Cesium.CesiumTerrainProvider({
                url: "http://localhost:8080/wzf_terrain", // 默認(rèn)立體地表
            });
            this.viewer.scene.terrainProvider = terrainLayer;

            //設(shè)置初始位置
            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