0%

cesium-offline

发表于 分类于

数据源

  1. 卫星影像纹理。使用sxearth等软件以tms格式从已有的网络地图服务商下载存储。
  2. DEM数据。网络公开可下载全球数据有：SRTMV4.1、AW3D30、TanDEM-X等。

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。

cesium配置

  1. 下载解压cesium，如果使用node提供服务，可直接运行根目录的server.js文件。若使用其他web服务器如nginx，则将解压目录中的build/cesium文件夹复制到nginx根目录，配置nginx.conf文件，添加以下内容: 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
       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文件，添加如下内容： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    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

参考

  1. visualizing-terrains-with-cesium-ii
  2. fast-cesium-terrain-rendering-new-quantized-mesh-output-alvaro-huarte