Cesium创建地形与自定义地形

夏暖冬凉

已于 2025-07-15 08:39:49 修改

阅读量566

点赞数 11

CC 4.0 BY-SA版权

分类专栏： Web3D 文章标签：前端

于 2025-05-08 12:05:34 首次发布

本文链接：https://blog.csdn.net/qq_45487080/article/details/147782783

Web3D 专栏收录该内容

18 篇文章

订阅专栏

下载数据

在这里插入图片描述

转换数据

下载cesiumlab
在这里插入图片描述

加载目录数据

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

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';

// 设置cesium的访问令牌
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNzMyNjU0OS03MDZkLTQ5ODctYjRkOS1jNzk3ODM2NDMxZTMiLCJpZCI6MzAwMjIxLCJpYXQiOjE3NDY2MDE3NzV9._6lygN0D3PdivFfxC2KbZTcNAA63EU6IMHD0eFh10lg';

// 设置cesium默认视角(默认是美国)
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    // 西边经度
    89.5,
    // 南边纬度
    20.4,
    // 东边经度
    110.4,
    // 北边维度
    61.2
);

// 如果要加载自定义地形，可以通过 “地理空间数据云” 获取数据
const addTerrain = async(viewer) => {
    const terrain = await Cesium.createWorldTerrainAsync({
        requestVertexNormals: true, // 法线
        requestWaterMask: true, // 水纹
    })
    viewer.terrainProvider = terrain
}

onMounted(() => {
    const viewer = new Cesium.Viewer('cesiumContainer', {
        infoBox: false, // 信息框
        terrainProvider: new Cesium.CesiumTerrainProvider({ // 地形
            url: './terrains/gz' // 地形目录
        })
    })

    // 设置地形
    // addTerrain(viewer)

    // 隐藏logo
    viewer.cesiumWidget.creditContainer.style.display = 'none';
});
</script>

<style scoped>
#cesiumContainer {
    width: 100vw;
    height: 100vh;
}
</style>