如何使用OpenLayers限制現有多邊形內部的繪圖

Question

簡介：我想使用限制層上的捕捉交互作用來限制現有多邊形內的繪圖。

我在繪圖交互中實現了條件，該條件檢查限制源的功能是否可用以及是否可以在其中使用繪圖。

它可以正常工作，但是有點過於嚴格。 （例如，如果我想在現有邊界上繪制多邊形，或者我想使用現有邊界在多邊形內部繪制）。

下面的例子：

new Draw({
  condition: (e) => {
    let coords = e.coordinate
    let features = restrictionSource.getFeaturesAtCoordinate(coords);
    if (features.length > 0) {
      return true;
    } else {
      return false;
    }
  },
  type: "Polygon",
  source: vectorDrawLayer.getSource(),
  style: styleDuringDraw
});

在限制性多邊形內繪制時，我檢測到一些奇怪的行為。 在某些邊緣我可以單擊，而在其他邊緣我不能單擊。

在下面的實時示例中：

https://stackblitz.com/edit/js-txi1es

我無法從右下角（以及上角）的內部邊緣開始繪圖，在這種情況下，由於某些原因無法進行捕捉交互。 在某些情況下，我需要繪制使用整個限制性多邊形區域的多邊形區域，但是我不能這樣做，因為我的方法有點限制性。

我想知道在這種情況下是否可以使用或推薦其他方法。

Answer 1

第一個問題是多邊形未正確關閉，這意味着捕捉無法在一個邊緣上工作：

  'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6], [-5e6, -1e6]]]

捕捉會捕捉到像素，並且似乎該事件中的坐標有時不完全位於要素上，因此此測試應該更可靠

let features = olMap.getFeaturesAtPixel(e.pixel, { layerFilter: function(layer) { return layer === restrictionLayer; }});
if (features && features.length > 0) {