当前位置：首页 > news >正文

cesium加载CTB生成的地形数据

news 2025/7/16 23:43:46

由于CTB生成的地形数据是压缩的（gzip）格式，需要在nginx加上特殊配置才可以正常加载，NGINX全部配置如下

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;

server
  {
    listen       8802;
    server_name  localhost;

        location /{
            alias D:/nginx-1.27.4/terrain_data/;
            add_header Access-Control-Allow-Origin "*";

            location ~* \.terrain$ {
                add_header Content-Encoding gzip;  #核心配置在于这一行
            }
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

cesium加载本地影像高程的代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cesium加载本地TMS瓦片</title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    #cesiumContainer { width: 100%; height: 100vh; margin: 0; padding: 0; }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    
var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: 'http://localhost:8802/yxout/{z}/{x}/{reverseY}.png',  //当您的瓦片是 TMS 标准 但需要 XYZ 访问方式 时：使用reverseY
            tilingScheme: new Cesium.WebMercatorTilingScheme(), // 确保使用了正确的瓦片方案
            maximumLevel: 5 // 根据你的瓦片数据调整最大级别
        })
    }); 

    var terrainProvider = new Cesium.CesiumTerrainProvider({
        url: 'http://localhost:8802/wddem/', // 本地服务地址
        tilingScheme: new Cesium.GeographicTilingScheme(),
        requestVertexNormals: true,
        requestWaterMask: true
    });
   viewer.terrainProvider = terrainProvider;

   viewer.scene.camera.setView({
      destination: new Cesium.Cartesian3(
        360494.84292579786,
        5638923.84786053,
        2981472.7458540234
      ),
      orientation: new Cesium.HeadingPitchRoll(
        1.592626302751535,
        -0.19699496586134568,
        6.283059403131131
      ),
    });
  </script>
</body>
</html>