1. data sources
1) Satellite image texture. sxearth and other software are used to download and store data in tms format from existing network map service providers.
2) DEM data. The global data available for download are SRTM V4.1, AW3D30, TanDEM-X, etc.
2. DEM data preprocessing
Cesium supports two formats of terrain: quantized-mesh data and heightmap-based DEM. The DEM data sources obtained are generally tiff format, and need to be converted to be processed by Cesium. The available conversion tools are cesiumlab and cesium-terrain-builder. The ctb tool can process heightmap format data, and its updated version( ctb-qmesh ) Quantified-mesh format data can be processed.
1) Compilation of CTB tools.
2. Use GIS tools (GDAL, QGIS, arcMap, etc.) to convert the coordinates of the tiff format terrain file downloaded to WGS84, and then fill in the nodata outliers of the elevation data sampled in the file with 0 or interpolation.
3. Run ctb-tile.exe to generate the tiff format terrain file downloaded as. terrain tile file.
4. Run ctb-tile and add parameter-l to generate map metadata LAYER.JSON for cesium.
3. cesium configuration
1. Download and decompress cesium. If you use node to provide services, you can directly run the server.js file in the root directory. If you use other web servers such as nginx, copy the build/cesium folder in the decompressed directory to the nginx root directory, configure the nginx.conf file, and add the following contents:
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; } }
The purpose of conditional statement is to solve the problem of resource sharing in cors.
2. Copy the image and the processed terrain file to the nginx root directory, edit the helloworld.html file in cesium example, and add the following contents:
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
Reference resources:
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/