目录
前言
鉴于之前把离线地图给加载出来,但是如果没有地形数据的话,我们的cesium地球看起来还不够完美。为了要搭建出离线地形,我找了一圈的资料,终于总结出了如何搭建离线地形。毕竟碰了壁还是蛮多的,反正终于还是解决了。结果是好的。
电脑环境:win10
用到的工具如下:
GlobalMapper14.1 用于tif数据合并
cesiumlab2 用于数据格式转换
nginx 代理服务器
PS:这里默认你电脑有了nginx也会用nginx,这里nginx只是作为静态文件服务器发布用,你用tomcat也是可以的,如果实在不会,你用npm的httpserver命令也可以开启本地服务器。
一、工具
工欲善其事必先利其器,首先我们要有工具在手。
GlobalMapper14.1的下载链接如下:
链接: https://pan.baidu.com/s/1fXK0ICUpy1iXcP8T0ry1vg 提取码: 91uj
下载完直接安装,点下一步下一步就好。安装后在开始菜单会有两个快捷方式,带Chinese的打开之后是汉化界面。
cesiumlab2的话,直接去人家官网下载,安装即可使用
我这里不是帮人家做广告,只是因为我这个GIS小白发现他们家的数据格式转换还是很友好的。
二、地形数据源
巧妇难为无米之炊,我们有了工具,接下来就是数据源了,我们要有自己的数据源。
2.1 高程数据获取
下载高程数据dem,我是通过地理空间数据云进行下载。这里你注册账号就可以免费下载DEM 90M的数据了
【官网】->【数据资源】->【SRTMDEM 90M 分辨率高程原始数据】
在【数据资源】这里可以下载我们要的高程数据
不过上面那里可能不清楚你要下载的位置在哪里
【官网】->【高级检索】->【SRTMDEM 90M 分辨率高程原始数据】
行政区域的话,你选择你自己要的下载的地方
这里我以广东省为例,下载广东省的数据下来,覆盖广东的高程数据只有四块,我们直接下载下来。
2.2 高程数据合并
下载完的文件,直接拖进去globalmapper
接着我们就可以在globalmapper看到对应的地形高程数据了。合并起来的图想,跟我们在网页预览时看到的四张图的顺序是一样的。
导出现在这张合并的图像,【文件】->【输出】->【输出光栅/图像格式(R)】->【GeoTIFF格式】
等待导出
2.3 地形数据切片
经过2.2步骤之后,咱们输出了一个tif文件。
这个tif文件,我们通过cesiumlab2来进行【地形切片】
选好咱们合并好的tif文件,数据存储类型选择【散列文件】,输出路径选好,建议纯英文的路径,应为后面要用到,我这里的输出路径是G:\soft\SRTM3-90m\jw\guangdong
完成转换后,G:\soft\SRTM3-90m\jw\guangdong 路径的文件如下所示
三、 地形服务加载
3.1 发布地形数据
修改我们的nginx.conf如下:
server {
listen 666;
location / {
alias G:/soft/geoserver/map/guangdong/cesiumDemo/;
index index.html index.htm;
}
location /map {
alias G:/soft/geoserver/map/guangdong/new10;
autoindex on;
autoindex_localtime on;
}
location /terrain {
alias G:/soft/SRTM3-90m/jw/guangdong;
autoindex on;
autoindex_localtime on;
}
}
3.2 加载地形数据重新访问我们的广东大鸡腿
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,//是否显示动画控件
baseLayerPicker: true,//是否显示图层选择控件
geocoder: true,
timeline: false,
sceneModePicker: true,
navigationHelpButton: false,
infoBox: true,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: '/map/{z}/{x}/{y}.png',
fileExtension: 'png'
})
});
// 加载离线地形
var terrainLayer = new Cesium.CesiumTerrainProvider({
url: '/terrain',
requestVertexNormals: true, // 请求照明
requestWaterMask: true // 请求水波纹效果
});
viewer.terrainProvider = terrainLayer;
viewer.terrainExaggeration = 1;
拉近看就阔以看到我们的大鸡(guang)腿(dong)的鸡(di)皮(xing)疙(shu)瘩(ju)了