当前位置: 首页 > news >正文

【WebGIS】Cesium:地形加载

在 Cesium 中,地形数据用于提供三维场景的高度信息,使得地球表面的细节更加逼真。地形加载是 Cesium 应用中的关键功能,支持各种地形源和格式,如 Cesium Ion 服务、Terrain Server 等。本文将系统介绍如何在 Cesium 中加载、配置、定制地形,逐步深入各个功能点。

地形基础概念

地形数据在 Cesium 中用于表示地球表面的高程信息,使得地面不再是简单的平面。通过加载地形,您可以在 Cesium 场景中展示山脉、谷地等地貌的三维特征,提升视觉效果和用户的沉浸感。

Cesium 支持以下几种地形数据格式:

  • Cesium Ion 地形:由 Cesium 官方提供的全球高精度地形数据源。
  • 自定义地形服务:可以加载来自第三方的地形数据。
  • 地形格式:Cesium 支持的地形格式包括 Quantized MeshHeightmap,前者更常用且能提供更高的渲染性能。

Cesium 地形加载方式

Cesium 提供了多种方式加载地形数据。我们首先从最常用的 Cesium Ion 地形服务讲起。

使用 Cesium Ion 加载地形

Cesium Ion 提供了全球的高精度地形数据,可以轻松集成到您的 Cesium 应用中。

步骤1:创建 Viewer 并加载 Cesium Ion 地形

const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain() // 使用 Cesium Ion 的全球地形
});

Cesium.createWorldTerrain() 是 Cesium 内置的方法,用于直接从 Cesium Ion 加载全球地形数据,包含高精度山脉、山谷和水体细节。

步骤2:设置 Cesium Ion 令牌

为了访问 Cesium Ion 服务,您需要注册并获取 Cesium Ion API 令牌。将该令牌添加到应用中:

Cesium.Ion.defaultAccessToken = 'YOUR_CESIUM_ION_TOKEN';

此步骤确保您可以无缝访问 Cesium 的全球地形数据和其他在线资源。

自定义 Heightmap 地形加载

除了使用 Cesium Ion 服务,你还可以加载自定义的地形数据,例如基于 Heightmap 格式的地形数据。Cesium 支持 Web 地形服务(WMS)和 Web 地形图块服务(WMTS)。

const viewer = new Cesium.Viewer('cesiumContainer');// 使用 Cesium Terrain Provider 加载自定义地形服务
const terrainProvider = new Cesium.CesiumTerrainProvider({url: 'https://your-terrain-server/heightmap/',  // 自定义地形数据服务URLrequestVertexNormals: true,  // 请求法线,增强视觉效果requestWaterMask: true       // 请求水体遮罩,用于渲染水体
});// 将地形数据应用到 Cesium Viewer
viewer.terrainProvider = terrainProvider;// 让相机飞到一个高程区域
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(121.0, 31.0, 3000.0)  // 上海附近
});
  • Cesium.CesiumTerrainProvider:用于加载自定义的地形服务,可以是本地服务器或者在线地形服务。
  • requestVertexNormals:请求法线数据,法线用于改进地形的光照效果。
  • requestWaterMask:请求水体遮罩数据,支持水面渲染效果。

量化网格(Quantized Mesh)地形加载

Quantized Mesh 是一种压缩格式,将地形数据以三角网格的形式存储,能够高效地处理大规模地形数据。Cesium 原生支持这种格式,常见的使用场景是加载高精度的地形数据。

const viewer = new Cesium.Viewer('cesiumContainer');// 使用 Quantized Mesh 地形服务
const terrainProvider = new Cesium.CesiumTerrainProvider({url: 'https://assets.cesium.com/1/',  // Ion 提供的量化网格地形服务requestVertexNormals: true,  // 启用法线数据,增强渲染效果
});// 应用量化网格地形
viewer.terrainProvider = terrainProvider;// 飞到高程变化较大的区域
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 3000.0)  // 美国西海岸区域
});
  • 量化网格格式相比传统的 Heightmap 更加高效,能够提供更高的精度并减少带宽需求。
  • 使用 Cesium Ion 提供的量化网格服务时,通常会请求法线和水体遮罩数据,以增强渲染效果。

