基于 OpenLayers + GeoServer 的 OGC 协议验证平台开发日志——2、点线面数据加载与跨域问题解决

（1）代码方面

首先，为了这个实例平台，我准备了点线面三种数据，分别命名为point/string/polygon，其都是shp格式的数据

我们通过以前的方法，将这些数据录入到postgresql，具体的方法可以见

其中包括了shp数据从放入postgresql再到geoserver的全过程。

由于是wfs，因此我们要加载geojson数据

早期开发时，我直接使用了 GeoServer 的完整 WFS 请求地址，包含各种查询参数

1
http://localhost:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger%3Agiant_polygon&outputFormat=application%2Fjson&maxFeatures=50

但现在我换了架构，在src/api/wfs.js下，这个只负责请求，不负责vue和ol

1
import axios from 'axios'
2

3
const WFS_BASE = '/geoserver/ogcforge/ows'
4

5
export const wfsApi = {
6
  /**
7
   * 通过 WFS 协议获取要素，返回 GeoJSON
8
   */
9
  async getFeatures(typeName) {
10
    const params = {
11
      service: 'WFS',
12
      version: '1.0.0',
13
      request: 'GetFeature',
14
      typeName,
15
      outputFormat: 'application/json',
16
      srsName: 'EPSG:4326',
17
    }
18
    const res = await axios.get(WFS_BASE, { params })
19
    return res.data
20
  },

这里面会有一个跨域的问题，我们使用vite.config.js来解决

1
import { defineConfig } from "vite";
2
import vue from "@vitejs/plugin-vue";
3

4
export default defineConfig({
5
  plugins: [vue()],
6
  server: {
7
    proxy: {
8
      "/geoserver": {
9
        target: "http://localhost:8080",
10
        changeOrigin: true,
11
      },
12
    },
13
  },
14
});

在这里还有相关的样式什么的，在src/utils/featureStyles.js

1
import { Style, Fill, Stroke, Circle } from "ol/style";
2

3
/** 点样式：红色圆点 + 白色描边 */
4
export function getPointStyle() {
5
  return new Style({
6
    image: new Circle({
7
      radius: 7,
8
      fill: new Fill({ color: "#e74c3c" }),
9
      stroke: new Stroke({ color: "#fff", width: 2 }),
10
    }),
11
  });
12
}
13

14
/** 线样式：蓝色 3px */
15
export function getLineStyle() {
16
  return new Style({
17
    stroke: new Stroke({
18
      color: "#2980b9",
19
      width: 3,
20
    }),
21
  });
22
}
23

24
/** 面样式：半透明黄色填充 + 橙色描边 */
25
export function getPolygonStyle() {
26
  return new Style({
27
    fill: new Fill({ color: "rgba(241, 196, 15, 0.3)" }),
28
    stroke: new Stroke({
29
      color: "#e67e22",
30
      width: 2,
31
    }),
32
  });
33
}

使用pinia对地图状态进行管理，src/stores/layerStore.js

1
import { defineStore } from "pinia";
2

3
export const useLayerStore = defineStore("layer", {
4
  state: () => ({
5
    pointGeoJson: null,
6
    lineGeoJson: null,
7
    polygonGeoJson: null,
8
  }),
9
  actions: {
10
    setPoint(data) {
11
      this.pointGeoJson = data;
12
    },
13
    setLine(data) {
14
      this.lineGeoJson = data;
15
    },
16
    setPolygon(data) {
17
      this.polygonGeoJson = data;
18
    },
19
  },
20
});

这里核心的来了，我们不打算直接在ogclab.vue里面直接加载图层，而是通过引入逻辑的形式，这里是src/composables/useOlMap.js

这里在加载的时候记得转坐标

1
pointLayer
2
  .getSource()
3
  .addFeatures(format.readFeatures(geojson, projectionOpts));

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

12
export function useOlMap() {
13
  const layerStore = useLayerStore();
14
  const format = new GeoJSON();
15

16
  // 1. 创建三个业务矢量图层，各自绑定样式
17
  const pointLayer = new VectorLayer({
18
    source: new VectorSource(),
19
    style: getPointStyle(),
20
  });
21
  const lineLayer = new VectorLayer({
22
    source: new VectorSource(),
23
    style: getLineStyle(),
24
  });
25
  const polygonLayer = new VectorLayer({
26
    source: new VectorSource(),
27
    style: getPolygonStyle(),
28
  });
29

30
  // 2. 挂载到地图上
31
  function addBusinessLayers(map) {
32
    // 注意叠加顺序：面在下，线在中，点在上
33
    map.addLayer(polygonLayer);
34
    map.addLayer(lineLayer);
35
    map.addLayer(pointLayer);
36
  }
37

38
  // 3. 监听 Store → 自动渲染到 OL
39
  // 核心架构：Vue 管数据，OL 管渲染，watch 是桥梁
40
  function setupWatchers() {
41
    // 投影转换配置对象（提炼出来，避免写重复代码）
42
    const projectionOpts = {
43
      dataProjection: "EPSG:4326", // 告诉 OL：从 GeoServer 拿到的数据是经纬度
44
      featureProjection: "EPSG:3857", // 告诉 OL：要画在天地图(3857)上
45
    };
46

47
    watch(
48
      () => layerStore.pointGeoJson,
49
      (geojson) => {
50
        if (geojson) {
51
          pointLayer.getSource().clear();
52
          pointLayer
53
            .getSource()
54
            .addFeatures(format.readFeatures(geojson, projectionOpts));
55
        }
56
      },
57
    );
58

59
    watch(
60
      () => layerStore.lineGeoJson,
61
      (geojson) => {
62
        if (geojson) {
63
          lineLayer.getSource().clear();
64
          lineLayer
65
            .getSource()
66
            .addFeatures(format.readFeatures(geojson, projectionOpts));
67
        }
68
      },
69
    );
70

71
    watch(
72
      () => layerStore.polygonGeoJson,
73
      (geojson) => {
74
        if (geojson) {
75
          polygonLayer.getSource().clear();
76
          polygonLayer
77
            .getSource()
78
            .addFeatures(format.readFeatures(geojson, projectionOpts));
79
        }
80
      },
81
    );
82
  }
83

84
  return {
85
    addBusinessLayers,
86
    setupWatchers,
87
    pointLayer,
88
    lineLayer,
89
    polygonLayer,
90
  };
91
}

最后给主视图src/views/OgcLab.vue组装好

1
<template>
2
  <div id="ol-map-container" class="map-container"></div>
3
</template>
4

5
<script setup>
6
import { onMounted } from 'vue'
7
import Map from 'ol/Map'
8
import View from 'ol/View'
9
import { fromLonLat } from 'ol/proj'
10
import { createTdtVecLayer, createTdtVecAnnoLayer } from '@/utils/baseLayerSources'
11
import { wfsApi } from '@/api/ogc/wfs'
12
import { useLayerStore } from '@/stores/layerStore'
13
import { useOlMap } from '@/composables/useOlMap'
14

15
let mapInstance = null
16
const layerStore = useLayerStore()
17
const { addBusinessLayers, setupWatchers } = useOlMap()
18

19
onMounted(async () => {
20
  initMap()
21
  setupWatchers()
22
  await loadAllLayers()
23
})
24

25
function initMap() {
26
  mapInstance = new Map({
27
    target: 'ol-map-container',
28
    layers: [createTdtVecLayer(), createTdtVecAnnoLayer()],
29
    view: new View({
30
      center: fromLonLat([116.4, 39.9]),
31
      zoom: 10
32
    })
33
  })
34
  addBusinessLayers(mapInstance)
35
}
36

37
async function loadAllLayers() {
38
  try {
39
    const [pointData, lineData, polygonData] = await Promise.all([
40
      wfsApi.getFeatures('ogcforge:point'),
41
      wfsApi.getFeatures('ogcforge:string'),
42
      wfsApi.getFeatures('ogcforge:polygon')
43
    ])
44
    layerStore.setPoint(pointData)
45
    layerStore.setLine(lineData)
46
    layerStore.setPolygon(polygonData)
47
    console.log('[OgcLab] 图层加载完成')
48
  } catch (err) {
49
    console.error('[OgcLab] WFS 加载失败', err)
50
  }
51
}
52
</script>
53

54
<style scoped>
55
.map-container {
56
  width: 100%;
57
  height: 100vh;
58
}
59
</style>

（2）逻辑方面

整个项目的具体逻辑（以下是我的理解）：首先，ogclab.vue引入了wfs.js的wfsapi方法，当挂载好Onmounted以后就立刻执行loadAllLayers。

loadAllLayers调用了wfsapi里面的getfeatures函数传递了typename，拿到了之后就调用layerStore里面的action的setxxx方法存入数据，数据在layerstore里面被传入states进行状态管理。

与此同时因为states出现了变化useolmap.js里面的watch就发力了，将格式化之后的geojson数据，连着坐标数据projectionOpts一起通过getSource().addFeatures(format.readFeatures())方法添加到了点线面图层中

ogclab.vue→wfs.js→layerStore→useOlMap.js→ 地图渲染

以及AI的回复：

你的流程描述（完全正确） ogclab.vue → wfs.js → layerStore → useOlMap.js → 地图渲染这完美体现了 Vue + OpenLayers 的“单向数据流”架构，就像水流只能从上游往下游流，数据只能从请求到渲染，不会倒流。这种架构的好处是：逻辑清晰，调试方便。 2. 核心机制：watch 是“数据变化的开关” 你提到“states 出现了变化 useOlMap.js 里面的 watch 就发力了”，这是最关键的一步。我们可以把 watch 想象成一个 “数据变化探测器”：它在 useOlMap.js 初始化时，就“埋”在 layerStore.pointGeoJson 旁边。当 layerStore.setPoint() 被调用，pointGeoJson 从 null 变成有数据时，这个探测器立刻“叮”一声，触发后面的渲染逻辑。这就是 Vue 的 “响应式” 核心：数据变化 → 自动触发 UI 更新。 3. 坐标转换：projectionOpts 是“翻译官” 你流程里提到了“连着坐标数据 projectionOpts 一起”，这说明你抓住了之前卡住的“坐标系转换”这个关键点！projectionOpts 就像在 GeoJSON 和 OpenLayers 之间加了一个 “翻译官”： GeoJSON 说：“我讲的是经纬度（4326）。” 翻译官（projectionOpts）告诉 OpenLayers：“请把它翻译成米制坐标（3857），再画在地图上。” 没有 projectionOpts，数据就会“水土不服”，跑到非洲去。

Thanks for reading!

基于 OpenLayers + GeoServer 的 OGC 协议验证平台开发日志——2、点线面数据加载与跨域问题解决

周日 4月 26 2026

1438 字 · 11 分钟

Development WebGIS OpenLayers GeoServer WFS