星图时空

切换日光/暗黑模式

加载地形数据 ​

Cesium可以加载不同类型的地形数据，具体取决于您的需求和数据来源。以下是一些常见的地形数据加载方式：

  1. 高程图像（Heightmap）：Cesium可以加载基于高程图像的地形数据。高程图像通常是灰度图像，每个像素的灰度值表示该位置的高度信息。您可以使用Cesium中的HeightmapTerrainProvider类来加载高程图像数据。

  2. 地形瓦片（Terrain Tiles）：Cesium支持加载基于地形瓦片的地形数据。地形瓦片是将地球表面切分为多个瓦片，并提供每个瓦片的高程信息。您可以使用Cesium中的CesiumTerrainProvider类来加载地形瓦片数据，例如使用Cesium World Terrain提供的全球高分辨率地形数据。

  3. 地形切片（Terrain Tiles）：Cesium还支持加载基于地形切片的地形数据。地形切片类似于地形瓦片，但是它们使用不同的数据格式和切分方式。您可以使用Cesium中的CesiumTerrainProvider类来加载地形切片数据，具体取决于您使用的地形数据服务。

  4. 自定义地形数据：如果您有自定义的地形数据格式，Cesium也提供了接口和工具来加载和显示自定义地形数据。您可以使用Cesium中的TerrainProvider类来实现自定义地形数据的加载和显示。

地形图层类 ​

是Cesium中用于加载和显示地形数据的类。地形数据描述了地球表面的高度、地形特征和地形细节，可以用于创建真实感的三维地球模型。

地形图层类是Cesium的一个重要组件，它提供了加载和渲染地形数据的功能。通过使用不同的地形图层类，您可以加载来自不同数据源的地形数据，如高程数据、卫星数据等。Cesium提供了一些内置的地形图层类，如Cesium World Terrain（Cesium世界地形）、EllipsoidTerrainProvider（椭球地形提供者）等，您也可以自定义地形图层类来加载自己的地形数据。

地形图层类可以与其他图层类（如影像图层类）一起使用，实现更加真实和细致的地球模型。它可以用于创建虚拟飞行、地形分析、可视化等应用，为用户提供更加沉浸式和交互式的地球体验。

加载不同的地形数据 ​

Cesium支持渐进流式加载和渲染全球高精度地形，并且包含海、湖、河等水面效果。

CesiumTerrainProvider ​

加载Cesium的全球地形数据，提供了高分辨率的地形数据覆盖全球范围；目前采用STK的地形服务，并通过QuantizedMeshTerrainData封装了STK地形数据格式，它的优点是支持水面和法线，同时数据量比较小。

js
const cesium_terrain = Cesium.Terrain.fromWorldTerrain({
    requestWaterMask: true, // 请求水体效果所需要的海岸线数据
    requestVertexNormals: true, // 请求地形照明数据
})
viewer.scene.globe.enableLighting = true;
viewer.scene.setTerrain(cesium_terrain);
const cesium_terrain = Cesium.Terrain.fromWorldTerrain({
    requestWaterMask: true, // 请求水体效果所需要的海岸线数据
    requestVertexNormals: true, // 请求地形照明数据
})
viewer.scene.globe.enableLighting = true;
viewer.scene.setTerrain(cesium_terrain);

EllipsoidTerrainProvider ​

使用椭球模型作为地形，即不考虑地球表面的真实高度，而是使用一个理想化的椭球体作为地形

js
const ellipsoid_terrain = new Cesium.EllipsoidTerrainProvider();

viewer.terrainProvider = ellipsoid_terrain;
const ellipsoid_terrain = new Cesium.EllipsoidTerrainProvider();

viewer.terrainProvider = ellipsoid_terrain;

VRTheWorldTerrainProvider ​

加载VR-TheWorld地形数据，提供了全球范围的低分辨率地形数据

