Drawing Manager

Google Maps JavaScript API содержит модуль Drawing Manager, предназначенный для интерактивного рисования геометрических объектов на карте. Он предоставляет набор инструментов для создания маркеров, линий, полигонов, прямоугольников и окружностей непосредственно пользователем в браузере, без необходимости ручного вычисления координат или построения геометрии через код.

Основная идея Drawing Manager заключается в том, чтобы связать пользовательские действия мыши с объектами карты и автоматически преобразовывать эти действия в корректные географические данные.

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

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

Ключевой параметр — libraries=drawing, без которого инструменты рисования не будут доступны.

Инициализация карты

Drawing Manager работает поверх стандартного объекта карты:

let map;

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

Создание Drawing Manager

Основной объект — google.maps.drawing.DrawingManager.

let drawingManager;

function initDrawingManager() {
  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);
}

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

Drawing Manager поддерживает несколько типов объектов:

MARKER

Используется для установки точек на карте.

  • создаёт объект google.maps.Marker
  • фиксирует координаты клика

POLYLINE

Линия между точками.

  • последовательность LatLng
  • используется для маршрутов и измерений

POLYGON

Замкнутая область.

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

CIRCLE

Окружность с радиусом.

  • центр + радиус в метрах

RECTANGLE

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

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

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

Drawing Manager генерирует событие overlaycomplete, позволяющее перехватывать созданные объекты.

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

  if (type === google.maps.drawing.OverlayType.MARKER) {
    console.log("Marker:", overlay.getPosition().toJSON());
  }

  if (type === google.maps.drawing.OverlayType.POLYGON) {
    const path = overlay.getPath();
    const coordinates = path.getArray().map(p => p.toJSON());
    console.log("Polygon:", coordinates);
  }
});

Управление режимом рисования

Drawing Manager может переключаться между режимами динамически:

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

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

drawingManager.setDrawingMode(null);

Стилизация создаваемых объектов

Каждый тип объекта можно настроить через опции Drawing Manager.

Стили маркеров

markerOptions: {
  draggable: true,
  animation: google.maps.Animation.DROP,
}

Стили линий

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

Стили полигонов

polygonOptions: {
  fillColor: "#00FF00",
  fillOpacity: 0.3,
  strokeWeight: 2,
}

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

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

Стили прямоугольников

rectangleOptions: {
  fillColor: "#FFA500",
  fillOpacity: 0.25,
}

Полная конфигурация Drawing Manager

drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: null,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
      google.maps.drawing.OverlayType.MARKER,
      google.maps.drawing.OverlayType.POLYLINE,
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.CIRCLE,
      google.maps.drawing.OverlayType.RECTANGLE,
    ],
  },
  markerOptions: {
    draggable: true,
  },
  polylineOptions: {
    strokeColor: "#FF0000",
    strokeWeight: 3,
  },
  polygonOptions: {
    fillColor: "#00FF00",
    fillOpacity: 0.3,
  },
  circleOptions: {
    fillColor: "#0000FF",
    fillOpacity: 0.2,
  },
  rectangleOptions: {
    fillColor: "#FFA500",
    fillOpacity: 0.25,
  },
});

Получение координат объектов

Маркер

overlay.getPosition().lat();
overlay.getPosition().lng();

Линия и полигон

const path = overlay.getPath();

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

Окружность

const center = overlay.getCenter();
const radius = overlay.getRadius();

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

const bounds = overlay.getBounds();

console.log(bounds.getNorthEast().toJSON());
console.log(bounds.getSouthWest().toJSON());

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

Созданные overlay можно удалять программно:

overlay.setMap(null);

Для массового удаления часто хранят ссылки:

const overlays = [];

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

function clearAll() {
  overlays.forEach(o => o.setMap(null));
  overlays.length = 0;
}

Отключение редактирования после создания

По умолчанию многие объекты остаются редактируемыми. Можно фиксировать их состояние:

polygon.setEditable(false);
polygon.setDraggable(false);

Интеграция с пользовательскими сценариями

Drawing Manager часто используется в задачах:

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

При этом данные, полученные из overlay, обычно сериализуются в GeoJSON-подобные структуры:

function polygonToGeoJSON(polygon) {
  const coords = polygon.getPath().getArray().map(p => [p.lng(), p.lat()]);

  return {
    type: "Polygon",
    coordinates: [coords],
  };
}

События редактирования

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

google.maps.event.addListener(polygon.getPath(), "set_at", updateData);
google.maps.event.addListener(polygon.getPath(), "insert_at", updateData);
google.maps.event.addListener(polygon.getPath(), "remove_at", updateData);

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

  • Drawing Manager не хранит данные между перезагрузками страницы
  • координаты всегда представлены в системе WGS84
  • сложные полигоны с самопересечениями не всегда корректно обрабатываются визуально
  • производительность падает при большом количестве overlay на карте
  • режим рисования активен только для одного типа объекта одновременно

Комбинирование с внешними слоями

Drawing Manager может использоваться вместе с:

  • Heatmap Layer
  • KML Layer
  • Tile Overlays
  • пользовательскими WebGL слоями

При этом порядок отрисовки влияет на взаимодействие с пользовательскими объектами.

map.overlayMapTypes.push(customTileLayer);

Хранение и восстановление объектов

Для сохранения состояния обычно используется сериализация:

const saved = overlays.map(o => {
  return o.getPath
    ? o.getPath().getArray().map(p => p.toJSON())
    : o.getPosition().toJSON();
});

Восстановление:

const polygon = new google.maps.Polygon({
  paths: savedPolygon,
  map: map,
});

Управление интерфейсом инструментов

Drawing Control может быть полностью отключён:

drawingControl: false

В этом случае режим рисования управляется исключительно программно через setDrawingMode.

Практическая структура применения

В типичных приложениях логика разделяется на три слоя:

  • инициализация карты
  • управление Drawing Manager
  • обработка и сериализация геометрии

Такой подход позволяет использовать Drawing Manager как UI-инструмент поверх геоданных без привязки к бизнес-логике интерфейса.

Оглавление