如何使用OpenLayers限制现有多边形内部的绘图

时间:2019-07-19 12:24:09

标签: javascript openlayers openlayers-5

简介:我想通过在限制层上进行捕捉交互来限制现有多边形内部的绘制。

我在绘图交互中实现了条件,该条件检查限制性源的功能是否可用以及是否可以在其中进行绘图。

它可以正常工作,但是有点限制。 (例如,如果我想在现有边界上绘制多边形,或者想使用现有边界在多边形内部绘制)。

以下示例:

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

我无法从右下角(以及上角)的内部边缘开始绘制,在这种情况下,由于某些原因无法进行捕捉交互。在某些情况下,我需要绘制使用整个限制性多边形区域的多边形区域,但是由于我的方法有点限制性,所以我不能这样做。

我想知道在这种情况下是否可以使用或推荐其他方法。

1 个答案:

答案 0 :(得分: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) {