OpenLayers6如何限制多边形顶点拖拽不超出指定基底多边形范围

问题场景 #

我在开发中定义了一个基底多边形，要求所有后续绘制的多边形都必须完全落在该基底多边形范围内：

• 使用Draw交互绘制多边形时，仅需配置condition选项即可限制顶点仅能绘制在基底内部
• 修改多边形时存在缺陷：可直接将顶点拖拽到基底多边形外，给Modify交互配置和Draw相同的condition选项无法解决问题，该配置仅在顶点拖拽结束放置后才会生效，拖拽过程中无法实时限制

核心需求：实时限制所有内部多边形的顶点，不允许被拖拽到指定基底多边形范围外。

实现方案 #

通过自定义几何约束函数，在拖拽过程中实时校正顶点坐标，实现如下：

const constrainGeometry = (feature: RenderFeature | Feature<Geometry>) => {
  const geometry = feature.getGeometry() as Polygon | undefined;
  if (feature instanceof RenderFeature || geometry === undefined) {
    return geometry;
  }
  const coordinates = geometry.getCoordinates()[0].map((coordinate) => {
    const boundingGeometry = props.boundingFeature.getGeometry();
    if (boundingGeometry) {
      if (boundingGeometry.intersectsCoordinate(coordinate)) {
        return coordinate;
      } else {
        return boundingGeometry.getClosestPoint(coordinate);
      }
    } else {
      return coordinate;
    }
  });
  return new Polygon([coordinates]);
};

目前该实现可以正常运行，暂未找到更优的TypeScript适配方案。

内容的提问来源于stack exchange，提问作者Liviu Cristian Ionescu