基于 OpenLayers + GeoServer 的 OGC 协议验证平台开发日志——5、WFS-T 地理要素增加功能

1
import { watch } from "vue";
2
import VectorLayer from "ol/layer/Vector";
3
import VectorSource from "ol/source/Vector";
4
import { GeoJSON } from "ol/format";
5
import { useLayerStore } from "@/stores/layerStore";
6
import {
7
  getPointStyle,
8
  getLineStyle,
9
  getPolygonStyle,
10
} from "@/utils/featureStyles";
11
import Select from "ol/interaction/Select";
12
import Draw from "ol/interaction/Draw";
13
import { wfsApi } from "@/api/ogc/wfs";
14

15
export function useOlMap() {
16
  const layerStore = useLayerStore();
17
  const format = new GeoJSON();
18
  let currentDraw = null;
19

20
  // ==================== 1. 创建三个业务矢量图层 ====================
21
  const pointLayer = new VectorLayer({
22
    source: new VectorSource(),
23
    style: getPointStyle(),
24
  });
25
  const lineLayer = new VectorLayer({
26
    source: new VectorSource(),
27
    style: getLineStyle(),
28
  });
29
  const polygonLayer = new VectorLayer({
30
    source: new VectorSource(),
31
    style: getPolygonStyle(),
32
  });
33

34
  // 【精简3】映射表：绘制类型 → source + GeoServer 图层名，替代一堆 if/else
35
  const drawTargetMap = {
36
    Point: { source: pointLayer.getSource(), layerName: "point" },
37
    LineString: { source: lineLayer.getSource(), layerName: "string" },
38
    Polygon: { source: polygonLayer.getSource(), layerName: "polygon" },
39
  };
40

41
  // ==================== 2. 挂载到地图上 ====================
42
  function addBusinessLayers(map) {
43
    map.addLayer(polygonLayer);
44
    map.addLayer(lineLayer);
45
    map.addLayer(pointLayer);
46
  }
47

48
  // ==================== 3. 监听 Store → 自动渲染到 OL ====================
49
  // 【精简1】三个重复的 watch 块 → 配置数组 + forEach 循环
50
  function setupWatchers() {
51
    const opts = {
52
      dataProjection: "EPSG:4326",
53
      featureProjection: "EPSG:3857",
54
    };
55

56
    const watchList = [
57
      { getter: () => layerStore.pointGeoJson, layer: pointLayer },
58
      { getter: () => layerStore.lineGeoJson, layer: lineLayer },
59
      { getter: () => layerStore.polygonGeoJson, layer: polygonLayer },
60
    ];
61

62
    watchList.forEach(({ getter, layer }) => {
63
      watch(getter, (geojson) => {
64
        if (!geojson) return;
65
        layer.getSource().clear();
66
        layer.getSource().addFeatures(format.readFeatures(geojson, opts));
67
      });
68
    });
69
  }
70

71
  // ==================== 4. 添加选择交互 ====================
72
  function addSelectInteraction(map, featurePopup) {
73
    const select = new Select({
74
      layers: [pointLayer, lineLayer, polygonLayer],
75
      style: () => getPointStyle(),
76
    });
77

78
    select.on("select", (event) => {
79
      if (event.selected.length > 0) {
80
        featurePopup.value.showFeaturePopup(event.selected[0]);
81
      }
82
    });
83

84
    map.addInteraction(select);
85
  }
86

87
  // ==================== 5. 手动拼接 WFS-T XML ====================
88
  function buildInsertXml(feature, layerName) {
89
    const geometry = feature.getGeometry();
90
    const geoType = geometry.getType();
91
    const coords = geometry.getCoordinates();
92

93
    let gmlGeom = "";
94
    if (geoType === "Point") {
95
      gmlGeom = `<ogcforge:geom>
96
          <gml:Point srsName="EPSG:4326">
97
            <gml:coordinates decimal="." cs="," ts=" ">${coords[0]},${coords[1]}</gml:coordinates>
98
          </gml:Point>
99
        </ogcforge:geom>`;
100
    } else if (geoType === "LineString") {
101
      const coordStr = coords.map((c) => `${c[0]},${c[1]}`).join(" ");
102
      gmlGeom = `<ogcforge:geom>
103
          <gml:MultiLineString srsName="EPSG:4326">
104
            <gml:lineStringMember>
105
              <gml:LineString>
106
                <gml:coordinates decimal="." cs="," ts=" ">${coordStr}</gml:coordinates>
107
              </gml:LineString>
108
            </gml:lineStringMember>
109
          </gml:MultiLineString>
110
        </ogcforge:geom>`;
111
    } else if (geoType === "Polygon") {
112
      const coordStr = coords[0].map((c) => `${c[0]},${c[1]}`).join(" ");
113
      gmlGeom = `<ogcforge:geom>
114
          <gml:MultiPolygon srsName="EPSG:4326">
115
            <gml:polygonMember>
116
              <gml:Polygon>
117
                <gml:outerBoundaryIs>
118
                  <gml:LinearRing>
119
                    <gml:coordinates decimal="." cs="," ts=" ">${coordStr}</gml:coordinates>
120
                  </gml:LinearRing>
121
                </gml:outerBoundaryIs>
122
              </gml:Polygon>
123
            </gml:polygonMember>
124
          </gml:MultiPolygon>
125
        </ogcforge:geom>`;
126
    }
127

128
    return `<?xml version="1.0" encoding="UTF-8"?>
129
<wfs:Transaction
130
  service="WFS"
131
  version="1.0.0"
132
  xmlns:wfs="http://www.opengis.net/wfs"
133
  xmlns:ogcforge="http://www.ogcforge.com"
134
  xmlns:gml="http://www.opengis.net/gml">
135
  <wfs:Insert>
136
    <ogcforge:${layerName}>
137
      ${gmlGeom}
138
    </ogcforge:${layerName}>
139
  </wfs:Insert>
140
</wfs:Transaction>`;
141
  }
142

143
  // ==================== 6. 绘制 + 发送 WFS-T ====================
144
  function activateDraw(map, type) {
145
    deactivateDraw(map);
146

147
    // 【精简3】一行查表，替代三个 if/else
148
    const target = drawTargetMap[type];
149
    if (!target) return;
150

151
    currentDraw = new Draw({ source: target.source, type });
152

153
    currentDraw.on("drawend", async (event) => {
154
      // 【精简2】只 clone + transform 一次，打印和发请求共用
155
      const clonedFeature = event.feature.clone();
156
      clonedFeature.getGeometry().transform("EPSG:3857", "EPSG:4326");
157

158
      // 打印坐标
159
      const coords = clonedFeature.getGeometry().getCoordinates();
160
      console.log(`[绘制完成 - ${type}]`, coords);
161

162
      // 拼接 XML 并发送
163
      try {
164
        const xmlString = buildInsertXml(clonedFeature, target.layerName);
165
        console.log("🚀 准备发送的 WFS-T XML:\n", xmlString);
166
        const result = await wfsApi.postTransaction(xmlString);
167
        console.log("✅ WFS-T 写入成功！服务器返回:\n", result);
168
      } catch (error) {
169
        console.error("❌ WFS-T 写入失败:", error);
170
      }
171
    });
172

173
    map.addInteraction(currentDraw);
174
  }
175

176
  // ==================== 7. 停止绘制 ====================
177
  function deactivateDraw(map) {
178
    if (currentDraw) {
179
      map.removeInteraction(currentDraw);
180
      currentDraw = null;
181
    }
182
  }
183

184
  return {
185
    addBusinessLayers,
186
    setupWatchers,
187
    pointLayer,
188
    lineLayer,
189
    polygonLayer,
190
    addSelectInteraction,
191
    activateDraw,
192
    deactivateDraw,
193
  };
194
}

1
    // WFS 插入事务
2
    const wfsTransaction = new WFS().writeTransaction(
3
      [newFeature],
4
      null,
5
      null,
6
      {
7
        featureNS: 'www.testmap.com',
8
        featurePrefix: 'testmap',
9
        featureType: targetLayer,
10
        srsName: 'EPSG:4326'
11
      }
12
    );
13

14
    sendWFSRequest(wfsTransaction, 'insert');
15

16
  } catch (error) {
17
    console.error('保存过程中发生错误:', error);
18
    alert('保存失败: ' + error.message);
19
  }
20
}

1
newFeature，和{
2
        featureNS: 'www.testmap.com',
3
        featurePrefix: 'testmap',
4
        featureType: targetLayer,
5
        srsName: 'EPSG:4326'
6
      }