基于 OpenLayers + GeoServer 的 OGC 协议验证平台开发日志——4、坐标系统问题与绘制功能实现

1
// 从3857地图获取坐标 → 转换为4326
2
const mapCoordinate = map.getCoordinateFromPixel(pixel); // 3857坐标
3
const wgs84Coordinate = fromLonLat(mapCoordinate); // 转换为4326
4

5
// 从4326数据获取坐标 → 转换为3857
6
const wgs84Coordinate = [116.4, 39.9]; // 4326坐标
7
const mapCoordinate = toLonLat(wgs84Coordinate); // 转换为3857

1
// 在绘制完成事件中
2
currentDraw.on("drawend", (event) => {
3
  const feature = event.feature;
4
  const geometry = feature.getGeometry();
5
  // 获取3857坐标
6
  const mapCoordinate = geometry.getCoordinates();
7
  // 转换为4326（用于WFS写入）
8
  const wgs84Coordinate = fromLonLat(mapCoordinate);
9
  // 创建新的几何对象（使用4326坐标）
10
  const wgs84Geometry = new GeometryType({
11
    // 根据类型创建
12
    coordinates: wgs84Coordinate,
13
  });
14
  // 替换原始几何对象
15
  feature.setGeometry(wgs84Geometry);
16
  // 现在可以安全地写入WFS（使用4326坐标）
17
  writeFeatureToWFS(feature, type);
18
});

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"; // 【新增】引入 Draw 交互
13

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

18
  // ... 保持原有的 pointLayer, lineLayer, polygonLayer 不变 ...
19

20
  let currentDraw = null; // 【新增】用于保存当前的绘制交互实例
21

22
  // ... 保持原有的 addBusinessLayers, setupWatchers, addSelectInteraction 不变 ...
23

24
  // ==================== 以下为新增绘制功能 ====================
25

26
  /**
27
   * 激活绘制功能
28
   * @param {Map} map - OL地图实例
29
   * @param {string} type - 绘制类型 ('Point', 'LineString', 'Polygon')
30
   */
31
  function activateDraw(map, type) {
32
    // 1. 如果正在绘制别的，先停掉
33
    deactivateDraw(map);
34

35
    // 2. 根据类型决定把要素画到哪个图层的 source 上
36
    let targetSource = null;
37
    if (type === "Point") targetSource = pointLayer.getSource();
38
    else if (type === "LineString") targetSource = lineLayer.getSource();
39
    else if (type === "Polygon") targetSource = polygonLayer.getSource();
40

41
    if (!targetSource) return;
42

43
    // 3. 创建 Draw 交互（注意这里绑定了 source，画完会自动加进图层）
44
    currentDraw = new Draw({
45
      source: targetSource,
46
      type: type,
47
    });
48

49
    // 4. 监听绘制完成事件
50
    currentDraw.on("drawend", (event) => {
51
      const feature = event.feature;
52
      console.log(`绘制完成一个 [${type}] 要素`);
53

54
      // 【重要提示】此时 feature 的坐标是 3857（因为底图是3857）。
55
      // 如果你后续需要存到后端，需要在这里把 3857 转成 4326 再发请求。
56
      // 目前只是画在地图上，所以不需要转换，它已经自动加到 targetSource 里了。
57
    });
58

59
    // 5. 将交互添加到地图
60
    map.addInteraction(currentDraw);
61
  }
62

63
  /**
64
   * 停止当前绘制
65
   * @param {Map} map - OL地图实例
66
   */
67
  function deactivateDraw(map) {
68
    if (currentDraw) {
69
      map.removeInteraction(currentDraw);
70
      currentDraw = null;
71
    }
72
  }
73

74
  return {
75
    addBusinessLayers,
76
    setupWatchers,
77
    pointLayer,
78
    lineLayer,
79
    polygonLayer,
80
    addSelectInteraction,
81
    activateDraw, // 【新增】暴露出去
82
    deactivateDraw, // 【新增】暴露出去
83
  };
84
}