时间戳

首页 > 解决方案 > 如何使用 OpenLayers 限制现有多边形内的绘图

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

问题描述

小介绍：我想使用限制层上的捕捉交互来限制现有多边形内的绘图。

我在绘图交互上实现了条件，检查限制性源的功能是否可用，以及它们是否在其中启用绘图。

它工作正常，但它有点过于严格。（例如，如果我想在现有边界上绘制多边形，或者我想使用现有边界在多边形内部绘制）。

下面的例子：

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

我无法从右下角（以及上角）的内侧边缘开始绘制，由于某种原因，快照交互不起作用。我有一种情况，我需要绘制使用限制性多边形的整个区域的多边形区域，但我不能这样做，因为我的方法有点限制性。

我想知道在这种情况下是否有任何不同的方法可用或推荐。

标签： javascriptopenlayersopenlayers-5

解决方案

第一个问题你的多边形没有正确关闭，这意味着捕捉不能在一个边缘上工作：

  '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) {

推荐阅读