js
const vr_terrain = new Cesium.Terrain(
    Cesium.VRTheWorldTerrainProvider.fromUrl(
        "http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/",
        {
            credit: "Terrain data courtesy VT MÄK",
        }
    )
)

viewer.scene.setTerrain(vr_terrain);
const vr_terrain = new Cesium.Terrain(
    Cesium.VRTheWorldTerrainProvider.fromUrl(
        "http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/",
        {
            credit: "Terrain data courtesy VT MÄK",
        }
    )
)

viewer.scene.setTerrain(vr_terrain);

ArcGISTiledElevationTerrainProvider ​

加载ArcGIS Server切片地形数据，可以使用ArcGIS Server提供的地形切片服务

js
const arcgis_terrain = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer", {
    token: "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg.."
});

viewer.terrainProvider = arcgis_terrain;
const arcgis_terrain = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer", {
    token: "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg.."
});

viewer.terrainProvider = arcgis_terrain;

GoogleEarthEnterpriseTerrainProvider ​

加载Google Earth Enterprise地形数据

js
const geeMetadata = await Cesium.GoogleEarthEnterpriseMetadata.fromUrl(
    new Cesium.Resource({
        url: "http://www.earthenterprise.org/3d",
        proxy: new Cesium.DefaultProxy("/proxy/"),
    })
);

viewer.scene.terrainProvider = Cesium.GoogleEarthEnterpriseTerrainProvider.fromMetadata(
    geeMetadata, {}
);
const geeMetadata = await Cesium.GoogleEarthEnterpriseMetadata.fromUrl(
    new Cesium.Resource({
        url: "http://www.earthenterprise.org/3d",
        proxy: new Cesium.DefaultProxy("/proxy/"),
    })
);

viewer.scene.terrainProvider = Cesium.GoogleEarthEnterpriseTerrainProvider.fromMetadata(
    geeMetadata, {}
);

CustomHeightmapTerrainProvider ​

是一种用于生成自定义地形的方法。它允许开发者使用自己的高度图数据来创建地形，而不是使用默认的地形生成方法。通过使用自定义高度图，开发者可以实现更精确和个性化的地形效果。

js
const customHeightmapWidth = 32;
const customHeightmapHeight = 32;
const custom_terrain = new Cesium.CustomHeightmapTerrainProvider(
    {
        width: customHeightmapWidth,
        height: customHeightmapHeight,
        callback: function (x, y, level) {
            const width = customHeightmapWidth;
            const height = customHeightmapHeight;
            const buffer = new Float32Array(width * height);

            for (let yy = 0; yy < height; yy++) {
                for (let xx = 0; xx < width; xx++) {
                    const u = (x + xx / (width - 1)) / Math.pow(2, level);
                    const v = (y + yy / (height - 1)) / Math.pow(2, level);

                    const heightValue = 4000 * (Math.sin(8000 * v) * 0.5 + 0.5);

                    const index = yy * width + xx;
                    buffer[index] = heightValue;
                }
            }

            return buffer;
        },
    }
);

viewer.terrainProvider = custom_terrain as any;
const customHeightmapWidth = 32;
const customHeightmapHeight = 32;
const custom_terrain = new Cesium.CustomHeightmapTerrainProvider(
    {
        width: customHeightmapWidth,
        height: customHeightmapHeight,
        callback: function (x, y, level) {
            const width = customHeightmapWidth;
            const height = customHeightmapHeight;
            const buffer = new Float32Array(width * height);

            for (let yy = 0; yy < height; yy++) {
                for (let xx = 0; xx < width; xx++) {
                    const u = (x + xx / (width - 1)) / Math.pow(2, level);
                    const v = (y + yy / (height - 1)) / Math.pow(2, level);

                    const heightValue = 4000 * (Math.sin(8000 * v) * 0.5 + 0.5);

                    const index = yy * width + xx;
                    buffer[index] = heightValue;
                }
            }

            return buffer;
        },
    }
);

viewer.terrainProvider = custom_terrain as any;