在【简单的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上,具体发布步骤可查看以下链接。