Как ограничить рисование внутри существующего многоугольника с помощью 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

Я не могу начать рисовать с внутреннего края правого нижнего угла (а также верхнего угла), где взаимодействие с привязкой по какой-то причине не работает. У меня есть случай, когда мне нужно нарисовать область многоугольника, которая использует всю область ограничивающего многоугольника, но я не могу этого сделать, потому что мой подход немного ограничен.

Мне интересно, доступен или рекомендован какой-либо другой подход в таких случаях.


javascript openlayers openlayers-5
person Svinjica    schedule 19.07.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Первая проблема: ваш многоугольник не закрыт должным образом, что означает, что привязка не работает на одном краю:

  '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) {
person Mike    schedule 19.07.2019
comment
Спасибо. Это именно то, что мне было нужно. Еще одно спасибо за дополнительные пояснения :) - person Svinjica; 20.07.2019