supermap Iclient3d for cesium加载地形并夸大地形

用你的胜利博我一笑吧2024-09-16 9:02

先看效果图

这是没有夸张之前的都江堰

这是夸大五倍后的都江堰

下面展示代码

主要就是加载supermaponline的skt地形然后夸大

复制代码

<template>
    <div class="PartOneBox">
        <div id="cesiumContainer"></div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive,onMounted} from 'vue'


onMounted(async()=>
{
        let viewer = new Cesium.Viewer('cesiumContainer',
            {
                    //加载supermaponline的地形
                terrainProvider : new Cesium.CesiumTerrainProvider({
                url :"https://www.supermapol.com/realspace/services/3D-                    stk_terrain/rest/realspace/datas/info/data/path",
            requestWaterMask : true,
            requestVertexNormals : true,
            //如果是iserver发布则true
			isSct : false
        })
            }
        )
        var utc=Cesium.JulianDate.fromDate(new Date("2024/08/26 9:30:00"))
        viewer.clock.currentTime=Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate())
        var labelImagery = new Cesium.TiandituImageryProvider({
            mapStyle: Cesium.TiandituMapsStyle["IMG_C"],//天地图全球中文注记服务
            token: "这里换成你的" //由天地图官网申请的密钥
        });
   
        viewer.imageryLayers.addImageryProvider(labelImagery);
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(
            103.88025,30.828544,100000
            )
        })

         //夸大五倍
        viewer.scene.terrainExaggeration = 5.0;
})

</script>

<style scoped lang='scss'>
.PartOneBox
{
    width:1200px;
    height:1000px;
    margin:50px auto;
    position:relative;
    .cesiumContainer
    {
        width:100%;
        height:100%;
    }
}


</style>