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

先看效果图

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

这是夸大五倍后的都江堰

下面展示代码

主要就是加载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>
相关推荐
醉の虾16 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧24 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm34 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter