React中OpenLayers地图绘制多边形坐标获取问题排查

问题根源 #

• drawend事件绑定对象错误：drawend是OpenLayers中Draw交互专属的事件，并非Map实例的事件，绑定到map上自然无法触发。
• 多边形坐标解析方式有误：多边形的getCoordinates()返回嵌套数组格式（[[[x1,y1],[x2,y2],...]]），和点的一维数组结构不同，需要针对性解析。

修正后的完整代码实现 #

下面是修复后的自定义Hook，解决了事件触发和坐标获取的核心问题：

import { useEffect, useState } from "react";
import Draw from 'ol/interaction/Draw';
import { Vector as VectorSource } from 'ol/source';

export function useWatchOnMapDrawPolygon(mapRef, drawInteractionRef) {
  const [polygonCoords, setPolygonCoords] = useState([]);

  const onDrawEnd = (event) => {
    // 直接从drawend事件中获取绘制完成的要素
    const polygonFeature = event.feature;
    const polygonGeometry = polygonFeature.getGeometry();
    
    // 多边形坐标为嵌套数组，取第一个环的顶点坐标（外层嵌套为环集合）
    const rawCoords = polygonGeometry.getCoordinates();
    const coordinates = rawCoords[0];
    
    setPolygonCoords(coordinates);
    console.log("多边形顶点坐标：", coordinates);
  };

  useEffect(() => {
    const map = mapRef?.current?.map;
    const draw = drawInteractionRef?.current;

    if (!map || !draw) return;

    // 绑定drawend事件到Draw交互实例，而非Map
    draw.on('drawend', onDrawEnd);

    // 组件卸载时清理事件监听与交互
    return () => {
      draw.un('drawend', onDrawEnd);
      map.removeInteraction(draw);
    };
  }, [mapRef?.current?.map, drawInteractionRef?.current]);

  return polygonCoords;
}

配套使用示例 #

1. 创建并保存Draw交互引用：在组件中初始化Draw交互时，将其存入ref以便Hook调用：

const mapRef = useRef(null);
const drawInteractionRef = useRef(null);

useEffect(() => {
  const map = mapRef.current.map;
  const vectorSource = new VectorSource();
  // 创建多边形绘制交互
  const draw = new Draw({
    source: vectorSource,
    type: 'Polygon'
  });
  map.addInteraction(draw);
  drawInteractionRef.current = draw;
}, [mapRef.current.map]);

2. 调用自定义Hook获取坐标：

const polygonCoords = useWatchOnMapDrawPolygon(mapRef, drawInteractionRef);

关键细节说明 #

• drawend事件的event对象自带feature属性，无需通过forEachFeatureAtPixel查找，这是Draw交互事件的原生特性。
• 多边形坐标的外层嵌套代表环集合（第一个是外环，后续为可选的内环），取rawCoords[0]即可得到所有顶点的一维坐标数组。
• 必须在组件卸载时移除事件监听和Draw交互，避免内存泄漏。

内容的提问来源于stack exchange，提问作者intercoder