OpenLayers Draw交互中geometryFunction无法修改所有绘图要素的问题

在OpenLayers的Draw交互中，我用geometryFunction修改当前绘图的几何坐标，同时用style函数处理标签等内容。但遇到一个问题：绘图过程中style函数会处理多个临时要素，而geometryFunction仅返回修改后的主几何对象。

比如绘制LineString时：

• geometryFunction返回修改后的LineString几何
• 但style函数会处理**Point（当前鼠标位置点）和LineString（已绘制的线段）**两个要素，其中Point的几何没有被修改

绘制Polygon时同理：

• style函数会处理Point、LineString（已绘制的边）和Polygon（已闭合的面）要素
• 仅Polygon要素的几何被geometryFunction修改

我尝试过在style函数中直接修改几何，但没达到预期效果。请问在使用Draw交互时，如何在pointermove事件中处理所有临时要素的坐标修改？

我的geometryFunction实现 #

const obliqueGeom = (coords, geom) => {
  const center = this.obliCoords[0];
  const last = this.obliCoords[this.obliCoords.length - 1];
  const dx = center[0] - last[0];
  const dy = center[1] - last[1];
  const radius = Math.sqrt(dx * dx + dy * dy);

  if (!geom) {
    if (measureType === "LineString") {
      geom = new ol.geom.LineString(this.obliCoords)
    }
    if (measureType === "Polygon") {
      geom = new ol.geom.Polygon([this.obliCoords])
    }
    if (measureType === "Circle") {
      geom = new ol.geom.Circle(center, radius)
    }
    if (measureType === "Point") {
      geom = new ol.geom.Point(this.obliCoords)
    }
  } else {
    if (geom instanceof ol.geom.Circle) {
      geom.setCenterAndRadius(center, radius)
    } else if (geom instanceof ol.geom.Polygon) {
      geom.setCoordinates([this.obliCoords])
    } else {
      geom.setCoordinates(this.obliCoords)
    }
  }

  return geom
}

坐标收集逻辑 #

this.clickEvt = this.map.on("click", (evt) => {
  newPx = [evt.pixel[0], evt.pixel[1] / 0.83]
  newCoord = this.map.getCoordinateFromPixel(newPx)
  if (measureType !== "Polygon") {
    this.obliCoords.push(newCoord)
  } else {
    if (this.obliCoords.length <= 1) {
      this.obliCoords.splice(0, 0, newCoord)
      this.obliCoords.push(newCoord)
    } else {
      this.obliCoords.splice(this.obliCoords.length - 1, 0, newCoord)
    }
  }
})

this.moveEvt = this.map.on("pointermove", (evt) => {
  newPx = [evt.pixel[0], evt.pixel[1] / 0.83]
  newCoord = this.map.getCoordinateFromPixel(newPx)
  if (measureType !== "Polygon") {
    this.obliCoords.pop()
    this.obliCoords.push(newCoord)
  } else {
    if (this.obliCoords.length <= 1) {
      this.obliCoords.pop()
      this.obliCoords.push(newCoord)
    } else {
      this.obliCoords.splice(this.obliCoords.length - 2, 1, newCoord)
    }
  }
})

核心思路：在style函数中统一处理所有临时要素的几何修改 #

Draw交互在绘制过程中生成的临时要素（如Point、LineString）不会经过geometryFunction处理，因此需要在style函数中，基于当前收集的obliCoords，针对不同要素类型生成修改后的几何副本，再应用样式。注意不要直接修改传入的要素几何，否则会干扰Draw交互的内部状态。

示例实现 #

const drawStyle = (feature) => {
  const geomType = feature.getGeometry().getType();
  let modifiedGeom = null;

  // 根据要素类型，用obliCoords生成修改后的几何副本
  switch(geomType) {
    case 'Point':
      // 绘制中的Point对应当前鼠标位置，取obliCoords最后一个点
      modifiedGeom = new ol.geom.Point(this.obliCoords[this.obliCoords.length - 1]);
      break;
    case 'LineString':
      // 绘制中的LineString直接使用obliCoords
      modifiedGeom = new ol.geom.LineString(this.obliCoords);
      break;
    case 'Polygon':
      // 绘制中的Polygon用obliCoords生成闭合环
      modifiedGeom = new ol.geom.Polygon([this.obliCoords]);
      break;
    default:
      modifiedGeom = feature.getGeometry().clone();
  }

  // 基础几何样式
  const styles = [
    new ol.style.Style({
      geometry: modifiedGeom,
      stroke: new ol.style.Stroke({
        color: '#ff0000',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'rgba(255,0,0,0.2)'
      })
    })
  ];

  // 添加测量标签（示例：长度/面积）
  if (['LineString', 'Polygon'].includes(geomType)) {
    const text = geomType === 'LineString' 
      ? modifiedGeom.getLength().toFixed(2) + 'm'
      : modifiedGeom.getArea().toFixed(2) + '㎡';
    styles.push(new ol.style.Style({
      geometry: modifiedGeom,
      text: new ol.style.Text({
        text: text,
        fill: new ol.style.Fill({ color: '#333' }),
        stroke: new ol.style.Stroke({ color: '#fff', width: 2 })
      })
    }));
  }

  return styles;
};

// 初始化Draw交互时绑定style函数
const draw = new ol.interaction.Draw({
  source: yourSource,
  type: measureType,
  geometryFunction: obliqueGeom, // 保留原函数处理最终完成的要素
  style: drawStyle
});

额外优化：替换自定义事件，同步Draw内部状态 #

你当前自定义的click和pointermove事件可能与Draw交互的内部逻辑冲突，建议改用Draw的内置事件来管理obliCoords，保证坐标与绘制状态同步：

// 监听Draw开始事件，初始化坐标并绑定几何变化监听
draw.on('drawstart', (evt) => {
  this.obliCoords = [];
  // 监听绘制中几何的变化，同步更新obliCoords
  evt.feature.getGeometry().on('change', (geomEvt) => {
    const rawCoords = geomEvt.target.getCoordinates();
    // 根据要素类型提取坐标（Polygon是二维数组，取第一个环）
    const coords = measureType === 'Polygon' ? rawCoords[0] : rawCoords;
    // 应用你的像素转换逻辑（y轴缩放0.83）
    this.obliCoords = coords.map(coord => {
      const pixel = this.map.getPixelFromCoordinate(coord);
      pixel[1] /= 0.83;
      return this.map.getCoordinateFromPixel(pixel);
    });
  });
});

// 绘制结束后清理监听
draw.on('drawend', (evt) => {
  evt.feature.getGeometry().un('change');
});

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