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}`);
    }
  },
相关推荐
liangshiwei5 小时前
ABP x Vue:介绍 ABP Vue UI
vue·abp
frjc2 天前
前端技术选型:主流方案对比与落地建议
vue·react·angular
ss2732 天前
AI全栈实战 | 2.3-01 组件库实战:Element Plus 怎么搭出专业界面,过度封装为什么成维护负担
前端·javascript·elementui·vue
夜郎king2 天前
基于 Cesium + 天地图的三维地理可视化:以“岳麓山名人墓“为例,详解地形夸张、自动环绕与标签碰撞避让
cesium·实景三维·人文历史
zzZ··*4 天前
CodeBuddy 用量看板:本地解析 Token 与积分消耗,不联网不上传
python·vue·ai编程
EatFan4 天前
Go语言全栈实战:基于 Gin + Vue + JWT + RBAC 从零搭建前后端分离权限管理系统
vue.js·golang·go·vue·gin·jwt·rbac
就叫年华吧丶5 天前
长文档点目录定位总是不准?一个 content-visibility + 平滑滚动引发的连环坑(Vue3 实战)
前端·javascript·算法·vue
今年下半年6 天前
【VUE3】移动端:使用腾讯地图显示区域统计与放大显示资产点位
javascript·前端框架·vue·地图
志尊宝7 天前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
志尊宝13 天前
Vue3 零基础每日笔记(055):组件里正确使用 store——storeToRefs 解构与 $patch 批量修改
笔记·vue·html·前端开发·软件开发