使用 GeoServer 发布 SHP 数据并在前端页面加载显示

1. 引言

GeoServer 是一个开源的地理服务器，用于发布、共享和编辑空间数据。Shapefile（SHP）是最常见的地理矢量数据格式之一。本文将介绍如何通过 GeoServer 发布 SHP 数据，并在前端页面中加载显示。

2. 准备工作

在开始之前，需要准备以下环境：

GeoServer：已安装并运行的 GeoServer 实例（推荐 2.x 版本）。
SHP 数据：一份包含 .shp、.shx、.dbf 等文件的 Shapefile 数据。
前端框架：可使用 OpenLayers、Leaflet 或 MapLibre GL 等地图库加载服务。

3. 在 GeoServer 中发布 SHP 数据

GeoServer 发布 SHP 数据通常需要先创建工作区（Workspace）和数据存储（Store），然后发布图层（Layer）。

3.1 创建工作区

text 复制代码

名称：demo
命名空间 URI：http://www.example.com/demo

3.2 创建数据存储

在工作区下添加新的数据存储，选择「Shapefile」类型，填写数据源名称，并指定 SHP 文件的路径。例如：

text 复制代码

数据源名称：shp_store
URL：file:data/shp/roads.shp

点击「保存」后，GeoServer 会读取该 Shapefile 的空间参考信息和属性字段。

3.3 发布图层

数据存储创建成功后，点击「发布」进入图层配置页面。需要重点确认以下内容：

坐标参考系统（CRS）：如果 SHP 文件缺少 .prj 文件，需要手动指定坐标系，例如 EPSG:4326。
数据范围：确认图层的经纬度边界是否正确。
样式（Style）：可为图层指定默认样式，或使用 SLD 自定义渲染。

配置完成后点击「保存」，图层即发布成功。此时可通过「图层预览」功能查看效果。

4. 前端页面加载 GeoServer 图层

GeoServer 支持 WMS（Web Map Service）和 WFS（Web Feature Service）两种常用协议。前端通常使用 WMS 加载栅格瓦片，使用 WFS 获取矢量要素。

4.1 使用 OpenLayers 加载 WMS 图层

以下示例使用 OpenLayers 加载 GeoServer 发布的 WMS 图层：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>GeoServer WMS 加载示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css" />
</head>
<body>
    <div id="map" style="width: 100%; height: 600px;"></div>
    <script src="https://cdn.jsdelivr.net/npm/ol/dist/ol.js"></script>
    <script>
        var wmsLayer = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'http://localhost:8080/geoserver/demo/wms',
                params: {
                    'LAYERS': 'demo:roads',
                    'TILED': true
                },
                serverType: 'geoserver'
            })
        });

        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                wmsLayer
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
    </script>
</body>
</html>

4.2 使用 Leaflet 加载 WMS 图层

Leaflet 同样可以方便地加载 WMS 服务，示例代码如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>GeoServer WMS 加载示例（Leaflet）</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 100%; height: 600px;"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([0, 0], 2);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19
        }).addTo(map);

        L.tileLayer.wms('http://localhost:8080/geoserver/demo/wms', {
            layers: 'demo:roads',
            format: 'image/png',
            transparent: true
        }).addTo(map);
    </script>
</body>
</html>

4.3 使用 WFS 获取矢量要素

如果需要在前端直接操作矢量要素（如点击查询、样式编辑），可以通过 WFS 获取 GeoJSON 数据。以 OpenLayers 为例：

javascript 复制代码

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
        return 'http://localhost:8080/geoserver/demo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=demo:roads&outputFormat=application/json&srsname=EPSG:4326';
    },
    strategy: ol.loadingstrategy.bbox
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

5. 常见问题与注意事项

跨域问题：前端页面与 GeoServer 不在同一域名时，需要配置 CORS 或使用代理。
坐标系不一致 ：确保前端地图的投影与 GeoServer 输出投影一致，必要时使用 reproject 参数。
性能优化：对于大数据量的 SHP 文件，建议开启 GeoServer 的切片缓存（GeoWebCache）以提升加载速度。
样式定制：可通过 SLD 文件自定义图层的颜色、线宽和标注等显示效果。

6. 总结

通过 GeoServer 发布 SHP 数据并在前端加载显示，是 Web GIS 开发中非常常见的流程。核心步骤包括：在 GeoServer 中创建工作区、数据存储并发布图层，然后在前端通过 WMS 或 WFS 协议加载服务。掌握这一流程后，可以进一步扩展样式定制、属性查询和空间分析等功能。