Openlayers 4中如何禁用Polygon绘制的双击完成Draw交互？

嘿，这个问题我之前也碰到过，OpenLayers 4里Polygon的Draw交互确实没法直接用maxPoints来限制（毕竟多边形需要闭合，maxPoints主要针对线类要素），不过通过重写finishCondition是完全可以实现禁止双击完成的需求的！

核心思路 #

默认情况下，Polygon的Draw交互会在双击或者点击第一个点闭合时完成绘制。我们需要修改finishCondition函数，让它只在点击第一个点闭合时返回true，双击时返回false，这样就能彻底禁用双击完成的行为。

具体代码实现 #

这里给你一个可以直接套用的完整示例：

// 假设你已经初始化了map和vector source
var drawPolygon = new ol.interaction.Draw({
  source: yourVectorSource,
  type: 'Polygon',
  finishCondition: function(event) {
    // 第一步：直接排除双击事件，双击时不完成绘制
    if (event.type === 'dblclick') {
      return false;
    }

    // 第二步：判断是否点击了第一个点（闭合多边形）
    var drawInteraction = this;
    var currentFeature = drawInteraction.getFeatures().item(0);
    
    // 如果还没有绘制任何点，直接返回false
    if (!currentFeature) {
      return false;
    }

    var polygonGeom = currentFeature.getGeometry();
    // 获取多边形的坐标数组（外层是多边形，内层是环的坐标）
    var ringCoords = polygonGeom.getCoordinates()[0];
    
    // 至少需要3个点才能尝试闭合（多边形至少3个顶点）
    if (ringCoords.length < 3) {
      return false;
    }

    // 计算最后一个点和第一个点的距离，设置5像素的容差（可根据需求调整）
    var firstCoord = ringCoords[0];
    var lastCoord = ringCoords[ringCoords.length - 1];
    var view = map.getView();
    var pixelTolerance = 5;
    var tolerance = view.getResolution() * pixelTolerance;

    // 当距离小于容差时，判定为点击了第一个点，完成绘制
    return ol.coordinate.distance(firstCoord, lastCoord) < tolerance;
  }
});

// 添加交互到地图
map.addInteraction(drawPolygon);

为什么你之前用finishCondition没效果？ #

大概率是因为没正确处理事件类型或者坐标判断逻辑。比如很多人会忽略event.type的判断，导致双击时依然触发了默认的完成逻辑；或者容差设置不合理，导致点击第一个点也无法闭合。上面的代码已经帮你规避了这些问题。

关于JS Fiddle报错的小提示 #

如果你的JS Fiddle报错，可以先检查这几点：

• 确认OpenLayers 4的CDN链接正确，比如用https://cdn.jsdelivr.net/npm/openlayers@4.6.5/dist/ol.js
• 确保map、yourVectorSource这些变量已经正确初始化
• 打开浏览器控制台看具体错误信息，比如是否有变量未定义、语法错误等

这样设置后，用户就只能通过点击第一个点来完成Polygon的绘制，双击操作会被完全忽略，完美符合你的需求~

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