Cesium官方教程5--地形图层

原文地址:https://cesiumjs.org/tutorials/Terrain-Tutorial/
Cesium支持渐进流式加载和渲染全球高精度地形,并且包含海、湖、河等水面效果。相对2D地图,山峰、山谷等其他地形特征的更适宜在这种3D地球中展示。
地形数据集是巨大的,通常都是GB或者TB级别。在普通3D引擎中,使用底层图形API去高效实现地形数据的可视化需要做很多事情。幸好,Cesium已经完成了这个体力活,而我们只需要写几行代码。
快速开始
从一个示例开始吧。打开Sandcastle中的 Hello World 示例。默认,全球是 WGS84 标准球。 添加下面代码 (在这一行之后 var viewer = ...),即可把Cesium ion上发布的全球地形数据加入到场景中:

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

珠峰

当我们拉近一些,Cesium依据当前相机距离以及当前可视范围来请求高精度地形数据。
地形和影像是区别对待的。默认影像是覆盖在地形上的。任意影像provider可以覆盖在任意地形provider上。
开启地形光照和水面效果
Cesium全球地形也包含了地形光照数据,以及水面效果需要的海岸线数据。默认地形服务器不会传递包含这两个额外数据的切片。我们可以在 CesiumTerrainProvider的构造函数配置一下。
开启地形光照,需要VertexNormals扩展。

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

带光照的地形
水面效果也是同样的方法。我们请求WaterMask扩展。

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

旧金山湾

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

可以再去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.

原文地址:http://blog.51cto.com/14117342/2327116

时间: 2024-10-09 05:39:07

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

Cesium官方教程13--Cesium和Webpack

原文地址:https://cesiumjs.org/tutorials/cesium-and-webpack/Cesium 和 WebpackWebpack是非常强大非常流行的JavaScript 模块打包工具.它可以让开发人员以一种简单直观的 require 方式去加载各种页面需要的文件,极大的方便了开源人员对代码和资源文件进行结构化设计.当编译的时候,它会跟踪代码依赖性,把所有的模型打包到浏览器可以直接加载的一个或者多个bundles中.在这个教程的前一半,我们创建一个简单的web项目,学会

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

原文地址:https://cesiumjs.org/tutorials/Particle-Systems-More-Effects-Tutorial/高级粒子系统特效这篇教程学习更多的效果,包括天气和火箭推进器.如果没有学习过粒子系统基础知识,请学习这篇教程 粒子系统介绍 .天气下雪下雨 最开始下雪的教程是来自 追踪圣诞老人项目里的实现.步骤我们即将介绍如何做下雪效果,然后怎么把下雪变为下雨效果.我们将给每个粒子添加雪花图片,然后在updateParticle函数里定义每个粒子的移动属性和其他动

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

原文地址:https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/ 粒子系统介绍这篇教程带你学习Cesium的粒子相关API,比如如何在你的项目里添加烟,火,火花等特效.什么是粒子系统?粒子系统是一种图形学技术,用来模拟复杂的物理效果.粒子系统是由一堆很小的图片组成,看起来就像一些复杂的"含糊不清(fuzzy)"对象,就像火.烟.天气.或者 ×××.这些复杂效果其实是通过控制每一个独立的粒子的初始位置.速度.生命周期等属性来完成

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

原文地址:https://cesiumjs.org/tutorials/Geometry-and-Appearances/几何体和外观效果(Geometry and Appearances)这篇教程会教大家学习Primitive API中支持的几何体和外观效果.这篇教程并不是面向Cesium的普通用户,主要讨论Cesium的高级知识,包括自定义三角网(mesh),形状(shape),体(volume)以及他们的外观.如果你是初学者,建议先学下这篇教程.Cesium可以使用Entity创建不同的几

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

原文地址:https://github.com/AnalyticalGraphicsInc/cesium/wiki/Fabric介绍Fabric 是Cesium中基于JSON格式来描述materials的机制.材质描述多边形.折线.椭球等对象的外观特征.材质可以简单的是覆盖一张图片,或者是条纹或者棋盘图案.使用Fabric 和GLSL,可以从零开始写脚本新建材质,也可以从现有的材质中派生.比如潮湿碎裂的砖块可以使用程序生成的纹理.凹凸贴图和反射贴图来组合.对象通过material 属性来支持材质

Cesium官方教程11--建模人员必读

原文地址:https://cesium.com/blog/2014/12/15/gltf-tips-for-artists/这篇文章是Branden Coker, an artist from AGI 写的,他是 AGI 的一个艺术家,做过很多事情,包括 为追踪圣诞老人项目建模.感谢3dben 编写的Blender和3DS Max建模建议.Cesium使用面向web的glTF 格式三维模型,同时提供了一个 dae在线转gltf的工具, 把dae和它纹理拖放到这个工具里,就能获得一个glTF格式的

Cesium中级教程10 - CesiumJS and webpack

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ webpack是打包JavaScript模块流行且强大的工具.它允许开发人员以直观的方式构造代码和assets,并使用简单的require语句根据需要加载不同类型的文件.构建时,它将跟踪代码依赖关系,并将这些模块打包到浏览器加载的一个或多个包中. 在本教程的前半部分,我们从头开始建立了简单的Web应用程序使用webpack,然后覆盖后续步骤集成Cesium np

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解 在本章中,我们研究生成的Edit方法和视图.但在研究之前,我们先将 release date 弄得好看一点.打开Models\Movie.cs 文件.先添加一个引用: <span style="font-size:14px;">using System.ComponentModel.DataAnnotations;</span> 然后在Movie类中添加以下代码: [Display(

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据 在本章中,我们将新建一个MoviesController 控制器,并编写获取电影数据的代码,使用视图模板将数据展示在浏览器中. 在进行下一步之前,你需要先编译应用程序,否则在添加控制器的时候会出错. 在解决方法资源管理器的Controllers文件夹右键,选择"添加">"新建搭建基架项": 在"添加支架"对话框,选择 包含视图的MVC 5控制器(使用 En),然后单击