Настройка инструментов рисования

Функциональность рисования в Google Maps JavaScript API предоставляется дополнительной библиотекой drawing, которая подключается отдельно от базового API. Без её явного включения доступ к DrawingManager и связанным классам отсутствует.

Подключение выполняется через параметр libraries при загрузке API:

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

При необходимости подключения нескольких библиотек используется перечисление через запятую:

libraries=drawing,geometry

Библиотека drawing добавляет следующие ключевые компоненты:

  • google.maps.drawing.DrawingManager
  • набор режимов рисования (маркер, полилиния, многоугольник, прямоугольник, окружность)
  • инструменты редактирования уже созданных объектов

Инициализация карты как основа для DrawingManager

Инструменты рисования работают поверх экземпляра карты google.maps.Map. Карта создаётся стандартным способом:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 55.751244, lng: 37.618423 },
  zoom: 10,
});

DrawingManager привязывается к уже созданной карте и использует её как контекст для размещения объектов.

Конфигурация DrawingManager

Ключевой объект библиотеки — DrawingManager. Он управляет режимами рисования, стилями объектов и поведением после завершения создания фигур.

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

const drawingManager = new google.maps.drawing.DrawingManager({
  map: map,
  drawingMode: google.maps.drawing.OverlayType.MARKER,
  drawingControl: true,
});

Основные свойства конфигурации

drawingMode Определяет активный режим рисования:

  • MARKER
  • POLYGON
  • POLYLINE
  • RECTANGLE
  • CIRCLE

drawingControl Включает панель инструментов рисования на карте.

drawingControlOptions Позволяет настроить расположение и доступные инструменты:

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

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

Маркеры

Режим MARKER создаёт одиночные точки на карте.

google.maps.drawing.OverlayType.MARKER

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

Линии

POLYLINE формирует ломаную линию из последовательности точек.

google.maps.drawing.OverlayType.POLYLINE

Типично применяется для маршрутов и трасс.

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

POLYGON позволяет замыкать фигуру и заполнять её область.

google.maps.drawing.OverlayType.POLYGON

Используется для выделения территорий, зон и границ.

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

RECTANGLE создаёт прямоугольную область по двум точкам диагонали.

google.maps.drawing.OverlayType.RECTANGLE

Окружности

CIRCLE задаётся центром и радиусом.

google.maps.drawing.OverlayType.CIRCLE

Настройка стилей фигур

Каждый тип объекта поддерживает собственный набор визуальных параметров.

Пример стилизации полигона

const polygonOptions = {
  fillColor: "#2b8a3e",
  fillOpacity: 0.35,
  strokeColor: "#1c5f2a",
  strokeWeight: 2,
  clickable: true,
  editable: true,
  zIndex: 1,
};

Применение в DrawingManager

const drawingManager = new google.maps.drawing.DrawingManager({
  map: map,
  polygonOptions: polygonOptions,
});

Стили для линий

polylineOptions: {
  strokeColor: "#ff0000",
  strokeOpacity: 0.8,
  strokeWeight: 3,
  editable: true,
}

Стили для окружностей

circleOptions: {
  fillColor: "#4285F4",
  fillOpacity: 0.2,
  strokeColor: "#3367D6",
  strokeWeight: 2,
  editable: true,
}

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

После завершения рисования объект может:

  • оставаться редактируемым
  • становиться статичным
  • удаляться или заменяться новым

Контроль осуществляется через параметр:

drawingManager.setOptions({
  drawingMode: null,
});

Установка null отключает активный режим рисования после создания фигуры.

Обработка событий создания объектов

Каждый раз при создании фигуры срабатывает событие overlaycomplete.

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

Структура события

  • event.overlay — созданный объект (Marker, Polygon и т.д.)
  • event.type — тип объекта

Пример хранения созданных объектов

Для управления множеством фигур обычно используется массив:

const allOverlays = [];

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

Редактирование созданных фигур

Большинство объектов поддерживают интерактивное редактирование.

Включение редактирования полигона

polygon.setEditable(true);

Перетаскивание маркера

marker.setDraggable(true);

Изменение формы окружности

circle.setEditable(true);

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

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

Удаление объектов выполняется через привязку к карте:

overlay.setMap(null);

Для массового удаления:

allOverlays.forEach((item) => item.setMap(null));
allOverlays.length = 0;

Ограничение типов рисования

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

drawingControlOptions: {
  drawingModes: [
    google.maps.drawing.OverlayType.POLYGON,
    google.maps.drawing.OverlayType.CIRCLE,
  ],
}

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

Работа с координатами и извлечение данных

Координаты маркера

marker.getPosition().lat();
marker.getPosition().lng();

Координаты полигона

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

Радиус окружности

circle.getRadius();
circle.getCenter();

Сохранение геометрии в структурированные форматы

Часто требуется преобразование данных в формат GeoJSON-подобной структуры.

Пример полигона

function polygonToCoords(polygon) {
  const coords = [];

  polygon.getPath().forEach((point) => {
    coords.push([point.lng(), point.lat()]);
  });

  return coords;
}

Производительность при большом количестве объектов

При работе с десятками и сотнями фигур учитываются следующие факторы:

  • отключение ненужной анимации
  • минимизация editable=true для статичных слоёв
  • группировка объектов
  • удаление невидимых элементов
  • отказ от сложных stroke-стилей

Полный пример интеграции DrawingManager

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 55.751244, lng: 37.618423 },
  zoom: 11,
});

const drawingManager = new google.maps.drawing.DrawingManager({
  map: map,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
      google.maps.drawing.OverlayType.MARKER,
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.CIRCLE,
    ],
  },
  markerOptions: {
    draggable: true,
  },
  polygonOptions: {
    fillColor: "#00AAFF",
    fillOpacity: 0.3,
    strokeWeight: 2,
    editable: true,
  },
  circleOptions: {
    fillColor: "#FFAA00",
    fillOpacity: 0.2,
    strokeWeight: 2,
    editable: true,
  },
});

google.maps.event.addListener(drawingManager, "overlaycomplete", function (event) {
  const shape = event.overlay;
  shape.setEditable(true);
});

Архитектурные модели использования

Модель одноразового рисования

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

Модель интерактивного редактора

  • постоянный drawingControl
  • редактирование существующих фигур
  • динамическое обновление данных

Модель геозон

  • полигоны как зоны доступа
  • проверка попадания точек
  • хранение в базе данных

Событийная модель взаимодействия

Drawing API основан на событиях:

  • создание объекта
  • изменение формы
  • завершение редактирования
  • удаление

Комбинация событий позволяет строить полноценные геоинформационные интерфейсы поверх карты без внешних библиотек.

Оглавление