Удаление инструментов рисования

Архитектура инструментов рисования

Инструменты рисования в Google Maps JavaScript API реализуются через дополнительный модуль DrawingManager, который предоставляет UI-панель и набор режимов создания геометрических объектов: маркеров, полилиний, полигонов, прямоугольников и окружностей. После инициализации DrawingManager становится связующим звеном между интерфейсом пользователя и набором оверлеев карты.

Удаление инструментов рисования не сводится к одному действию — это процесс, включающий отключение менеджера, очистку состояния рисования, удаление оверлеев и освобождение привязанных ресурсов.

Отключение DrawingManager от карты

Базовый способ полного удаления панели инструментов — отвязка DrawingManager от экземпляра карты.

drawingManager.setMap(null);

При вызове этого метода:

  • панель инструментов исчезает из интерфейса;
  • активный режим рисования сбрасывается;
  • новые объекты больше не создаются через UI.

Сам объект DrawingManager при этом продолжает существовать в памяти, сохраняя внутреннее состояние.

Сброс режима рисования

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

drawingManager.setDrawingMode(null);

Это действие:

  • завершает текущую операцию рисования;
  • снимает активную кнопку инструмента;
  • предотвращает появление «недостроенных» объектов.

Особенно важно выполнять этот шаг при интерактивных сценариях, где пользователь может находиться в процессе создания полигона или линии.

Удаление созданных оверлеев

Отключение DrawingManager не удаляет уже созданные объекты. Все полигоны, линии, маркеры и окружности остаются на карте и требуют явного удаления.

Типичный подход — хранение ссылок на все созданные оверлеи:

const allOverlays = [];

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
  allOverlays.push(event.overlay);
});

Удаление всех объектов выполняется итерацией:

allOverlays.forEach(overlay => {
  overlay.setMap(null);
});
allOverlays.length = 0;

Каждый тип оверлея (Polygon, Polyline, Circle, Rectangle, Marker) поддерживает метод setMap(null), который полностью удаляет его с карты.

Очистка отдельных типов объектов

В сложных приложениях часто требуется более точечное управление.

Удаление полигонов:

polygons.forEach(p => p.setMap(null));
polygons = [];

Удаление окружностей:

circles.forEach(c => c.setMap(null));
circles = [];

Удаление маркеров:

markers.forEach(m => m.setMap(null));
markers = [];

Такой подход позволяет частично сохранять данные (например, координаты), не отображая их визуально.

Полное уничтожение DrawingManager

Если требуется полностью удалить инструмент, включая его состояние, обработчики и UI, используется комбинация нескольких шагов.

drawingManager.setDrawingMode(null);
drawingManager.setMap(null);
drawingManager = null;

После этого:

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

Важно учитывать, что повторное создание DrawingManager требует новой инициализации с конфигурацией.

Управление обработчиками событий

DrawingManager активно использует события, такие как overlaycomplete, drawingmode_changed, circlecomplete и другие. При удалении инструментов важно разрывать связи с обработчиками, иначе сохраняются утечки памяти.

Пример сохранения ссылки на обработчик:

const overlayHandler = google.maps.event.addListener(
  drawingManager,
  'overlaycomplete',
  onOverlayComplete
);

Удаление обработчика:

google.maps.event.removeListener(overlayHandler);

Если используется несколько событий:

google.maps.event.clearInstanceListeners(drawingManager);

Этот вызов снимает все привязанные слушатели, полностью очищая объект от реактивного поведения.

Сброс состояния интерфейса карты

После удаления инструментов рисования могут оставаться побочные состояния интерфейса:

  • активные кнопки control UI;
  • выбранные режимы карты;
  • визуальные подсветки инструментов.

Для предотвращения артефактов применяется полная синхронизация состояния:

map.setOptions({
  draggableCursor: null,
  draggingCursor: null
});

В случае кастомных контролов требуется вручную деактивировать UI-элементы.

Управление слоями и группировка оверлеев

В более сложной архитектуре оверлеи группируются в логические коллекции. Вместо ручного удаления каждого объекта применяется слой-менеджмент:

const drawingLayer = [];

function addOverlay(overlay) {
  drawingLayer.push(overlay);
  overlay.setMap(map);
}

function clearLayer() {
  drawingLayer.forEach(o => o.setMap(null));
  drawingLayer.length = 0;
}

Такой подход упрощает массовое удаление объектов после отключения DrawingManager.

Удаление через замену карты

В крайних случаях применяется полная переинициализация карты:

map = new google.maps.Map(container, initialOptions);

Этот метод автоматически:

  • уничтожает все оверлеи;
  • сбрасывает DrawingManager;
  • очищает события, привязанные к старому экземпляру карты.

Подход используется при необходимости полного сброса состояния приложения.

Типичные ошибки при удалении инструментов

  • сохранение ссылок на оверлеи без их удаления с карты;
  • отключение DrawingManager без очистки событий;
  • повторное создание менеджера без удаления предыдущего экземпляра;
  • отсутствие сброса режима рисования перед удалением;
  • утечки памяти из-за неотписанных listeners.

Каждая из этих ошибок приводит к накоплению объектов в памяти и неконтролируемому поведению интерфейса.

Контроль жизненного цикла инструментов рисования

Управление DrawingManager строится на трёх фазах:

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

Корректное завершение жизненного цикла требует одновременного выполнения:

  • setDrawingMode(null);
  • setMap(null);
  • удаления всех оверлеев через setMap(null);
  • очистки обработчиков событий;
  • сброса внутренних коллекций объектов.
Оглавление