Cesium+Vue3学习系列（15）---加载Geoserver发布的影像（tif）WMS数据服务

本学习系列将以Cesium + Vue3 Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，详情请查看原文Cesium+Vue3学习系列（15）---Cesium加载Geoserver发布的影像（tif）WMS数据服务

Cesium+Vue3学习系列（4）---图层管理功能封装里初步封装了图层管理功能，本篇在其基础上扩展如何实现在Cesium中加载Geoserver发布的影像（tif）WMS数据服务。

1、新建工作区

（2）新建数据存储，选择GeotTIFF。

​

编辑

（3）选择步骤（1）的工作区，设置连接参数，注意影像最好是WGS84坐标系，并且建好影像金字塔，这样可提升系统显示速度。然后点击保存。

（4）点击“发布”。

（5）然后进入到编辑图层页面。如果影像有黑边等无效数据可以在覆盖参数里输入“#000000”（即这里输入的是无效数据的十六进制颜色，不一定是黑色，也有可能是白色“#FFFFFF” 或者其他颜色）。由于本测试数据是规则矩形，没有无效数据，就不需要填写覆盖参数了。直接点击保存。

（6）在图层预览（LayerPreview）中找到刚刚保存的TestImage数据。点击OpenLayers，即可预览刚刚发布的影像数据。需要注意地址栏的信息http://localhost:8080/geoserver/gongzhonghao/wms 以及对应的图层信息gongzhonghao:tif3

注意：第一次使用Geoserver大概率会出现跨域问题，在webapps\geoserver\WEB-INF的web.xml文件里大约在第170行左右，添加如下内容。保存后，重启Geoserver服务。

<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>

（7）配置WMS服务信息，并加载

// wms测试数据
export const wmsImageTestInfo: ILayerItem = {
    id: LayerIdFlag.WMS_IMAGE_TEST,
    name: "wmsImageTest",
    type: "imagery_wms",
    url : 'http://localhost:8080/geoserver/gongzhonghao/wms',
    layer : 'gongzhonghao:tif3',
}

case 'imagery_wms':
                provider = new Cesium.WebMapServiceImageryProvider({
                    url: item.url!,
                    layers: item.layer!,
                    parameters: {
                        service: 'WMS',
                        transparent: true,
                        format: 'image/png',
                        srs: 'EPSG:4326'
                    }
                });
                // 监听错误,抛出自定义异常
                provider.errorEvent.addEventListener(() => {                    
                    throw new Error('WMS 服务不可用，请检查wms服务地址和图层名称是否正确!');
                });
                handle = this.AddImageryLayer(provider, show, alpha, zIndex)
                // 跳转到指定坐标
                this.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(108.8, 37.9, 1000000.0)
                });
            
                break

前端实现

const changeWmsImageTest = (val: string | number | boolean) => {
  if (val) {
    // 加载wms影像图层
    mLayerManager?.Add(wmsImageTestInfo)
  } else {
    // 移除wms影像图层
    mLayerManager?.Remove(LayerIdFlag.WMS_IMAGE_TEST)
  }
}

最终效果：

8、更多详细代码，查看原文Cesium+Vue3学习系列（15）---Cesium加载Geoserver发布的影像（tif）WMS数据服务。