Режимы рисования

Режимы рисования в API представляют собой механизм интерактивного создания геометрических объектов прямо на карте: маркеров, линий, многоугольников, прямоугольников и окружностей. Основой этой функциональности выступает модуль Drawing Library, который расширяет базовый функционал карты средствами пользовательского черчения и управления геометрией.

Библиотека Drawing Library и включение функциональности

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

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=drawing"></script>

Подключение этой библиотеки активирует объект google.maps.drawing, содержащий инструменты управления режимами рисования и классы для создания панели инструментов.

DrawingManager как центральный контроллер режимов

Основным объектом управления является DrawingManager. Он отвечает за:

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

Базовая инициализация:

const drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.MARKER,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
      google.maps.drawing.OverlayType.MARKER,
      google.maps.drawing.OverlayType.CIRCLE,
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.POLYLINE,
      google.maps.drawing.OverlayType.RECTANGLE
    ]
  }
});

drawingManager.setMap(map);

Ключевой параметр drawingMode определяет активный режим рисования в данный момент.

OverlayType и типы режимов рисования

Режимы рисования определяются перечислением google.maps.drawing.OverlayType, которое включает следующие типы:

MARKER

Создание одиночной точки на карте.

  • Используется для отметок объектов
  • Не имеет геометрической площади
  • Часто применяется для пользовательских меток

CIRCLE

Режим создания окружности.

  • Задаётся центр и радиус
  • Радиус изменяется динамически при рисовании
  • Поддерживает обработку событий изменения границ

POLYGON

Режим многоугольников.

  • Позволяет задавать произвольные замкнутые области
  • Используется для зон, границ, территорий
  • Поддерживает сложные контуры с несколькими вершинами

POLYLINE

Ломаная линия.

  • Применяется для маршрутов и путей
  • Не замыкается автоматически
  • Может иметь произвольное число сегментов

RECTANGLE

Прямоугольная область.

  • Определяется двумя углами
  • Часто используется для выделения областей карты

Переключение режимов рисования

Режим можно изменять динамически через метод setDrawingMode:

drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);

Отключение режима рисования:

drawingManager.setDrawingMode(null);

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

Управление панелью инструментов

Панель инструментов рисования настраивается через drawingControlOptions.

drawingControl: true,
drawingControlOptions: {
  position: google.maps.ControlPosition.TOP_RIGHT,
  drawingModes: [
    google.maps.drawing.OverlayType.MARKER,
    google.maps.drawing.OverlayType.POLYGON
  ]
}

Параметры управления:

  • position — расположение панели на карте
  • drawingModes — список доступных инструментов

Отключение панели:

drawingControl: false

Обработка созданных объектов

После завершения рисования возникает событие overlaycomplete, которое позволяет получить созданный объект:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  const overlay = event.overlay;
  const type = event.type;

  console.log('Создан объект типа:', type);
});

Тип события зависит от выбранного режима:

  • markercomplete
  • circlecomplete
  • polygoncomplete
  • polylinecomplete
  • rectanglecomplete

Конфигурация параметров создаваемых объектов

Каждый режим поддерживает настройку внешнего вида и поведения объектов.

Маркеры

markerOptions: {
  draggable: true,
  icon: "icon.png"
}

Линии

polylineOptions: {
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
}

Многоугольники

polygonOptions: {
  fillColor: "#00FF00",
  fillOpacity: 0.35,
  strokeWeight: 2,
  editable: true
}

Окружности

circleOptions: {
  fillColor: "#0000FF",
  fillOpacity: 0.2,
  strokeWeight: 2
}

Прямоугольники

rectangleOptions: {
  fillColor: "#FFAA00",
  fillOpacity: 0.3,
  strokeWeight: 2,
  editable: true
}

Редактирование после создания объектов

Созданные геометрические объекты могут быть интерактивно изменены при включённом параметре editable: true.

Для полигона:

  • перемещение вершин
  • добавление новых узлов
  • удаление сегментов

Для окружности:

  • изменение центра
  • изменение радиуса

Для прямоугольника:

  • изменение угловых точек

Пример активации редактирования:

polygon.setEditable(true);

Программное управление созданными оверлеями

Каждый созданный объект возвращает экземпляр соответствующего класса:

  • google.maps.Marker
  • google.maps.Polygon
  • google.maps.Polyline
  • google.maps.Circle
  • google.maps.Rectangle

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

overlay.setMap(null);

Получение координат:

const path = polygon.getPath();
path.forEach(function(latLng) {
  console.log(latLng.lat(), latLng.lng());
});

Ограничение и контроль рисования

Режимы рисования часто требуют ограничения количества объектов или их параметров.

Примеры контролируемых сценариев:

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

Пример ограничения переключения режима:

if (polygons.length >= 1) {
  drawingManager.setDrawingMode(null);
}

События изменения геометрии

После создания объекта можно отслеживать его изменения:

Полигон

google.maps.event.addListener(polygon.getPath(), 'set_at', function() {
  console.log('Точка изменена');
});

Окружность

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log('Радиус изменён');
});

Прямоугольник

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Границы изменены');
});

Сочетание режимов с пользовательским интерфейсом

Режимы рисования часто интегрируются с внешними UI-элементами:

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

Пример ручного переключения через кнопку:

document.getElementById("polygonBtn").oncl ick = function() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
};

Сброс состояния рисования

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

drawingManager.setMap(null);
drawingManager.setMap(map);

Альтернативно — удаление всех объектов вручную:

overlays.forEach(o => o.setMap(null));
overlays = [];

Практическое использование режимов рисования

Режимы рисования применяются в системах:

  • геозонирования (geofencing);
  • планирования маршрутов;
  • картографических редакторов;
  • CRM-систем с картами объектов;
  • аналитики территорий;
  • логистических сервисов.

Архитектурные особенности взаимодействия

Внутри API режим рисования работает как слой поверх базовой карты:

  • карта (Map) отвечает за рендеринг тайлов;
  • DrawingManager управляет состоянием ввода;
  • overlay-объекты хранят геометрию;
  • события синхронизируют пользовательские действия и состояние модели.

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

Оглавление