1). 卫星影像纹理。使用sxearth等软件以tms格式从已有的网络地图服务商下载存储。
2). DEM数据。网络公开可下载全球数据有:SRTMV4.1、AW3D30、TanDEM-X等。
Cesium支持两种格式的地形:一种是quantized-mesh格式的数据,另一种是基于heightmap的DEM。获得的DEM数据源一般为tiff格式,需要进行转换才能由Cesium处理。可用的转换工具有cesiumlab和cesium-terrain-builder,ctb工具可以处理heightmap格式数据,其更新版本(ctb-qmesh)可以处理quantized-mesh格式数据。
1). ctb工具的编译。
2). 使用GIS工具软件(GDAL、QGIS、arcMap等)把下载的tiff格式地形文件中的坐标转为WGS84,再将文件中采样中高程数据的nodata异常值使用0或者插值等进行填充。
3). 运行ctb-tile.exe将下载的tiff格式地形文件生成为.terrain瓦片文件。
4). 运行ctb-tile,添加参数-l生成供cesium使用的地图元数据LAYER.JSON。
1). 下载解压cesium,如果使用node提供服务,可直接运行根目录的server.js文件。若使用其他web服务器如nginx,则将解压目录中的build/cesium文件夹复制到nginx根目录,配置nginx.conf文件,添加以下内容:
server {
listen 8001;
server_name localhost;
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
root F:/nginxhtml;
index index.html index.htm;
}
}
其中条件语句目的是为了解决cors资源共享问题。
2). 将影像及处理好的地形文件复制到nginx根目录,编辑cesium示例中的helloworld.html文件,添加如下内容:
Cesium.Ion.defaultAccessToken = null;
var xaterrain = new Cesium.CesiumTerrainProvider({
url: 'http://localhost:8001/ql-terrain'
});
var tms = Cesium.createTileMapServiceImageryProvider({
url: 'http://localhost:8001/ql-google-sat',
fileExtension: 'jpg'
});
var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false,
sceneModePicker: false,
navigationHelpButton: false,
homeButton: false,
timeline: false,
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
//imageryProvider:false,
terrainProvider: xaterrain,
imageryProvider: tms
});
viewer.scene.globe.enableLighting = true;
viewer.scene.debugShowFramesPerSecond = true
参考:
https://bertt.wordpress.com/2018/11/26/visualizing-terrains-with-cesium-ii/
https://www.linkedin.com/pulse/fast-cesium-terrain-rendering-new-quantized-mesh-output-alvaro-huarte/
转载于:https://blog.51cto.com/1960961732/2357221