地形细节与配置

地形加载完成后,您可以进一步对地形进行细节配置,包括调整采样精度、开启阴影等。

设置地形的采样精度

Cesium 允许您控制地形的采样精度。更高的采样精度能展示更多地形细节,但也会消耗更多的系统资源。

viewer.scene.terrainProvider = Cesium.createWorldTerrain({requestVertexNormals: true,  // 开启地形的法线requestWaterMask: true       // 开启水体遮罩
});

requestVertexNormalsrequestWaterMask 可以进一步提升地形的视觉效果,尤其是在有光照或水体的场景中。

添加地形阴影

地形阴影为场景增加了光影效果,使得场景更具立体感。可以通过设置地形接收或投射阴影来启用此功能:

viewer.shadows = true;  // 启用场景中的阴影viewer.terrainShadows = Cesium.ShadowMode.ENABLED;  // 启用地形阴影

进阶功能

在了解了基础的地形加载后,您可以通过 Cesium 提供的进阶功能,进一步调整和定制地形表现。

地形裁剪与高度限制

Cesium 支持对地形进行裁剪或设置高度限制。可以使用地形裁剪平面(Clipping Planes)来裁剪场景中的部分地形,例如展示地下结构等。

const clippingPlane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0, -1), 0);viewer.scene.globe.clippingPlanes = new Cesium.ClippingPlaneCollection({planes: [clippingPlane],edgeColor: Cesium.Color.RED
});

这个例子展示了如何使用 ClippingPlane 对地形进行裁剪,并显示裁剪边缘的颜色。

地形夸张(Terrain Exaggeration)

您可以通过地形夸张功能,放大地形的高差,使地形特征更加明显。常用于对平坦地形进行夸大展示。

viewer.scene.terrainExaggeration = 2.0;  // 将地形高度放大两倍

此设置将当前地形的所有高度值按 2 倍放大,使山脉和谷地等地貌特征更加突出。

地形叠加

地形叠加允许您将影像图层、矢量数据与地形叠加,从而更好地展示地理数据。可以通过 ImageryLayer 将卫星影像或地图叠加到地形之上。

const imageryLayer = viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: 'https://your-tile-server/{z}/{x}/{y}.png'})
);

此示例将在线瓦片地图叠加到地形表面,增强场景的现实感。
要发布基于 Heightmap 格式的地形数据并在 Cesium 中加载,可以通过多种方式实现,包括使用 Cesium 的在线服务 Cesium ion、搭建 Web 地形服务(WMS)和 Web 地形图块服务(WMTS)。下面详细介绍如何个人发布地形数据,尤其是基于 Heightmap 的地形数据,并在 Cesium 中使用。

地形数据发布

Heightmap 是一种常见的地形数据格式,每个像素表示地形的高程值。Cesium 支持加载基于 Heightmap 格式的地形,并将其展示为三维地形。通常,Heightmap 会被分块处理,以便按需加载和渲染。

使用 Cesium ion 发布地形数据

Cesium ion 是一个便捷的在线服务,个人可以上传、托管并发布地形数据,而无需自行搭建服务器。

  1. 注册并登录 Cesium ion:
    访问 Cesium ion,注册并登录个人账户。

  2. 上传 Heightmap 地形数据:

    • 登录后,进入 “Assets” 管理页面。
    • 点击“Upload Assets”上传你的 Heightmap 地形文件,支持的格式包括 .tif.asc 等。
    • 选择 “Terrain” 类型,Cesium ion 将自动处理地形数据,并生成可在 Cesium Viewer 中使用的量化网格地形。
  3. 发布并加载地形数据:
    上传完成后,你会获得一个 Asset ID,接下来可以在 Cesium 中通过以下代码加载地形:

Cesium.Ion.defaultAccessToken = 'your_access_token'; // 替换为你的 Cesium ion 访问令牌const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain({requestWaterMask: true,   // 加载水体效果requestVertexNormals: true // 加载法线信息,提升光照效果})
});// 加载你上传的地形
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({url: Cesium.IonResource.fromAssetId(your_terrain_asset_id)  // 替换为你上传的地形 ID
});

Cesium ion 提供的服务非常方便,用户无需担心地形数据的分块、压缩、传输等复杂细节,Cesium ion 会自动处理并优化地形展示。

自建 Web 地形服务(WMS 和 WMTS)

除了使用 Cesium ion,个人还可以通过 Web 地形服务(WMS)或 Web 地形图块服务(WMTS)发布 Heightmap 格式的地形数据。以下是详细步骤:

WMS(Web Map Service)发布地形数据

WMS 是一种标准的 Web 地图服务协议,常用于发布栅格地形数据。要发布 Heightmap 数据为 WMS 服务,可以使用开源 GIS 服务器(例如 GeoServer)。

  1. 安装 GeoServer:

    • 从 GeoServer 官网 下载并安装 GeoServer。
    • GeoServer 支持发布基于栅格的地形数据。
  2. 上传 Heightmap 数据:

    • 在 GeoServer 管理界面中创建一个新的工作区和存储。
    • 选择 “Add New Coverage Store” 上传你的地形数据(如 .tif 文件)。
    • 上传完成后,创建一个新的图层,并设置投影和范围。
  3. 发布为 WMS 服务:

    • 确保图层已启用 WMS 服务。你可以通过 GeoServer 提供的 WMS URL 来访问这个地形数据服务。
  4. 在 Cesium 中加载 WMS 地形数据:

const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: new Cesium.WebMapServiceTerrainProvider({url: 'http://your-geoserver-url/geoserver/wms', // 替换为你的 GeoServer WMS URLlayers: 'workspace:layername', // 替换为你的工作区和图层名称minimumLevel: 0, maximumLevel: 18,tileWidth: 256,tileHeight: 256,})
});
WMTS(Web Map Tile Service)发布地形数据

WMTS 是一种基于图块的地图服务协议,通常用于大规模、高效的地形数据加载。GeoServer 也支持发布 WMTS 服务。

  1. 在 GeoServer 中启用 WMTS:

    • 安装并设置 GeoServer 后,启用 WMTS 服务。
    • 和 WMS 服务类似,上传你的 Heightmap 数据,并发布为栅格图层。
  2. 在 Cesium 中加载 WMTS 地形数据:

    const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: new Cesium.WebMapTileServiceTerrainProvider({url: 'http://your-geoserver-url/geoserver/gwc/service/wmts', // GeoServer WMTS URLlayer: 'workspace:layername', // 替换为你的工作区和图层名称style: 'default',format: 'image/png',tileMatrixSetID: 'EPSG:4326', // 确保匹配你的投影系统maximumLevel: 18,})
    });
    

本地搭建 Cesium Terrain Server

如果你希望完全离线发布 Heightmap 数据,也可以使用 Cesium Terrain Server,它支持 Cesium 的 Quantized Mesh 格式,并可以将地形数据分块处理并发布。

  1. 使用工具(如 Cesium-terrain-builder)将 Heightmap 数据转换为 Quantized Mesh 格式。

  2. 搭建 Cesium Terrain Server,通过 Nginx 或其他 Web 服务器来托管地形数据。

  3. 在 Cesium 中加载本地服务器的地形数据:

const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: new Cesium.CesiumTerrainProvider({url: 'http://localhost:8080/terrain', // 本地 Cesium Terrain Server 的 URL})
});

总结

本教程系统介绍了 Cesium 中地形加载的基础和进阶功能。通过 Cesium Ion 或自定义地形服务,您可以轻松加载全球或区域的三维地形数据,并根据需要调整采样精度、阴影、地形夸张等细节。通过进阶功能如地形裁剪和地形叠加,您可以实现更加丰富的地形场景展示。

掌握这些功能将帮助您在 Cesium 应用中实现逼真的三维地理场景。

相关文章:

