学习 Cesium (五)：加载离线高程数据

最新推荐文章于 2024-04-17 09:29:48 发布
最新推荐文章于 2024-04-17 09:29:48 发布
阅读量6.4k 收藏 24
点赞数 4
分类专栏： Cesium web开发 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leoothello/article/details/115016756
版权

目录

学习 Cesium (五)：加载离线高程数据

前言

通过前面的学习，Cesium 最基本的应用已经可以了。但是，在实际项目中我们还需要加入高程数据，才能显示真实的地形。下面我就一步一步介绍如何加载真实的高程数据。

本文的测试环境

  • OS: Window 10 家庭版
  • Cesium: v1.78.0
  • Web Browser: Chrome v88.0.4324.150

基本的构建流程
获取源 DEM 文件如 SRTM 的 tif 文件
使用 tif 文件生成地形瓦片
托管静态瓦片资源
配置 Cesium TerrainProvider

获取高程数据

高程数据从哪里来呢？现在市面上有些卫星地图下载软件，比如水经注、BIGEMAP等，其中一些也包含高程数据下载。我没有试过，具体好不好用不清楚。也可以到CGIAR CSI的网站下载。

这里介绍最原始的方法，就是去 NASA 的 EarthData 网站下载。这里有很多全球地理数据，大家可以找自己想要的下载。

  1. 我这里选择了 ASTGTM v003 的数据，可以在这个网址 https://lpdaac.usgs.gov/products/astgtmv003/ 查看。

  2. 点击页面的【ACCESS DATA】按钮，在弹出对话框中可以看到有多种下载方式。我选择了从 NASA Earthdata Search 下载。

  3. 点击弹出窗口 NASA Earthdata Search 的【Download Data】按钮，进入下载流程。这里提醒需要先注册 Earthdata 的账户。请注册登录账户后进行下载。建议选用脚本的方式下载，因为是国外网站，数据量大，经常会因为网络不稳定导致下载中断。使用脚本可以在中断后重新执行脚本，继续下载。

高程数据处理

高程数据一般是 .tif 文件格式，在应用到 Cesium 前，需要将其转换成瓦片文件。cesium目前支持的格式有下面的两种地形格式，分别是：

  • Quantized-Mesh(推荐使用)
  • HeightMap

在heightmap 1.0 terrain format说明页面上，官方明确指出这种格式已经废弃了，推荐使用quantized-mesh。

地形文件制作有三种途径：

  • 使用 Cesium 实验室的 Cesiumlab2 工具进行处理，开箱即用。
  • 使用 gdal2srtmtiles.py 脚本进行处理，需要安装依赖工具库。
  • 使用 Cesium Terrain Builder 开源工具进行处理，需要编译安装相关软件。

使用 Cesiumlab 制作地形文件

  1. 下载 Cesiumlab 安装文件，我使用的的 Cesiumlab v2.0.8 版本。
  2. 注册账户，登录使用。

该软件可生产 Quantized-Mesh 和 HeightMap 两种格式的地形文件。软件界面友好，详细制作过程无需说明，在此略过。

使用 gdal2srtmtiles.py 脚本制作heightmap-1.0 格式地形文件

请先下载工具包 https://download.csdn.net/download/LeoOthello/15911813 ，可将文件解压到 C:\terrain 目录下。

安装 Python 2.7

双击安装 T1-python-2.7.11.msi，默认即可。默认安装到 C:\Python27，安装完成后配
置环境变量，在系统环境变量 path 中添加 C:\Python27 。

注册 Python 2.7

在 cmd 控制台执行

> python C:\terrain\T2-reg.py

执行成功后会提示

=== Python 2.7 is now registered!
安装 PIL

双击安装 T3-PIL-1.1.7.win32-py2.7.exe 程序，默认即可。

安装 GDAL

双击安装 T4-gdal-111-1800-core.msi 程序，默认即可。如果默认安装路径为
C:\Program Files (x86)\GDAL\ ，增加或修改系统环境变量：

  1. 增加环境变量 GDAL_DATA 值为 C:\Program Files (x86)\GDAL\gdal-data\
  2. 修改环境变量 path，在 path 中增加 C:\Program Files (x86)\GDAL 。
安装 numpy

双击安装 T5-numpy-1.8.1-win32-superpack-python2.7.exe 程序，默认即可。

安装 GDAL py2.7版

双击安装 T6-GDAL-1.11.4.win32-py2.7.msi 程序，默认即可。

