搭建本地WebGIS：Cesium加载Geoserver发布的图层

最新推荐文章于 2023-08-27 19:22:57 发布

星海一扁舟

最新推荐文章于 2023-08-27 19:22:57 发布

阅读量292

点赞数

分类专栏：搭建本地WebGIS 文章标签： tomcat 开源软件 html

本文链接：https://blog.csdn.net/weixin_45240128/article/details/129649655

版权

搭建本地WebGIS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用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的接缝位置，影像没有正确加载，这一问题在本教程中没有解决

星海一扁舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搭建本地WebGIS：Cesium加载Geoserver发布的图层

b. Tomcat部署Geoserver：https://blog.csdn.net/weixin_45240128/article/details/129469051?c. Geoserver发布图层：https://blog.csdn.net/weixin_45240128/article/details/129649159?a. 阿里云部署Tomcat：https://blog.csdn.net/weixin_45240128/article/details/129626898?
复制链接

扫一扫