Cesium官方教程5--地形图层
原文地址: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:
- Cesium 标准地形 -高经度全球地形,地形支持光照和水面效果。地形切片使用quantized-mesh v1.0格式。 Cesium中使用 CesiumTerrainProvider.
- Google Earth Enterprise -通过高度图(height map)方式生成地形。 Cesium中使用 GoogleEarthEnterpriseTerrainProvider.
- VT MAK VR-TheWorld Server - 从 VR-TheWorld Server请求地形切片。 这个服务数据是90米采样精度的全球数据,并且包含水深数据。Cesium中使用 VRTheWorldTerrainProvider.
- Ellipsoid - 光滑椭球体。这个地形不请求任何服务数据,也没有任何地形起伏效果。一般用作一些太空类展示项目。 Cesium中使用 EllipsoidTerrainProvider.
可以通过实现 TerrainProvider 接口来访问其他地形服务。如果这么做了,请 贡献 给Cesium。
综上所述,使用地形provider,只需要设置 Viewer.terrainProvider。地形provider和影像provider很像,通常地形服务的url地址,以及一个代理服务器配置(当服务不支持CORS跨域访问的时候)。
一些地形provider,比如CesiumTerrainProvider包含海岸线数据能展示动态水面效果。通过修改 CentralBody.oceanNormalMapUrl属性去替换海量的法线贴图,去自定义海浪效果。因为水面颜色和影像颜色是混合的,所以修改影像也会影响水面效果 。
资源
查看Sandcastle中的 地形示例 。帮助手册 所有的地形provider.
Cesium官方教程5--地形图层的更多相关文章
- Cesium官方教程4--影像图层
原文地址:https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/ 影像图层 Cesium支持多种服务来源的高精度影像(地图)数据的加载和渲染.图 ...
- 关于Cesium 官方教程
最近一直在准备第一次QQ群的Cesium基础培训公开课,虽说使用Cesium也有段日子了,但是要说对Cesium了解有多深,还真不一定.原因是一直以来我都是用哪里学哪里.基于多年开发三维数字地球的底层 ...
- Cesium官方教程13--Cesium和Webpack
原文地址:https://cesiumjs.org/tutorials/cesium-and-webpack/ Cesium 和 Webpack Webpack是非常强大非常流行的JavaScript ...
- Cesium官方教程6--相机
相机(Camera) 相机控制了场景的观察视角.有很多相机操控方法,比如旋转.缩放.平移以及飞行定位.Cesium默认支持使用鼠标和触摸事件控制相机.Cesium也提供了一套可编程的相机控制API.这 ...
- Cesium官方教程10--高级粒子特效
原文地址:https://cesiumjs.org/tutorials/Particle-Systems-More-Effects-Tutorial/ 高级粒子系统特效 这篇教程学习更多的效果,包括天 ...
- Cesium官方教程9--粒子系统
原文地址:https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/ 粒子系统介绍 这篇教程带你学习Cesium的粒子相关API,比如如何在你的 ...
- Cesium官方教程8-- 几何体和外观效果
原文地址:https://cesiumjs.org/tutorials/Geometry-and-Appearances/ 几何体和外观效果(Geometry and Appearances) 这篇教 ...
- Cesium官方教程7--三维模型
原文地址:https://cesiumjs.org/tutorials/3D-Models-Tutorial/ 三维模型 (3D Models) 这篇教程给大家介绍,如何在Cesium中通过Primi ...
- Cesium官方教程12--材质(Fabric)
原文地址:https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric 介绍 Fabric 是Cesium中基于JSON格式来描述materi ...
随机推荐
- 云-腾讯云-短信:短信(SMS)
ylbtech-云-腾讯云-短信:短信(SMS) 快速稳定.简单易用.触达全球的短信服务,支持国内短信.语音短信与国际短信 1.返回顶部 1. 腾讯云短信 SMS 简介 腾讯云短信(Short Mes ...
- namespace 命名空间
namespace作用:资源隔离 当我们不指定namespace时,默认放在default下 创建namespace kubectl create namespace 资源名称 在生产中,我们建议一个 ...
- linux xargs命令一(与find ls等命令组合)(转)
-p 操作具有可交互性,每次执行comand都交互式提示用户选择 -i -i 选项告诉 xargs 可以使用{}代替传递过来的参数, 建议使用-I,其符合POSIX标准 -I 格式: xargs - ...
- vue组件间通信用例
父组件传值给子组件 -- 以封装公用slide组件为例 父组件 <template> <section class="banner"> <slide ...
- 矩阵连乘 /// 区间DP oj1900
题目大意: 输入t :t为测试用例个数 接下来t个测试 每个测试用例 第一行输入n: n为矩阵个数 保证n个矩阵依序是可乘的 接下来n行 每行输入p,q:p为长度q为宽度 对给定的n个矩阵确定一个计算 ...
- [WPF自定义控件库] 让Form在加载后自动获得焦点
原文:[WPF自定义控件库] 让Form在加载后自动获得焦点 1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录" ...
- js 调用接口并传参
注:需先引入 jquery.json-xx.min.js 1. 参数跟在url后面 var name = '王一'; var age = 18; $.ajax({ type : 'get', url ...
- jQuery插件编写,
jQuery插件编写 jQuery插件 最近搞jquery插件的编写这里做下笔记 给jquery扩展的方式很多,看的我眼花缭乱 方式1 $.fun=function(){} 方式2 $.fn.fun= ...
- $.ajax()方法和$.get()方法使用小结
一. 使用JQuery的$.get()方法实现异步请求 1. 编写JSP <!DOCTYPE html> <html lang="en"> <head ...
- vuex mutation,action理解
1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action 2. 通俗 ...