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>
相关推荐
Jason-河山1 小时前
「铭记历史 珍爱和平」勿忘9.18!
前端
国王不在家1 小时前
keyof和infer
前端
猿大撒1 小时前
Spring-data-redis
前端·bootstrap·html
帅过二硕ฅ2 小时前
uniapp点击跳转到对应位置
前端·javascript·uni-app
正小安5 小时前
URL.createObjectURL 与 FileReader:Web 文件处理两大法宝的对比
前端·javascript
赵广陆5 小时前
SprinBoot+Vue宠物寄养系统的设计与实现
前端·vue.js·宠物
A黄俊辉A6 小时前
vue3中把封装svg图标为全局组件
前端·javascript·vue.js
老贾爱编程6 小时前
VUE实现刻度尺进度条
前端·javascript·vue.js
F2E_Zhangmo6 小时前
vue如何做到计算属性传参?
前端·javascript·vue.js
繁依Fanyi7 小时前
828华为云征文|华为Flexus云服务器搭建OnlyOffice私有化在线办公套件
服务器·开发语言·前端·python·算法·华为·华为云