Cesium 加载 geoserver 地图服务（wms）

1. GeoServer 发布 WMS

进入工作区

image

点击新建工作区

image

填写工作区的配置信息

image

点击提交后自动跳转到所有工作区界面，可以看到创建的工作区

image

点击 Stores (数据存储)

image

添加新的 Stores

image

选择 Stores 的数据类型

image

点击后进入 GeoTIFF 数据配置界面，配置完成之后，点击 Save

image

点击 Save 之后跳转到创建图层界面，点击 Publish

image

点击 publish 之后进入图层编辑界面，设置图层参数,重点是参考系坐标和范围，一般是4326（WGS84）

image

往下滚动页面填写参数信息，添加完成之后点击 save

image

<figcaption style="margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">这里的 input transparent color 颜色选择为 000000，然后 .tif 文件发布以后就没有黑色的底边了</figcaption>

save 之后，会自动跳转到 layers 界面，在左侧菜单栏找到图层雨来，然后在所有图层中找到刚才新建的图层，在select One中点击 OpenLayer，如果弹出地图说明发布正确

image

点击后显示图像

image

地图显示失败的原因一般都是图层的参考系设置错误，4326 坐标系设置成了其他坐标系，或者范围与数据真实范围不一致

2. GeoServer 跨域

由于发布的 Cesium 服务与 GeoServer 一般非同源。因此 Cesium 要访问 GeoServer，需要 GeoServer 支持跨域。GeoServer默认未开启这一功能，开启的话需要找到 GeoServer安装目录下的 geoserver/WEB-INF/web.xml 文件，然后将下面两部分代码取消注释，配置完成之后，重启 tomcat

（使用 war 包发布的 geoserver 开启跨源请求好像有问题，所以我又安装了 GeoServer 14.2 的 windows 安装版）

<filter>
        <filter-name>cross-origin</filter-name>
        <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
       <init-param>
           <param-name>chainPreflight</param-name>
           <param-value>false</param-value>
       </init-param>
       <init-param>
           <param-name>allowedOrigins</param-name>
           <param-value>*</param-value>
       </init-param>
       <init-param>
           <param-name>allowedMethods</param-name>
           <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
       </init-param>
       <init-param>
           <param-name>allowedHeaders</param-name>
           <param-value>*</param-value>
       </init-param>
    </filter>

    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

3. Cesium 获取 GeoServer 发布的地图

        var viewer = new Cesium.Viewer("cesiumContainer", {
        });

        var imageryProvider = new Cesium.WebMapServiceImageryProvider({
            // 这里是你的 geoserver服务点击查看图层的 url
            url: 'http://localhost:8089/geoserver/cesiumMapTest/wms',
            // 这里是自定义的图层名称
            layers: 'geotiff_coverage',
            parameters: {
                service: 'WMS',
                format: 'image/png',
                transparent: true
            }
        });
        var wms = new WebMapServiceImageryProvider({
                url: 'http://192.168.3.200:8082/geoserver/qx/wms',
                layers: 'qx:yx_wgs84',
                parameters: {
                  service: 'WMS',
                  format: 'image/jpeg',
                  transparent: true,
                  styles:'',
                  srs:'EPSG:4326',//,
                  BBOX: '106.1143684387207,26.852130889892578,106.24139785766602,26.983966827392578'
                 }
               });

        // 图层添加
        viewer.imageryLayers.addImageryProvider(imageryProvider);

        // 跳转到指定坐标
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(112.070, 31.353, 500.0)
        });

然后浏览器访问本地 Cesium 服务，就可以看到发布的数据了

image

Cesium 加载 geoserver 地图服务（wms）