基于 OpenLayers + GeoServer 的 OGC 协议验证平台开发日志——8、使用 OGC-WPS 进行空间分析

1
import axios from 'axios'
2

3
// WPS 和 WFS 共用同一个 OWS 入口，保持与 wfs.js 一致
4
const WPS_BASE = '/geoserver/ogcforge/ows'
5

6
export const wpsApi = {
7
  /**
8
   * 发送 WPS Execute 请求 (针对 geo:buffer 返回 RawDataOutput JSON)
9
   * @param {string} xmlString 符合 WPS 1.0.0 规范的 Execute 请求 XML
10
   * @returns {Promise<object>} 返回 GeoJSON 结果对象
11
   */
12
  async postExecute(xmlString) {
13
    try {
14
      const res = await axios.post(WPS_BASE, xmlString, {
15
        headers: {
16
          'Content-Type': 'application/xml',
17
        },
18
      })
19

20
      // 因为我们在 XML 中指定了 mimeType="application/json"，axios 会自动解析为 JSON 对象
21
      // 做一层基本校验，确保返回的是 GeoJSON 几何对象
22
      // 支持三种格式：1. 原始几何对象  2. FeatureCollection  3. Feature
23
      if (res.data && res.data.type && res.data.coordinates) {
24
        // 情况1：直接返回几何对象（如 {"type": "Polygon", "coordinates": [...]}）
25
        return res.data
26
      } else if (
27
        res.data &&
28
        res.data.type === 'FeatureCollection' &&
29
        res.data.features &&
30
        res.data.features.length > 0
31
      ) {
32
        // 情况2：返回 FeatureCollection，提取第一个 Feature 的几何
33
        console.log('📝 [WPS] 返回 FeatureCollection，提取第一个 Feature 的几何')
34
        return res.data.features[0].geometry
35
      } else if (res.data && res.data.type === 'Feature' && res.data.geometry) {
36
        // 情况3：返回 Feature，直接提取其 geometry 属性
37
        console.log('📝 [WPS] 返回 Feature，提取其几何')
38
        return res.data.geometry
39
      } else {
40
        console.error('WPS 返回的非预期 JSON 结构:', res.data)
41
        throw new Error('WPS服务返回的JSON格式不符合预期')
42
      }
43
    } catch (error) {
44
      // 提取 axios 的错误信息
45
      const errMsg = error.response?.data || error.message
46
      console.error('WPS Execute 请求异常:', errMsg)
47
      throw error
48
    }
49
  },
50
}

1
import { WKT, GeoJSON } from 'ol/format'
2
import { Vector as VectorLayer } from 'ol/layer'
3
import { Vector as VectorSource } from 'ol/source'
4
import { Stroke, Fill, Style } from 'ol/style'
5
import { Feature } from 'ol'
6
import { getCenter } from 'ol/extent' // 引入获取中心点的方法
7
import { wpsApi } from '@/api/ogc/wps'
8

9
let wpsAnalysisLayer = null
10

