OpenLayers 4：如何检测绘制图形是否触碰或超出目标多边形边界

Hey Jeff, let's break down how to solve this spatial check problem in OpenLayers 4—since you tried intersectsCoordinate() without luck, I’ll walk you through the right methods and logic for your specific use case (checking if a circle/square drawn inside a target square crosses or touches the border).

First, let's clear up why intersectsCoordinate() didn't work: that method is designed to check if a single coordinate point intersects a geometry, not if two entire shapes interact. You need to use OpenLayers' geometry-to-geometry spatial relationship methods instead.

Key Geometry Methods You’ll Need #

OpenLayers 4’s ol.geom.Geometry class has three core methods for this kind of check:

• contains(geometry): Returns true if the target geometry fully encloses the second shape (border touches don’t count here unless the shapes’ edges are perfectly aligned)
• intersects(geometry): Returns true if the two shapes have any overlap at all—including touching borders or partial overlaps
• disjoint(geometry): Returns true if the two shapes don’t interact at all (the opposite of intersects())

Step-by-Step Logic for Your Scenario #

Let’s assume you already have your target square stored as a geometry object (targetSquareGeom) and you’ve just finished drawing a new shape (circle or square) whose geometry is stored in newDrawnGeom. Here’s how to check each scenario:

1. New shape is fully inside the target square (no border touch) #

Use contains() to confirm full enclosure:

if (targetSquareGeom.contains(newDrawnGeom)) {
  console.log("Perfect! The new shape is entirely inside the target square, no border contact.");
}

2. New shape touches the border or exceeds it #

If contains() returns false but intersects() returns true, the shape is either touching the border or sticking outside the target:

if (!targetSquareGeom.contains(newDrawnGeom) && targetSquareGeom.intersects(newDrawnGeom)) {
  console.log("Whoops! The new shape is touching the border or extending outside the target square.");
}

3. New shape is completely outside the target square #

Use disjoint() to confirm no interaction:

if (targetSquareGeom.disjoint(newDrawnGeom)) {
  console.log("The new shape is entirely outside the target square.");
}

Handling Circles and Polygons Together #

Good news: OpenLayers 4 handles spatial checks between ol.geom.Circle and ol.geom.Polygon seamlessly—all the methods above work across these geometry types without extra conversion.

Example Implementation with Draw Interaction #

Here’s how you’d plug this logic into a drawend event handler (when a user finishes drawing their shape):

// Assume you've already created your target square geometry (targetSquareGeom)
// and set up your vector source/layer
const drawInteraction = new ol.interaction.Draw({
  source: yourVectorSource,
  type: 'Circle' // Swap to 'Polygon' if you're drawing squares
});

drawInteraction.on('drawend', (event) => {
  const newDrawnGeom = event.feature.getGeometry();
  
  // Run the spatial checks
  if (targetSquareGeom.contains(newDrawnGeom)) {
    alert("Shape is fully inside the target square!");
  } else if (targetSquareGeom.intersects(newDrawnGeom)) {
    alert("Shape touches the border or goes outside the target!");
  } else {
    alert("Shape is completely outside the target square.");
  }
});

// Add the draw interaction to your map
map.addInteraction(drawInteraction);

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