原文地址:https://cesiumjs.org/tutorials/Terrain-Tutorial/

Cesium支持渐进流式加载和渲染全球高精度地形,并且包含海、湖、河等水面效果。相对2D地图,山峰、山谷等其他地形特征的更适宜在这种3D地球中展示。

地形数据集是巨大的,通常都是GB或者TB级别。在普通3D引擎中,使用底层图形API去高效实现地形数据的可视化需要做很多事情。幸好,Cesium已经完成了这个体力活,而我们只需要写几行代码。

快速开始

从一个示例开始吧。打开Sandcastle中的 Hello World 示例。默认,全球是 WGS84 标准球。 添加下面代码 (在这一行之后 var viewer = ...),即可把Cesium ion上发布的全球地形数据加入到场景中:

viewer.terrainProvider = Cesium.createWorldTerrain();

修改后,按F8运行。先感受下地形效果,缩放到任意山区,按住中键,拖拽让水平视图倾斜。 下面是珠峰的效果:

 
珠峰

当我们拉近一些,Cesium依据当前相机距离以及当前可视范围来请求高精度地形数据。
地形和影像是区别对待的。默认影像是覆盖在地形上的。任意影像provider可以覆盖在任意地形provider上。

开启地形光照和水面效果

Cesium全球地形也包含了地形光照数据,以及水面效果需要的海岸线数据。默认地形服务器不会传递包含这两个额外数据的切片。我们可以在 CesiumTerrainProvider的构造函数配置一下。
开启地形光照,需要VertexNormals扩展。

var terrainProvider = Cesium.createWorldTerrain({
requestVertexNormals: true
});
viewer.terrainProvider = terrainProvider;
viewer.scene.globe.enableLighting = true;

这和上面的珠峰位置相同,但是现在有了基于太阳实际位置的光晕效果。

 
带光照的地形

水面效果也是同样的方法。我们请求WaterMask扩展。

var terrainProvider = Cesium.createWorldTerrain({
requestWaterMask: true
});
viewer.terrainProvider = terrainProvider;

缩放到一片水域。比如旧金山湾:

 
旧金山湾

有一个海浪的动画,以及反射太阳和月亮的光。

可以再去Sandcastle的 地形示例查看一些区域的地形和水面 .

可以使用的地形

Cesium 全球地形,基于Cesium开发的项目只需要几行代码就可以加载。
CesiumLab工具,非常方便的工具,可以对地形数据切片、下载地形、发布地形服务。

地形数据 providers

Cesium使用terrain providers支持几种地形数据请求方法。大部分地形provider通过基于HTTP的REST 接口 去请求地形切片。依据地形数据的组织方式和请求方式不同,Cesium支持下列地形provider:

可以通过实现 TerrainProvider 接口来访问其他地形服务。如果这么做了,请 贡献 给Cesium。
综上所述,使用地形provider,只需要设置 Viewer.terrainProvider。地形provider和影像provider很像,通常地形服务的url地址,以及一个代理服务器配置(当服务不支持CORS跨域访问的时候)。

一些地形provider,比如CesiumTerrainProvider包含海岸线数据能展示动态水面效果。通过修改 CentralBody.oceanNormalMapUrl属性去替换海量的法线贴图,去自定义海浪效果。因为水面颜色和影像颜色是混合的,所以修改影像也会影响水面效果 。

资源

查看Sandcastle中的 地形示例 。帮助手册 所有的地形provider.

 
中国最专业的Cesium开发者社区

