cesium離線服務設置

1. 數據源

1). 衛星影像紋理。使用sxearth等軟件以tms格式從已有的網絡地圖服務商下載存儲。
2). DEM數據。網絡公開可下載全球數據有:SRTMV4.1、AW3D30、TanDEM-X等。

2. DEM數據預處理

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。

3. cesium配置

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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章