11
export function useWpsAnalysis() {
12
  const getWpsAnalysisLayer = (map) => {
13
    if (wpsAnalysisLayer) return wpsAnalysisLayer
14

15
    const existingLayer = map
16
      .getLayers()
17
      .getArray()
18
      .find((layer) => layer.get('name') === 'wps-analysis-layer')
19
    if (existingLayer) {
20
      wpsAnalysisLayer = existingLayer
21
      return wpsAnalysisLayer
22
    }
23

24
    wpsAnalysisLayer = new VectorLayer({
25
      source: new VectorSource(),
26
      style: new Style({
27
        fill: new Fill({ color: 'rgba(255, 165, 0, 0.4)' }),
28
        stroke: new Stroke({ color: '#ff8c00', width: 2 }),
29
      }),
30
      zIndex: 15,
31
    })
32
    wpsAnalysisLayer.set('name', 'wps-analysis-layer')
33
    map.addLayer(wpsAnalysisLayer)
34

35
    return wpsAnalysisLayer
36
  }
37

38
  const buildWPSBufferXml = (geometryWKT, distanceInDegrees) => {
39
    // 干净的 XML 模板
40
    return `<?xml version="1.0" encoding="UTF-8"?>
41
<wps:Execute version="1.0.0" service="WPS" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.opengis.net/wps/1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:wps="http://www.opengis.net/wps/1.0.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wcs="http://www.opengis.net/wcs/1.1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xsi:schemaLocation="http://www.opengis.net/wps/1.0.0 http://schemas.opengis.net/wps/1.0.0/wpsAll.xsd">
42
  <ows:Identifier>geo:buffer</ows:Identifier>
43
  <wps:DataInputs>
44
    <wps:Input>
45
      <ows:Identifier>geom</ows:Identifier>
46
      <wps:Data>
47
        <wps:ComplexData mimeType="application/wkt"><![CDATA[${geometryWKT}]]></wps:ComplexData>
48
      </wps:Data>
49
    </wps:Input>
50
    <wps:Input>
51
      <ows:Identifier>distance</ows:Identifier>
52
      <wps:Data>
53
        <wps:LiteralData>${distanceInDegrees}</wps:LiteralData>
54
      </wps:Data>
55
    </wps:Input>
56
  </wps:DataInputs>
57
  <wps:ResponseForm>
58
    <wps:RawDataOutput mimeType="application/json">
59
      <ows:Identifier>result</ows:Identifier>
60
    </wps:RawDataOutput>
61
  </wps:ResponseForm>
62
</wps:Execute>`
63
  }
64

65
  const generateWpsBuffer = async (feature, radius, map) => {
66
    if (!feature || !map) return
67

68
    try {
69
      const clonedFeature = feature.clone()
70

71
      // 1. 坐标转换：3857 -> 4326
72
      clonedFeature.getGeometry().transform('EPSG:3857', 'EPSG:4326')
73

74
      // 【关键修复】2. 根据要素所在纬度，将米转换为度
75
      const extent = clonedFeature.getGeometry().getExtent()
76
      const center = getCenter(extent)
77
      const latitude = center[1] // 获取中心点纬度
78
      const latRad = (latitude * Math.PI) / 180
79

80
      // 近似公式：在当前纬度下，1度对应的米数
81
      const meterPerDegree = 111320 * Math.cos(latRad)
82
      const distanceInDegrees = radius / meterPerDegree
83

84
      console.log(
85
        `📝 [WPS] 半径换算: ${radius}米 ➡️ ${distanceInDegrees.toFixed(6)}度 (纬度:${latitude.toFixed(4)})`,
86
      )
87

88
      // 3. 转换为 WKT
89
      const wktFormat = new WKT()
90
      const geometryWKT = wktFormat.writeFeature(clonedFeature)
91

92
      // 4. 构建 XML (传入换算后的度)
93
      const xmlRequest = buildWPSBufferXml(geometryWKT, distanceInDegrees)
94

95
      // 5. 发送请求
96
      const resultGeoJSON = await wpsApi.postExecute(xmlRequest)
97

98
      // 6. GeoJSON 转 OL Geometry (带投影转换)
99
      const geoJsonFormat = new GeoJSON()
100
      const geometry = geoJsonFormat.readGeometry(resultGeoJSON, {
101
        dataProjection: 'EPSG:4326',
102
        featureProjection: 'EPSG:3857',
103
      })
104

105
      if (!geometry) throw new Error('WPS返回的GeoJSON转换为OL几何失败')
106

107
      // 7. 包装成 Feature 并渲染
108
      const bufferedFeature = new Feature({ geometry })
109
      const layer = getWpsAnalysisLayer(map)
110
      layer.getSource().addFeature(bufferedFeature)
111

112
      return bufferedFeature
113
    } catch (error) {
114
      console.error('❌ [WPS Buffer Failed]:', error)
115
      throw error
116
    }
117
  }
118

119
  return {
120
    getWpsAnalysisLayer,
121
    generateWpsBuffer,
122
  }
123
}