【WebGIS】Cesium:地形加载

在 Cesium 中,地形数据用于提供三维场景的高度信息,使得地球表面的细节更加逼真。地形加载是 Cesium 应用中的关键功能,支持各种地形源和格式,如 Cesium Ion 服务、Terrain Server 等。本文将系统介绍如何在 Cesium 中加载、配置、…...

前端程序员策略:使用框架还是纯JavaScript?

前端程序员策略:使用框架还是纯JavaScript? 在现代Web开发领域,JavaScript语言占据着举足轻重的地位,而基于JavaScript的前端框架更是层出不穷,为开发者提供了丰富的选择。 然而,面对琳琅满目的框架&…...

npm 配置淘宝镜像

为了加速 npm 包的下载速度,尤其是在中国地区,配置淘宝的 npm 镜像(也称为 cnpm 镜像)是一个常见的方法。以下是如何配置淘宝 npm 镜像的步骤: 1. 使用 npm 命令配置镜像 你可以直接使用 npm 命令来设置淘宝的 npm 镜…...

C++ include头文件的顺序以及双引号““和尖括号<>的区别

本文章进一步详细解释 #include 的头文件包含机制&#xff0c;包括搜索路径的处理、双引号 "" 和尖括号 <> 在不同环境中的使用差异&#xff0c;以及它们的底层机制。 1. 头文件包含机制和搜索路径详解 #include 是一个预处理指令&#xff0c;用于在编译前将…...

Flutter鸿蒙版本灵活使用方法间的回调处理复杂化的逻辑

目录 写在前面 示例代码 main.dart: one.dart: 代码解析 1. 主入口 main 函数 2. MyApp 类 3. CallbackExample 类 4. onok 函数 5. one 函数 写在后面 写在前面 在 Flutter 开发中&#xff0c;灵活使用函数之间的回调带来了多种好处&#xff0c;包括提高可重用性、…...

视频号直播自动回复与循环发送话术-自动化插件

我们在做视频号直播的时候&#xff0c;会有这种自动回复咨询问题的功能 唯一客服浏览器插件现在就支持&#xff0c;在视频号直播后台&#xff0c;自动化回复用户问题&#xff0c;以及循环发送我们的介绍话术...

springcloud之服务集群注册与发现 Eureka

前言 1&#xff1a;对于能提供完整领域服务接口功能的RPC而言&#xff0c;例如&#xff1b;gRPC、Thrift、Dubbo等&#xff0c;服务的注册与发现都是核心功能中非常重要的一环&#xff0c;使得微服务得到统一管理。 2&#xff1a;在分布式领域中有个著名的CAP理论&#xff1b;…...

C++:模拟实现list

目录 节点 迭代器 整体框架 构造函数 empty_init 拷贝构造 赋值重载 析构函数 clear insert erase push_back和push_front pop_back和push_front size empty Print_Container 节点 对于链表节点&#xff0c;我们需要一个数据、一个前驱指针、一个后继指针来维护…...

解锁5 大无水印热门短视频素材库

想让你的抖音视频更出彩吗&#xff1f;想知道那些爆款视频的素材源头吗&#xff1f;快来了解以下 5 个超棒的视频素材下载平台。 蛙学网 国内的视频素材佼佼者&#xff0c;有大量 4K 高清且无水印的素材&#xff0c;自然风光、情感生活等类别任你选&#xff0c;不少还免费&…...

【电商购物管理系统】Python+Django网页界面平台+商品管理+数据库

一、介绍 电商购物管理系统&#xff0c;本系统前端使用HTML、CSS、BootStrap等技术搭建前端界面&#xff0c;后端使用Django框架处理用户的逻辑请求。主要功能有&#xff1a; 管理员登录与管理&#xff1a;管理员可以登录后台&#xff0c;对用户和商品进行增删改查的操作。用…...

AD9248驱动的简易示波器设计——FPGA学习笔记21

