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}`);
    }
  },
相关推荐
RuoyiOffice18 小时前
SpringBoot+Vue3 企业云盘系统设计:文件上传+共享权限+收藏分类+5GB空间控制——从“网盘孤岛”到“企业知识底座”
spring boot·uni-app·vue·文件管理·云盘·网盘·ruoyioffice
T畅N1 天前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
吴声子夜歌1 天前
Vue3——使用Mock.js
javascript·vue·mock.js
abcnull2 天前
Springboot+Vue2的Web项目小白入门Demo快速学习!
java·elementui·vue·maven·springboot·web·小白
RuoyiOffice2 天前
SpringBoot+Vue3 企业假期余额系统设计:账户、流水、预占、销假退回与到期清零全链路拆解
spring boot·后端·spring·vue·hr·企业管理软件·ruoyioffice
爱看书的小沐2 天前
【小沐学WebGIS】基于Cesium.JS与jsbsim联动三维飞行仿真(OpenGL、Cesium.js、Three.js)
c++·qt·three.js·opengl·cesium·jsbsim
abcnull3 天前
传统的JavaWeb项目Demo快速学习!
java·servlet·elementui·vue·javaweb
RuoyiOffice3 天前
SpringBoot+Vue3 实现 OA 公文外来文与归档台账:外部收文、BPM办理、三类公文统一归档
spring boot·微服务·uni-app·vue·ruoyi·anti-design-vue·ruoyioffice
RuoyiOffice3 天前
SpringBoot+Vue3 企业考勤如何处理法定假期?节假日方案、调休补班与工作日判断链路拆解
spring boot·后端·vue·anti-design-vue·ruoyioffice·假期·人力
REDcker4 天前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js