【简单的Cesium界面搭建】——（二）图层和地形的添加

在【简单的Cesium界面搭建】——（一）如何在html文件中使用Cesium中已经了解到如何初始化一个Cesium地球，但是对于正常的使用来说还远远不够。在这一篇中，将记录一下，如何添加图层和地形。

1 添加图层

Cesium添加的是图层是以png的形式添加的，而我们常接触的图层包括矢量图层和栅格图层，有了解过OpenLayers的应该知道，OpenLayers可以直接添加矢量图层（这里不加赘述），而Cesium只能添加png等图片格式的图层，所以关于矢量图层的添加也是以png的形式添加的。
这里主要是通过WMTS服务进行访问的。
添加图层：

/**
 * 添加图层
 * @param viewer 初始化地球时返回的viewer
 * @param layerName 添加的图层的名称（工作区：名字 的形式）*/
function addLayer(viewer, layerName = "", url = "") {
    let layerRect = {
        west: '-90',
        south: '-180',
        east: '180',
        north: '90',
    }   // 图层的边界
    let rectangle = Cesium.Rectangle.fromDegrees(layerRect.west, layerRect.south, layerRect.east, layerRect.north, undefined);
    let wmtsImageryProvider = constructWMTSImageryProvider(layerName, url);  //图层使用的是WMTS服务
    let layer = new Cesium.ImageryLayer(wmtsImageryProvider, {
        rectangle: rectangle    // 根据这个边界进行请求，避免请求图层外的范围而引起400错误
    });
    viewer.imageryLayers.add(layer);
    return layer
}

代码中的 layerRect 是在geoserver上对应的图层的边界（打开图层，在数据选项中，下拉至边框即可查看）：
其中，最小X对应south；最小Y对应west；最大X对应north；最大Y对应east。

构造WMTS请求：

/**
 * 构造一个WMTSImageryProvider
 * @param layerName 图层的名称（工作区：名字 的形式）
 * @param ip 图层发布的地址*/
function constructWMTSImageryProvider(layerName, url) {
    return new Cesium.WebMapTileServiceImageryProvider({
        url: new Cesium.Resource({
            url: url,
            header:{}
        }),
        layer: layerName,
        style: '',
        format: 'image/png',
        tileMatrixSetID: 'EPSG:4326',
        tileMatrixLabels: defaultParams.matrixIds,
        tilingScheme: new Cesium.GeographicTilingScheme(),
        maximumLevel: 21
    })
}

在html界面中调用添加图层的函数。

let layer = addLayer(viewer, "test:world", "http://ip:port/geoserver/gwc/service/wmts")

这里加入了一个世界范围的遥感影像图，实现效果如下：

2 添加地形

添加地形是构造了一个Cesium的CesiumTerrainProvider

function addTerrain(viewer, url) {
    let terrainProvider = new Cesium.CesiumTerrainProvider({
        url: new Cesium.Resource({
            url: url,
            headers: {}
        }),
        waterMask: false
    })
    viewer.terrainProvider = terrainProvider
    return terrainProvider
}

在html界面中调用添加地形的函数。

    let terrain = addTerrain(viewer, "http://ip:port//geoserver/rest/resource/terrain")

实现效果如下：

3 注意点

3.1 请求的构造

在构造图层请求和构造地形请求时使用的url是Cesium的 Resource，使用这个可以在其中添加请求头等额外的参数，若后端进行了加密或者需要一些特定的请求参数，可以这样实现。

let url = new Cesium.Resource({
            url: url,
            headers: {}
        })

3.2 图层和地形的发布

本文使用的图层和地形均发布在Geoserver上，具体发布步骤可查看以下链接。