Cesium基础（二）：加载地形

青山Coding
1,771 阅读3分钟

cesium加载地形

  引言：cesium加载地形是一个很常见的需求，地形加载完成后 会提供更加真实的地球表面信息，为其余需求提供更真实的场景。比如：路径规划、3D模型加载、方量分析、淹没分析等等。

  其次，一般情况下，cesium图层、地形相关在初始阶段学习时在获取到官方Token后使用官方托管的数据即可，但是在某些特殊环境下，必须断网开发部署使用时，就需要本地私有化部署地形、图层资源。后面我会单独出一篇关于自行下载地形、图层的私有化部署的文章。

  • 关键API： 其实在cesium地球初始化完成后，加载默认地形是一件很简单的事。关键API如下：
cesium.createWorldTerrainAsync({
    requestWaterMask: true, // 请求水域效果
    requestVertexNormals: true// 请求顶点法线（增强光照）
})
官方API介绍：Creates a CesiumTerrainProvider instance for the Cesium World Terrain.
【创建一个用于 Cesium 世界地形的 CesiumTerrainProvider 实例。】
Returns:A promise that resolves to the created CesiumTerrainProvider
【返回的是一个Promise类型的CesiumTerrainProvider实例】
参数：水体效果是否展示，反光和动态效果

这个API可以直接写在cesium初始化的配置项中，但是在配置项上加上后会导致页面初始化卡顿，所以可以根据需要来加载。

  • 具体实现： 有时候加载地形后需要增强地形的细节或者视觉效果的优化，可以通过地形夸张来放大或缩小地形的垂直高度来增强视觉效果或数据表现。但是不同版本的cesium实现地形夸张的API接口有所变化，最新的接口为verticalExaggeration，类型为Number。具体我放到下方。
<script setup>
import * as cesium from "cesium";
import { onMounted } from "vue";
import { useCesium } from "@/hooks/useCesium";
let viewer = null
// 加载地形
const addTerrain = async () => {
    try {
        const terrain = await cesium.createWorldTerrainAsync({
            requestWaterMask: true,// 请求水体效果所需要的海岸线数据
            requestVertexNormals: true// 请求地形照明数据
        })
        viewer.terrainProvider = terrain
    } catch (err) {
        console.log(err);
    }
}
// 地形夸张
const overstated = () => {
    // 相机飞行到具体地点
    viewer.camera.flyTo({
        destination: cesium.Cartesian3.fromDegrees(116.39, 39.91, 2000),
        orientation: {
            pitch: cesium.Math.toRadians(-30)
        },
        complete: () => {
            // 确保相机高度计算包含夸张参数
            viewer.scene.camera.undergroundMode = true; // 启用地下模式（可选）
        }
    });
    // 以前地形夸张的操作
    // viewer.scene.globe.terrainExaggeration = 4
    // 现在垂直地形夸张的操作，默认值0
    viewer.scene.verticalExaggeration = 4
    // 垂直地形夸张相对高度，默认值0
    viewer.scene.verticalExaggerationRelativeHeight = 0.1
}
onMounted(() => {
    const earth = document.querySelector("#earth");
    viewer = useCesium(earth);
    // 开启地形深度检测
    viewer.scene.globe.depthTestAgainstTerrain = true;
});
</script>
<template>
    <div class="content">
        <div class="earth" id="earth"></div>
        <div class="ribbon">
            <div class="flex js-left mb10">
                <el-button class="mb10" type="primary" size="small" @click="addTerrain">加载地形</el-button>
                <el-button class="mb10" type="primary" size="small" @click="overstated">地形夸张</el-button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    position: relative;

    .earth {
        width: 100%;
        height: 100%;
    }
    .ribbon {
        width: 200px;
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 99;
    }
}
</style>

viewer：cesium初始化实例，它将所有标准的Cesium小部件组合成一个可重用的包。小部件始终可以通过使用mixin进行扩展，这为各种应用程序添加了有用的功能。
terrainProvider：new Cesium.TerrainProvider() <地形提供者，为地球提供地表几何形状。>
camera：cesium相机，即视角。
scene：Cesium虚拟场景中所有3D图形对象和状态的容器。通常，场景不是直接创建的，而是由CesiumWidget隐式创建的。
  • 实现效果与总结： cesium地形加载，水体效果显示如下：以太湖金庭镇所在的小岛为例，对比图就不放出来了，下方是加载地形后垂直地形夸张放大4倍，垂直地形夸张相对高度放大0.1倍的效果。

捕获.PNG

以上就是cesium初始化加载地形的功能，如果有bug欢迎在下方留言指出，最近在整理工作学习cesium的并记录下来，后面代码会放到git上开源。

avatar
文章
阅读
粉丝