如何在基于HTML/CSS/JS的Web应用中展示GeoServer发布的图层组？

一、前置准备 #

• 确认GeoServer图层组可正常访问：在浏览器中打开http://[你的GeoServer IP]:[端口]/geoserver/wms?service=WMS&version=1.1.0&request=GetCapabilities，搜索你创建的图层组名称，确保它出现在Capabilities文档里。
• 解决跨域问题：修改GeoServer安装目录下webapps/geoserver/WEB-INF/web.xml，添加CORS过滤器配置（如果前端和GeoServer不在同一域名下）：

  <filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
      <param-name>cors.allowed.origins</param-name>
      <param-value>*</param-value>
    </init-param>
    <init-param>
      <param-name>cors.allowed.methods</param-name>
      <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
      <param-name>cors.allowed.headers</param-name>
      <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  

  配置完重启GeoServer。

二、使用OpenLayers实现（推荐） #

以下是完整的前端代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>展示GeoServer图层组</title>
    <!-- 引入OpenLayers样式和脚本 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
    <style>
        /* 设置地图容器样式 */
        #map {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="map"></div>

    <script>
        // 初始化地图
        const map = new ol.Map({
            target: 'map',
            // 设置地图投影（和GeoServer图层一致，常用EPSG:4326或EPSG:3857）
            view: new ol.View({
                projection: 'EPSG:4326',
                // 设置地图初始中心点（根据你的图层范围调整）
                center: [116.397, 39.908],
                // 初始缩放级别
                zoom: 10
            })
        });

        // 添加GeoServer图层组作为WMS图层
        const geoserverLayer = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                // GeoServer的WMS服务地址
                url: 'http://[你的GeoServer IP]:[端口]/geoserver/wms',
                params: {
                    // 指定要加载的图层组名称
                    'LAYERS': '[你的图层组名称]',
                    'VERSION': '1.1.0',
                    // 设置输出图片格式
                    'FORMAT': 'image/png',
                    // 开启透明背景，方便叠加其他图层
                    'TRANSPARENT': true
                },
                // 允许跨域请求
                crossOrigin: 'anonymous'
            })
        });

        // 将图层添加到地图
        map.addLayer(geoserverLayer);
    </script>
</body>
</html>

替换代码中的[你的GeoServer IP]:[端口]和[你的图层组名称]为实际值即可。

三、使用Leaflet实现 #

如果你更熟悉Leaflet，也可以用以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>展示GeoServer图层组</title>
    <!-- 引入Leaflet样式和脚本 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        // 初始化地图
        const map = L.map('map').setView([39.908, 116.397], 10);

        // 添加GeoServer图层组
        L.tileLayer.wms('http://[你的GeoServer IP]:[端口]/geoserver/wms', {
            layers: '[你的图层组名称]',
            format: 'image/png',
            transparent: true,
            version: '1.1.0'
        }).addTo(map);
    </script>
</body>
</html>

四、测试验证 #

将上述代码保存为HTML文件，在浏览器中打开，确认地图能正常加载并显示你的图层组内容。如果出现加载失败，检查：

• GeoServer服务是否正常运行
• 图层组名称是否正确
• 跨域配置是否生效
• 地图投影是否和GeoServer图层的投影一致

内容的提问来源于stack exchange，提问作者william smith