生成 .terrain 数据
  1. 拷贝 T7-gdal2srtmtiles-demo.py 文件，将克隆文件改名为 T7-gdal2srtmtiles.py 。
  2. 打开 T7-gdal2srtmtiles.py 进行编辑，找到文档最后
    面几行（第 2592 行），修改 T7-gdal2srtmtiles.py 的位置为你机器上的位置，修改
    tif 的位置和输出文件的位置。-z 后面可以输入生成的级数如 0-8 或 0-15 等，级数越大越慢。修改完成后保存。
  3. 在 cmd 中输入
python  C:\terrain\T7-gdal2srtmtiles.py

如果不报错，应该休息片刻就可以看生成的文件了。生成的文件每个目录下都有.terrain,.hdr,.kml 三种文件，我们只用到.terrain 文件。
4. 拷贝“覆盖至生成 tiles 结果”目录中的 layer.json 文件和 0 文件夹至生成结果目录下，比如我当前是 terrain_tiles 目录下。
5. 目前这套工具只能处理单个 tif 文件，如果涉及多个 tif 文件，可将每次生成的 terrain_tiles 文件夹覆盖添加到一个文件夹中。

使用 Cesium Terrain Builder 工具制作 Quantized-Mesh-1.0 格式地形文件

在 Cesium Terrain Builder 的网页上介绍了两种使用该工具的方式。一种是源码编译安装，一种是使用 Docker 安装 CTB 的镜像文件。下面进行分别介绍。

源码编译安装及使用
准备
  1. 下载 CTB 工具源文件
  2. 安装 VS2015
  3. 安装 CMake
  4. 下载依赖库 GDAL 源文件 https://download.osgeo.org/gdal/2.4.4/gdal-2.4.4.tar.gz
  5. 下载依赖库 zlib 压缩包 http://zlib.net/zlib1211.zip
编译安装GDAL
  1. 解压gdal压缩包
  2. 进入解压后的目录，修改./nmake.opt文件（最好使用vs2015打开），将57行的GDAL_HOME改成解压后的GDAL的实际路径，将191行的#WIN64=YES改为WIN64=YES（即把#去掉）。
  3. 管理员运行x64 Native Tools Command Prompt for VS 2015工具，输入
nmake -f makefile.vc MSVC_VER=1900 WIN64=1

开始编译，喝杯咖啡，完成后，依次输入

nmake -f makefile.vc install
nmake -f makefile.vc devinstall

最后，配置环境变量，将./data配置为GDAL_DATA。

编译安装zlib
  1. 解压zlib压缩包
  2. 使用管理员打开vs2015，然后打开./contrib/vstudio/vc14/zlibvc.sln解决方案，解决方案配置改为release，平台改为x64，右键zlibvc项目，找到生成事件，把命令行的bat文件路径改成绝对路径，最后直接右键解决方案，选择生成。
  3. 创建include和lib/release/x64目录，复制./zconf.h、./zlib.h到include目录下；复制./contrib/vstudio/vc14/x64/ZlibDllRelease/zlibwapi.dll、./contrib/vstudio/vc14/x64/ZlibDllRelease/zlibwapi.lib到x64目录下。
编译CTB
  1. 打开 cmake gui，配置 source code 路径到 /path/to/cesium-terrain-builder/src。
  2. 在 cesium-terrain-builder 目录下创建 build 目录，配置 cmake 的 build 路径到该目录，勾选Advanced。
  3. 点击 Configure 按钮。
  4. 配置 GDAL_INCLUDE_DIR 为GDAL编译后的 include 文件夹，GDAL_LIBRARY 为 GDAL 编译后的.lib文件。
  5. 配置 ZLIB_INCLUDE_DIR 是 zlib 动态库所在文件夹，ZLIB_LIBRARY_DEBUG , ZLIB_LIBRARY_RELEASE 是 zlib 的 .lib 文件。
  6. 选择编译平台为 MSVC2015，然后点击 Generate，即可在build路径下生成 MSVC2015 的 sln 工程文件。
  7. 点击 Open Project ，使用 VS2015 打开项目。
  8. 右键 ALL_BUILD 项目，点击生成。
  9. 创建 bin 文件夹，将 build/src/Release、build/tools/Release 两个文件夹下的所有文件拷贝到 bin 文件夹里；将 gdal、zlib 等 dll 拷贝到 bin 文件夹里。将 gdal 的工具 gdalbuildvrt.exe 文件拷贝到 bin 文件夹里。

PS: CTB工具生成的 Quantized-Mesh 地形文件默认是 gzip 压缩的 terrain 文件。这种文件在下面的集成中会报错找不到文件。因此，在编译 CTB 工具前需要对源代码进行修改。

使用 CTB
  1. 测试 CTB