Cesium官方教程5--地形图层的更多相关文章

  1. Cesium官方教程4--影像图层

    原文地址:https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/ 影像图层 Cesium支持多种服务来源的高精度影像(地图)数据的加载和渲染.图 ...

  2. 关于Cesium 官方教程

    最近一直在准备第一次QQ群的Cesium基础培训公开课,虽说使用Cesium也有段日子了,但是要说对Cesium了解有多深,还真不一定.原因是一直以来我都是用哪里学哪里.基于多年开发三维数字地球的底层 ...

  3. Cesium官方教程13--Cesium和Webpack

    原文地址:https://cesiumjs.org/tutorials/cesium-and-webpack/ Cesium 和 Webpack Webpack是非常强大非常流行的JavaScript ...

  4. Cesium官方教程6--相机

    相机(Camera) 相机控制了场景的观察视角.有很多相机操控方法,比如旋转.缩放.平移以及飞行定位.Cesium默认支持使用鼠标和触摸事件控制相机.Cesium也提供了一套可编程的相机控制API.这 ...

  5. Cesium官方教程10--高级粒子特效

    原文地址:https://cesiumjs.org/tutorials/Particle-Systems-More-Effects-Tutorial/ 高级粒子系统特效 这篇教程学习更多的效果,包括天 ...

  6. Cesium官方教程9--粒子系统

    原文地址:https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/ 粒子系统介绍 这篇教程带你学习Cesium的粒子相关API,比如如何在你的 ...

  7. Cesium官方教程8-- 几何体和外观效果

    原文地址:https://cesiumjs.org/tutorials/Geometry-and-Appearances/ 几何体和外观效果(Geometry and Appearances) 这篇教 ...

  8. Cesium官方教程7--三维模型

    原文地址:https://cesiumjs.org/tutorials/3D-Models-Tutorial/ 三维模型 (3D Models) 这篇教程给大家介绍,如何在Cesium中通过Primi ...

  9. Cesium官方教程12--材质(Fabric)

    原文地址:https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric 介绍 Fabric 是Cesium中基于JSON格式来描述materi ...

随机推荐

  1. 精度试验结果报告Sleep, GetTickCount, timeGetTime, QueryPerformanceCounter

    一段简单的代码来实现精度试验 int main() {       // 初始化代码       ......       int i = 0;       while(i++ < 1000) ...

  2. 使用JDK自带功能,实现一个简单的Web Service接口发布

    万事开头难,本篇文章的目的就是使用JDK自带的功能,实现一个最简单的Web Service接口的发布. 下图是项目的组成,主要有三个部分,一个接口(WS),一个接口的实现类(WSImp),还有一个接口 ...

  3. 左神算法书籍《程序员代码面试指南》——3_05Morris遍历二叉树的神级方法【★★★★★】

    [问题]介绍一种时间复杂度O(N),额外空间复杂度O(1)的二叉树的遍历方式,N为二叉树的节点个数无论是递归还是非递归,避免不了额外空间为O(h),h 为二叉树的高度使用morris遍历,即利用空节点 ...

  4. 【转载】一定要会用selenium的等待,三种等待方式必会

    转载地址:http://blog.csdn.net/huilan_same/article/details/52544521,感谢博文,学习了 原文: 发现太多人不会用等待了,博主今天实在是忍不住要给 ...

  5. java8 新特性学习笔记

    Java8新特性 学习笔记 1主要内容 Lambda 表达式 函数式接口 方法引用与构造器引用 Stream API 接口中的默认方法与静态方法 新时间日期 API 其他新特性 2 简洁 速度更快 修 ...

  6. Carthage使用

    # carthage 包管理 ## 安装过程 1) 安装homebrew ``` ruby$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githu ...

  7. swagger请求参数在header中添加token

    网友大部分说的是如下配置 参照配置然而没有作用 注掉改红框内的配置,在方法上加如下注释就可以用 @ApiImplicitParams({ @ApiImplicitParam(paramType = & ...

  8. Python全栈开发:基本数据类型

    1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2 ...

  9. vue+ivew使用Collapse 折叠面板把全部面板展开

    1.需求: 在使用搜索功能时候,只显示搜索到的panel并且将搜索到的含有该专家的panel展开,如图                1.html,注意黄色部分,作为每个panel的key值,要唯一 ...

  10. SpringBoot配置自定义日期参数转换器

    1.自定义参数转换器 自定义参数转换器必须实现Converter接口 /** * Created by IntelliJ IDEA. * * @Auther: ShaoHsiung * @Date: ...