利用Cesium加载Geoserver发布的WMS
基于Cesium 1.81和Geoserver 2.15.5显示三维地图,关于Geoserver的相关配置可见本专栏的其他小节
a. 阿里云部署Tomcat:https://blog.csdn.net/weixin_45240128/article/details/129626898?spm=1001.2014.3001.5502
b. Tomcat部署Geoserver:https://blog.csdn.net/weixin_45240128/article/details/129469051?spm=1001.2014.3001.5502
c. Geoserver发布图层:https://blog.csdn.net/weixin_45240128/article/details/129649159?spm=1001.2014.3001.5502
- 下载Cesium
网址:https://cesium.com/platform/cesiumjs/
百度网盘下载(Cesium-1.81):
链接:https://pan.baidu.com/s/13izxpx0AMkq1Rnb_8huFMg?pwd=xn9l
提取码:xn9l
- 解压到指定文件夹
将解压后的目录中的Build/Cesium文件夹拷贝到Tomcat的webapps文件夹中,更名为cesium
新建webapps/cesium/index.html,将以下内容复制到index.html中
Cesium基础架构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cesium App</title>
<script src="./Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
</head>
<body>
<div id="cesiumContainer" style="position:absolute; width: 100%; height: 100%"></div>
<script>
//layers可见geoserver的layer preview界面,其中的Name列即为这里的layers参数
//以下是构建cesium的图层
var provider1 = new Cesium.WebMapServiceImageryProvider({
url: 'http://自己的IP地址/geoserver/mars/wms',
layers: 'mars:Mars_MGS_MOLA_ClrShade_merge_global_463m',
parameters:{
service:'WMS',
format: 'image/png',
transparent: true
}
});
//以下是设置cesium界面的一些初始参数,把cesium一些初始控件隐藏掉
var viewer = new Cesium.Viewer('cesiumContainer',{
imageryProvider: provider1,
baseLayerPicker: false,
homeButton: false,
timeline: false,
vrButton: true,
geocoder: false,
sceneModePicker: false,
animation: false
});
//云不显示
viewer.scene.fog.enabled = false;
//大气不显示
viewer.scene.globe.showGroundAtmosphere = false;
//设置版权信息不显示
viewer._cesiumWidget._creditContainer.style.display="none";
//设置基础球的颜色为黑色,默认为蓝色
viewer.scene.globe.baseColor=Cesium.Color.BLACK
</script>
</body>
</html>
- 修改相应的参数,保存后,在浏览器输入http://自己的IP地址/cesium,即可显示三维球
注意:在经度180的接缝位置,影像没有正确加载,这一问题在本教程中没有解决