Modify interaction для редактирования

Modify interaction реализует интерактивное редактирование геометрий на карте: перемещение вершин, добавление новых узлов, удаление точек и корректировку формы объектов. Механизм работает поверх векторного источника данных и напрямую изменяет геометрию feature, синхронно обновляя отображение слоя.

Ключевая особенность взаимодействия заключается в том, что изменение геометрии происходит в режиме реального времени, без промежуточных шагов сохранения: объект модифицируется сразу в памяти feature, а VectorSource автоматически инициирует перерисовку слоя.

Базовая архитектура Modify interaction

Modify interaction строится вокруг трёх основных компонентов:

  • Feature — объект геометрии
  • VectorSource — источник данных
  • Modify interaction — обработчик пользовательских действий

Взаимодействие происходит по следующей схеме:

  1. пользователь кликает по вершине геометрии;
  2. активируется режим захвата вершины;
  3. перемещение мыши изменяет координаты;
  4. геометрия пересчитывается;
  5. слой обновляется через рендерер карты.

Подключение и создание Modify interaction

Модуль Modify импортируется отдельно:

import Modify from 'ol/interaction/Modify';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';

Создание базового слоя:

const source = new VectorSource({
  features: []
});

const layer = new VectorLayer({
  source: source
});

Добавление взаимодействия редактирования:

const modify = new Modify({
  source: source
});

map.addInteraction(modify);

Режим работы через source и features

Modify interaction поддерживает два основных режима привязки:

  • source — редактирование всех объектов источника
  • features — редактирование конкретного набора объектов

Использование source

new Modify({
  source: source
});

Редактируются все features, находящиеся в источнике.

Использование features

new Modify({
  features: collection
});

Позволяет ограничить редактирование выбранным набором объектов, что важно для сценариев выделения.

Поведение вершин и сегментов

Modify interaction оперирует двумя типами элементов:

  • вершины (vertices)
  • сегменты (edges между вершинами)

При захвате вершины происходит изменение её координат. При работе с сегментами может включаться логика вставки новых точек.

Параметр pixelTolerance

pixelTolerance задаёт допустимую погрешность захвата вершины в пикселях:

const modify = new Modify({
  source: source,
  pixelTolerance: 10
});

Большие значения упрощают редактирование на мобильных устройствах, но снижают точность.

insertVertexCondition: управление добавлением вершин

Добавление новых узлов контролируется функцией insertVertexCondition.

import { platformModifierKeyOnly } from 'ol/events/condition';

const modify = new Modify({
  source: source,
  insertVertexCondition: platformModifierKeyOnly
});

Поведение:

  • при удержании системной клавиши (Ctrl / Cmd) разрешается вставка новых вершин;
  • без условия происходит только перемещение существующих узлов.

deleteCondition: удаление вершин

Удаление вершин задаётся отдельным условием:

import { singleClick } from 'ol/events/condition';

const modify = new Modify({
  source: source,
  deleteCondition: singleClick
});

Чаще используется комбинация с клавишами:

import { platformModifierKeyOnly } from 'ol/events/condition';

deleteCondition: (event) => {
  return platformModifierKeyOnly(event) && event.type === 'singleclick';
}

Особенности работы с полигонами

При редактировании полигонов Modify interaction учитывает:

  • замыкание кольца геометрии;
  • внутренние и внешние контуры (holes);
  • необходимость сохранения валидности геометрии.

При нарушении топологии (например, самопересечение) поведение зависит от геометрического типа и версии движка геометрии.

Работа с линиями (LineString)

Для линейных объектов Modify interaction обеспечивает:

  • добавление промежуточных точек;
  • перераспределение сегментов;
  • динамическое изменение формы маршрута.

При включённой вставке вершин линии становятся полностью интерактивными по всей длине.

Ограничение редактирования через фильтрацию features

Редактирование можно ограничить набором объектов:

const selected = new Collection();

const modify = new Modify({
  features: selected
});

Такой подход используется совместно с Sel ect interaction для сценариев:

  • редактирование только выбранных объектов;
  • изоляция изменений;
  • управление слоями редактирования.

stopEvent и поведение событий

Modify interaction генерирует события:

  • modifystart
  • modifyend

Пример обработки:

modify.on('modifystart', (e) => {
  console.log('start', e.features);
});

modify.on('modifyend', (e) => {
  console.log('end', e.features);
});

Эти события позволяют:

  • фиксировать состояние до изменения;
  • выполнять валидацию геометрии;
  • сохранять изменения в backend.

Учет проекции и координат

Modify interaction работает в координатах проекции карты. Все изменения происходят в:

  • EPSG системы карты (например, EPSG:3857);
  • без автоматического преобразования в географические координаты.

При сохранении данных часто требуется:

import { toLonLat } fr om 'ol/proj';

или обратное преобразование перед отправкой на сервер.

Snap-интеграция и точность редактирования

Modify interaction часто используется совместно с Snap interaction:

  • Snap обеспечивает «прилипание» к вершинам;
  • Modify изменяет геометрию;
  • совместная работа повышает точность редактирования.

Поведение при нескольких геометриях

При наличии нескольких объектов:

  • захват происходит по ближайшей вершине;
  • приоритет зависит от порядка рендеринга;
  • возможно перекрытие целей редактирования.

Ограничения и особенности производительности

Редактирование большого количества сложных геометрий приводит к:

  • увеличению нагрузки на пересчёт координат;
  • частым rerender событиям;
  • росту стоимости hit detection.

Оптимизация достигается через:

  • разделение слоёв редактирования;
  • ограничение features;
  • использование simplify геометрий перед редактированием.

Программное управление Modify interaction

Взаимодействие можно включать и отключать динамически:

modify.setActive(false);
modify.setActive(true);

Это используется при:

  • переключении режимов карты;
  • временной блокировке редактирования;
  • конфликте с другими interactions.

Кастомизация поведения через события pointer

Modify interaction опирается на pointer-события:

  • pointerdown
  • pointerdrag
  • pointerup

Изменение логики возможно через:

  • кастомные conditions;
  • переопределение поведения insert/delete;
  • комбинирование с Translate interaction.

Сочетание с Translate interaction

Modify и Translate решают разные задачи:

  • Modify — изменение формы геометрии;
  • Translate — перемещение всей геометрии целиком.

Совместное использование:

import Translate from 'ol/interaction/Translate';

const translate = new Translate({
  features: selected
});

map.addInteraction(translate);
map.addInteraction(modify);

Типовые сценарии применения

  • редактор геометрии на GIS-карте;
  • корректировка маршрутов;
  • правка границ административных объектов;
  • интерактивные чертежи;
  • пользовательские редакторы картографических данных.
Оглавление