> tile-info.exe --version
  1. 使用 gdalbuildvrt.exe 工具，将多个 tif 文件合并为 vrt 文件
> gdalbuildvrt.exe D:/temp/temp.vrt D:/temp/N29E106.tif
  1. 使用 CTB，命令如下
> ctb-tile -o D:/temp/terrain_tiles -f Mesh D:/temp/temp.vrt -c 4
  1. 生成 layer.json 文件，命令如下
> ctb-tile -o D:/temp/terrain_tiles -f Mesh D:/temp/temp.vrt -c 1 -l
Docker 安装 CTB 及使用
  1. 安装 Docker Desktop
  2. 启动 Docker ，拉取 CTB 镜像
$ docker pull tumgis/ctb-quantized-mesh
  1. 创建一个新容器，启动 ctb 环境
$ docker run -v D:/temp:/data -ti -i tumgis/ctb-quantized-mesh:latest bash
  1. 合并tiffs，生成.vrt文件
/data# gdalbuildvrt ./temp.vrt ./*.tif
  1. 运行ctb-tile生成瓦片
/data# ctb-tile -f Mesh -C -N -v -o ./terrain_tiles ./temp.vrt
  1. 最后创建Cesium layer.json描述文件
/data# ctb-tile -f Mesh -C -N -v -o ./terrain_tiles ./temp.vrt -l

如前所述，这个镜像版生成的 Quantized-Mesh 格式地形文件也是 gzip 压缩过的。

集成到Cesium

  1. 将高程数据 terrain_tiles 文件夹放在 HelloWorld 项目目录的 Assets 目录下。
  2. 在 Cesium 应用代码中添加地形提供者 terrainProvider。
    // 创建地形提供者
    var terrainProvider=new Cesium.CesiumTerrainProvider({
      url: Cesium.buildModuleUrl("Assets/terrain_tiles") // 指定地形文件的路径
    });
    
    // 在观察器中指定地形提供者
    let viewer = new Cesium.Viewer("cesiumContainer",{
      geocoder:false, // 关闭查找位置工具
      homeButton:false, // 禁用Home按钮
      sceneModePicker:false, // 禁用视景模式拾取器
      baseLayerPicker:false, // 禁用数据层拾取器
      terrainProvider:terrainProvider, // 启用地形提供者
      navigationHelpButton:false, // 禁用导航按钮
      animation:false, // 禁用动画部件
      timeline:false, // 禁用时间线
      fullscreenButton:false, // 禁用全屏按钮

      // 使用自带的离线影像作为纹理贴图
      imageryProvider: new Cesium.TileMapServiceImageryProvider({
        url: Cesium.buildModuleUrl("Assets/TMS/tiles")
      }),

    });
  1. HeightMap 格式地形的最终效果如下图
    HeightMap 格式地形
  2. Quantized-Mesh 格式地形的最终效果如下图
    Quantized-Mesh 格式地形
