cesium入门学习4——地形

第一中方式

在创建 new viewer中传入参数

terrain: Cesium.Terrain.fromWorldTerrain(), // 地形数据

javascript 复制代码
 const viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false,//地理编码搜索组件
        homeButton: false,//将视角返回到初始位置
        sceneModePicker: false,//场景控制器,可以切换2D、2.5D(哥伦布视图)、3D场景。
        baseLayerPicker: false,//地图图层组件基础图层选择器,可以选择基础地图服务和地形服务
        navigationHelpButton: false,//帮助按钮导航帮助按钮,显示有关地图控制的帮助信息。
        animation: false,//如果设置为false,则不会创建'动画'小部件。
        timeline: false,//时间轴时间线,指示当前时间,并允许用户跳到特定时间
        fullscreenButton: false,//全屏组件
        // CerditsDisplay
        infoBox: false,//信息框
        selectionIndicator: false,//选取指示器组件 是否显示对象选种框
        navigationInstructionsInitiallyVisible: false,
        vrButton: false,
        shouldAnimate: true,//用于粒子效果打开动画效果 important
        terrain: Cesium.Terrain.fromWorldTerrain(), // 地形数据
        //旧版地形
        // terrainProvider: Cesium.createWorldTerrain(),
        //  terrainProvider:new Cesium.createWorldTerrain({
        //     requestVertexNormals: true, //开启地形光照
        //     requestWaterMask: true, // 开启水面波纹
        // }),
    })

第二种方式

javascript 复制代码
// 添加地形数据
const addWorldTerrainAsync = async (viewer: Cesium.Viewer) => {
    try {
        const terrainProvider = await Cesium.createWorldTerrainAsync({
            requestWaterMask: true,// 开启水面波纹
            requestVertexNormals: true,//开启地形光照
        });

        viewer.terrainProvider = terrainProvider;
    } catch (error) {
        console.log(`Failed to add world imagery: ${error}`);
    }
};

第三种

javascript 复制代码
  //添加地形服务
let url="http://data.marsgis.cn/terrain"
  async addTerrain(url) {
    try {
      var terrainLayer = await Cesium.CesiumTerrainProvider.fromUrl(url, {});
      this.viewer.scene.terrainProvider = terrainLayer;
      return terrainLayer;
    } catch (error) {
      console.log(`Error loading tileset: ${error}`);
    }
  },
相关推荐
avi91112 小时前
【】js不同颜色(Vue 框架)今时今日2026年学编程入门(10月1日)
前端·vue.js·vue·vue框架·前端入门·vue入门·html上传
宠友信息1 天前
社区类源码开发实践中的仿小红书系统技术要点分析
java·spring boot·redis·mysql·uni-app·vue·内容运营
南城以南溫暖如初1471 天前
从零搭建24小时自助健身系统:技术选型与核心模块实战
java·spring boot·redis·mysql·vue·mybatis
fxshy1 天前
WebGIS 游戏化实践:基于 Cesium + Vue3 实现全球飞行模拟系统:从球体坐标、飞行动力学到地形碰撞实战
游戏·vue3·cesium·webgis·飞行模拟
_xaboy1 天前
开源表单设计器 FcDesigner 保存表单教程:toJson parseJson 回显
低代码·开源·vue·表单·fcdesigner
钛态2 天前
Vite 中的 CSS 工程化:从 CSS Modules 到 UnoCSS 的渐进式迁移
前端·vue·react·web
用户83134859306982 天前
Cesium实现动态流动火烧云晚霞效果(可用slider调整火烧云浓度)
vue.js·webgl·cesium
南城以南溫暖如初1472 天前
树洞交友系统架构设计与匿名聊天实战指南
java·spring boot·mysql·系统架构·vue·mybatis·交友
_xaboy3 天前
低代码可视化表单设计器 FcDesigner 远程请求教程:GET POST 变量鉴权
低代码·开源·vue·表单·fcdesigner
CBX4 天前
Cesium 入门实战:GeoJSON 数据加载与地区边界可视化
cesium