OpenLayers 3/4中如何区分多边形顶点、边与内部的点击事件？

当然可以区分！不管是OpenLayers 3还是4，都能实现这个需求，我给你分情况说说，还有替代方案供你参考：

一、直接用OpenLayers的几何检测（OL3/OL4通用，OL4略有优化） #

核心思路是监听地图点击事件，然后按「顶点→边→内部」的优先级依次判断点击位置（先排除顶点，再排除边，最后判断内部）。

步骤拆解： #

1. 顶点检测：
   先获取多边形的所有顶点坐标，计算点击点和每个顶点的距离。因为屏幕像素和地图坐标单位不同，需要把像素阈值（比如5px，允许用户点击时的微小偏差）转换成地图单位：地图单位 = 像素阈值 × 视图分辨率。如果距离小于这个阈值，就判定点击了顶点。

2. 边检测：
   遍历多边形的每条边（相邻两个顶点组成的线段），计算点击点到这条线段的垂直距离，同样用上述阈值判断。OL4里可以用ol.geom.LineString.prototype.closestPoint方法快速获取线段上离点击点最近的点，再算距离，比OL3自己实现稍微简便一点。

3. 内部检测：
   直接用多边形几何对象的intersectsCoordinate方法，判断点击点是否在多边形内部。

简单代码示例（OL3）： #

// 监听地图点击事件
map.on('click', function(evt) {
  const polygonGeom = yourPolygonFeature.getGeometry();
  const clickCoord = evt.coordinate;
  const pixelTolerance = 5; // 允许的点击偏差像素
  const mapUnitTolerance = pixelTolerance * map.getView().getResolution();

  // 1. 检查是否点击顶点
  const vertices = polygonGeom.getCoordinates()[0]; // 假设是单环多边形
  let isVertexClick = false;
  for (let i = 0; i < vertices.length - 1; i++) { // 最后一个点和第一个重复，跳过
    if (ol.coordinate.distance(vertices[i], clickCoord) < mapUnitTolerance) {
      console.log('点击了多边形顶点');
      isVertexClick = true;
      break;
    }
  }
  if (isVertexClick) return;

  // 2. 检查是否点击边
  let isEdgeClick = false;
  for (let j = 0; j < vertices.length - 1; j++) {
    const start = vertices[j];
    const end = vertices[j+1];
    // 自定义点到线段的距离计算函数
    const distance = pointToSegmentDistance(clickCoord, start, end);
    if (distance < mapUnitTolerance) {
      console.log('点击了多边形边');
      isEdgeClick = true;
      break;
    }
  }
  if (isEdgeClick) return;

  // 3. 检查是否点击内部
  if (polygonGeom.intersectsCoordinate(clickCoord)) {
    console.log('点击了多边形内部');
  } else {
    console.log('点击了多边形外部');
  }
});

// 点到线段的距离计算函数
function pointToSegmentDistance(point, start, end) {
  const [x, y] = point;
  const [x1, y1] = start;
  const [x2, y2] = end;
  const A = x - x1;
  const B = y - y1;
  const C = x2 - x1;
  const D = y2 - y1;
  const dot = A*C + B*D;
  const lenSq = C*C + D*D;
  let param = -1;
  if (lenSq !== 0) param = dot / lenSq;
  
  let xx, yy;
  if (param < 0) {
    xx = x1; yy = y1;
  } else if (param > 1) {
    xx = x2; yy = y2;
  } else {
    xx = x1 + param*C; yy = y1 + param*D;
  }
  const dx = x - xx;
  const dy = y - yy;
  return Math.sqrt(dx*dx + dy*dy);
}

OL4的优化点： #

在边检测部分，可以用ol.geom.LineString的closestPoint方法简化计算：

// OL4中边检测的简化代码
const edgeGeom = new ol.geom.LineString([start, end]);
const closestPointOnEdge = edgeGeom.closestPoint(clickCoord);
if (ol.coordinate.distance(closestPointOnEdge, clickCoord) < mapUnitTolerance) {
  isEdgeClick = true;
}

二、拆分要素的替代方案 #

如果觉得手动计算距离太麻烦，也可以把多边形拆成三个独立的要素组：

• 顶点：用Point要素创建，放在单独的图层
• 边：用LineString要素创建，每个边对应一个要素，放在单独的图层
• 多边形内部：保留原Polygon要素

然后给每个图层添加ol.interaction.Select交互，这样点击不同图层的要素时，直接就能区分是顶点、边还是内部。这种方法的好处是逻辑更直观，不用写复杂的距离计算，但需要维护要素的同步（比如多边形编辑时，要同步更新顶点和边的要素）。

总结 #

• 如果你不想额外维护多个要素，用几何检测的方法就行，OL3和OL4都能实现，OL4只是在部分方法上更便捷，切换成本不高。
• 如果追求更清晰的交互逻辑，拆分要素的方案更适合，尤其是需要对顶点/边做单独样式或编辑操作的场景。

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