Ciansong
关注
专栏目录
Cesium 展示——获取指定区域地形的最大最小高程
虎康的博客
08-27 163
在地图上勾选某一处的区域，分析获取区域内最大最小高程。
Cesium 实战 01 - 最新版（1.104.0）通过异步方式初始化地球，加载影像以及高程图层
linzi19900517的博客
04-21 4162
本文主要介绍一下，新版 cesium（1.104.0）如何加载影像图、高程数据以及 3dtile 数据。
Cesium实现加载离线地形数据（nginx发布数据，cesiumLab地形切片数据）
最新发布
OuNuo5280的博客
04-17 2703
Cesium实现加载离线地形数据（nginx发布数据，cesium地形切片数据）
cesium离线加载瓦片影像图和DEM高程图
cangyue080180的专栏
05-27 6430
最近使用Cesium+WPF进行项目开发，一起研究一下Cesium如何离线使用吧。 首先展示一下效果图： 离线高德影像瓦片地图的加载方法： 1.我使用的是太乐地图下载器，下载高德的卫星图或者天地图的卫星图都行，导出为“瓦片：谷歌”，jpeg格式。下载好的内容如下图。全球我下到了5级，中国区域6-8级，北京市9-14级。这样地图数据比较小。 2.Cesium加载瓦片图的方式，下面只是一种方式： var viewer = new Cesium.View
通过Cesium制作地形的离线加载
m0_64217692的博客
09-26 1623
然后下载地形的高程图tif文件,和卫星的影像图tif文件。在地理空间世界云的高程图比较可靠，这里选GDEMV2,GDEMV3都可以。本片用的2,对应的经纬度选择下载，下载的文件中就有tif。打开Nigix，并设置好配置文件的路径，端口等。投影参数根据，下载卫星影像图的坐标系对应选择。首先要启用Cesium的插件，装配好如图中的几个组件。下好的数据，要在cesiumlab3里进行切片，才能在Cesium里使用。将Json文件输入到，url的路径中,设置好地形。将Xml文件输入到，url的路径中，设置好影像。
Cesium加载离线地图和离线地形
weixin_42347240的博客
06-17 7475
Cesium加载本地地图和本地地形
Cesium加载bil格式高程数据
05-08
Cesium加载bil格式高程数据，将bil数据增加到Cesium平台中
Cesium加载高程数据
weixin_62547918的博客
01-08 708
【代码】Cesium加载高程数据。
UE5 Cesium for Unreal加载离线影像地图和离线高程图
weixin_42439888的博客
11-13 1781
Cesium for Unreal加载离线影像地图和离线高程图
第28节：cesium 加载高程数据（含源码+视频）
qq_29384639的博客
06-07 1101
cesium 加载高程（地形）数据
cesium中加载高程terrain地形
09-30 2599
cesium中添加terrain地形
Cesium生成离线terrain地形数据所需所有程序及详细说明
10-11
根据DEM地形tif文件，生成Cesium可用的离线terrain地形，本附件包括所有使用到的程序及详细步骤说明，木遥原创整理，验证可用，并写了所有详细注意点说明。
Cesium 问题：加载瓦片数据出现南北极未加载完全，蓝色情况
虎康的博客
11-27 886
将加载的数据放在new Cesium 时进行渲染即可解决，试试这样做吧。使用如下形式加载瓦片数据出现南北极未加载完全，蓝色情况如下。解决后完整的展示应该如下。
Cesium离线地形加载
zhh763984017的博客
03-14 4471
目录 前言 一、工具 二、地形数据源 2.1 高程数据获取 2.2 高程数据合并 2.3 地形数据切片 三、 地形服务加载 3.1 发布地形数据 3.2 加载地形数据重新访问我们的广东大鸡腿 ​​​​​​​ 前言 鉴于之前把离线地图给加载出来，但是如果没有地形数据的话，我们的cesium地球看起来还不够完美。为了要搭建出离线地形，我找了一圈的资料，终于总结出了如何搭建离线地形。毕竟碰了壁还是蛮多的，反正终于还是解决了。结果是好的。 电脑环境：win10 用到的工具如下： Glo
cesium加载影像、高程、三维矢量建筑
renkangever的博客
06-01 1463
cesium加载影像、高程、三维建筑cesium加载影像、高程、三维建筑 cesium加载影像、高程、三维建筑 //离线影像 标准TMS瓦片 var layers = viewer.scene.imageryLayers; var blackMarble = layers.addImageryProvider( new Cesium.TileMapServiceImageryProvider({ url : 'http://***/tms' //url为影像文
Cesium学习（3）--局域网离线高程数据制作及加载
wjk的专栏
09-17 9592
软件环境及数据准备 1，win10 2，ctb，我下载的别人分享的编译好的，也可以自己编译，需要vs2013，cmake最新版本（据说2.8以上就可以，要支持vs2013），主要是这个版本包含0切片和layers.json，ctb切数据不生成这些数据，百度云分享下，需要的下，链接：http://pan.baidu.com/s/1qXHqSNi 密码：t72k 3，我切的数据是全国500米的数
cessium加载 自定义高程数据发布 全
weixin_42063935的博客
12-13 274
cesium 的引入自定义地形图 和发布http 服务
Cesium：加载本地高程/地形数据
热门推荐
KaiSarH
11-05 1万+
cesium加载本地高程数据
cesium如何加载arcgis离线影像数据
05-10
要加载离线的ArcGIS影像数据，需要使用Cesium的ImageryProvider接口和ArcGIS影像数据的URL地址。下面是一个简单的示例代码： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var imageryProvider = new Cesium.ArcGisMapServerImageryProvider({ url : 'path/to/arcgis/image/tiles', maximumLevel : 19 }); viewer.imageryLayers.addImageryProvider(imageryProvider); ``` 在上面的代码中，`path/to/arcgis/image/tiles` 是存储ArcGIS影像数据的本地目录或者服务器地址。`maximumLevel` 是指定影像数据的最大级别。调整该参数可以控制地图的显示精度和加载速度。 需要注意的是，ArcGIS影像数据需要事先进行切片处理，生成一系列的影像瓦片。这些瓦片可以使用ArcGIS提供的工具或者第三方工具生成。在加载影像数据时，需要指定瓦片所在的目录或者服务地址。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值