一、原理 我们这里设计的是显示 1024 个波形数据点&#xff0c; 在绘制每一行的图像的时候&#xff0c; 比对每一个数据和 VS 的 Y 坐标是否相等&#xff0c; 如果相等就绘制这个波形点。 这样我们就能完成 1024 个波形点在整个屏幕的显示。 二、乒乓操作 可见FPGA实现双口RAM…...

微软十月补丁星期二发现了 118 个漏洞

微软将在2024 年 10 月补丁星期二解决 118 个漏洞&#xff0c;并且有证据表明发布的 5 个漏洞被野蛮利用和/或公开披露&#xff0c;尽管微软尚未将其中任何一个漏洞评定为严重漏洞。 在这五个漏洞中&#xff0c;微软列出了两个已被利用的漏洞&#xff0c;这两个漏洞现在都已列…...

到底是微服务,还是SOA?

引言&#xff1a;大概正式工作有5年了&#xff0c;换了三个大厂【也是真特么世道艰难&#xff0c;中国互联网人才饱和了】。基本上每个公司有的架构都不太相同&#xff0c;干过TOC和TOB的业务&#xff0c;但是大家用的架构都不太相同。有坚持ALL in one的SB&#xff0c;最后服务…...

JDK17常用新特性

目前国内大部分开发人员都是在使用jdk8&#xff0c;甚至是jdk6&#xff0c;但是随着jdk的更新迭代&#xff0c;jdk8我觉得可能就会慢慢的淡出舞台&#xff0c;随着目前主流框架最新版推出明确说明了不再支持jdk8&#xff0c;也促使我不得不抓紧学习了解一波jdk17的新特性&#…...

【分布式微服务云原生】探索负载均衡的艺术:深入理解与实践指南

探索负载均衡的艺术&#xff1a;深入理解与实践指南 摘要&#xff1a; 在本文中&#xff0c;我们将深入探讨负载均衡的概念、重要性以及实现负载均衡的多种算法。通过详细的技术解析、Java代码示例、流程图和对比表格&#xff0c;您将了解如何选择合适的负载均衡策略来优化资源…...

拥抱云原生

专题七&#xff1a;云原生实战72课时 专题简介&#xff1a; 云原生正在改变世界&#xff0c;新一代架构思想ServiceMesh、Serverless改变传统软件架构模式&#xff0c;本专题基于完全云上架构实战&#xff0c;结合微服务架构和云计算平台两者的优势&#xff0c;属于架构师必备…...

关于使用若依并快速构建系统的操作指南

准备阶段--下载源码&#xff08;脚手架&#xff09; 1.1 若依官网地址&#xff1a;https://www.ruoyi.vip/ 1.2 选择“前后端分离版本进行下载”&#xff0c;如下图所示 1.3 跳转gitee后&#xff0c;直接按如下步骤进行下载。 前后端模块分离 解压&#xff0c;并打开到项目…...

【分布式微服务云原生】 选择SOAP还是RESTful API?深入探讨与实践指南

&#x1f310; 选择SOAP还是RESTful API&#xff1f;深入探讨与实践指南 摘要&#xff1a; 在构建现代Web服务时&#xff0c;开发者常常面临一个关键决策&#xff1a;是选择SOAP还是RESTful API&#xff1f;本文将为您提供一个全面的比较&#xff0c;包括两者的适用场景、安全…...

HarmonyOS NEXT 应用开发实战(五、页面的生命周期及使用介绍)

HarmonyOS NEXT是华为推出的最新操作系统&#xff0c;arkUI是其提供的用户界面框架。arkUI的页面生命周期管理对于开发者来说非常重要&#xff0c;因为它涉及到页面的创建、显示、隐藏、销毁等各个阶段。以下是arkUI页面生命周期的介绍及使用举例。 页面的生命周期的作用 页面…...

C# 比较两个集合和比较对象

1、比较集合 /// <summary> /// 比较两个集合 /// </summary> /// <typeparam name"T"></typeparam> /// <param name"list1"></param> /// <param name"list2"></param> /// <returns>&…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系&#xff0c;可直观判断线性相关、非线性相关或无相关关系&#xff0c;点的分布密…...