原文地址: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. win 安装composer (详细教程)

    Composer是PHP的一个依赖管理工具,申明项目所依赖的代码库,它会在项目中为你安装,所以在实际项目开发中很方便,那么如何安装呢?今天就与大家分享下. 1首先下载好Composer,文件为exe类 ...

  2. Spring 声明式事务管理(11)

    案例分析 本案例是图书管理系统精简部分,在数据库中有3张表.分别保存图书库存.图书信息和用户信息.下面是建表SQL语句 1 DROP TABLE IF EXISTS store; 2 DROP TAB ...

  3. linux常用软连接使用ln -s

    [软连接]另外一种连接称之为符号连接(Symbolic Link),也叫软连接.软链接文件有类似于Windows的快捷方式.它实际上是一个特殊的文件.在符号连接中,文件实际上是一个文本文件,其中包含的 ...

  4. (转)行为树(Behavior Tree)实践(1)– 基本概念

    通过一个例子来介绍一下行为树的基本概念,会比较容易理解,看下图: 这是我们为一个士兵定义的一颗行为树(可以先不管这些绿圈和红圈是干吗的),首先,可以看到这是一个树形结构的图,有根节点,有分支,而且子节 ...

  5. python+selenium中webdriver相关资源

    Chrome chrome的webdriver :  http://chromedriver.storage.googleapis.com/index.html chrome的webdriver需要对 ...

  6. JavaSE_12_序列化流和打印流

    1.1 序列化流概述 Java 提供了一种对象序列化的机制.用一个字节序列可以表示一个对象,该字节序列包含该对象的数据.对象的类型和对象中存储的属性等信息.字节序列写出到文件之后,相当于文件中持久保存 ...

  7. js实现获取两个日期之间所有日期的方法

    function getDate(datestr){ var temp = datestr.split("-"); var date = new Date(temp[0],temp ...

  8. 更改git提交显示的用户名

    问题描述 同一项目多人开发难免会用到版本控制,最为流行的当属git.开发中出现一个小问题,每个人提交后显示的用户名,如下图 组长发话:把用户名都改成自己的名字! 这时发现用户名并不是自己的名字,怎么改 ...

  9. vue alert插件(标题为图片)(自写)

    <template> <div class="modelSelf"> <div class="model" @click=&quo ...

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

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