Drawing Library

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

Подключение библиотеки выполняется через параметр libraries=drawing при загрузке Google Maps JavaScript API.

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

Без подключения drawing объект google.maps.drawing.DrawingManager недоступен, а инструменты рисования не инициализируются.

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

Перед созданием DrawingManager требуется базовая инициализация карты через google.maps.Map.

let map;

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

Карта выступает контейнером для всех графических объектов, создаваемых Drawing Library.

DrawingManager как центральный контроллер

DrawingManager управляет инструментами рисования и их состоянием. Он добавляется поверх карты и предоставляет UI-панель выбора режима.

const 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.CIRCLE,
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.POLYLINE,
      google.maps.drawing.OverlayType.RECTANGLE,
    ],
  },
});

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

drawingManager.setMap(map);

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

Marker

Режим создания одиночных точек. Каждый маркер представляет объект google.maps.Marker.

Характерные параметры:

  • позиция
  • возможность перетаскивания
  • кастомная иконка
google.maps.event.addListener(drawingManager, "markercomplete", (marker) => {
  marker.setDraggable(true);
});

Polyline

Используется для построения ломаных линий и маршрутов. Представляет объект google.maps.Polyline.

Основные свойства:

  • массив координат path
  • стиль линии (цвет, прозрачность, толщина)
google.maps.event.addListener(drawingManager, "polylinecomplete", (line) => {
  line.setOptions({
    strokeColor: "#ff0000",
    strokeWeight: 3,
  });
});

Polygon

Применяется для замкнутых областей. Объект google.maps.Polygon.

Особенности:

  • замыкание контура автоматически
  • возможность заливки
  • поддержка сложных геометрий с отверстиями
google.maps.event.addListener(drawingManager, "polygoncomplete", (polygon) => {
  polygon.setOptions({
    fillColor: "#00ff00",
    fillOpacity: 0.3,
    strokeWeight: 2,
  });
});

Circle

Представляет окружность с центром и радиусом.

google.maps.event.addListener(drawingManager, "circlecomplete", (circle) => {
  const radius = circle.getRadius();
  const center = circle.getCenter();
});

Ключевые параметры:

  • центр (LatLng)
  • радиус в метрах
  • стилизация границ и заливки

Rectangle

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

google.maps.event.addListener(drawingManager, "rectanglecomplete", (rect) => {
  const bounds = rect.getBounds();
});

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

drawingMode определяет активный инструмент.

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

Отключение режима:

drawingManager.setDrawingMode(null);

События Drawing Library

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

  • markercomplete
  • polylinecomplete
  • polygoncomplete
  • circlecomplete
  • rectanglecomplete

Общий шаблон обработки:

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

overlaycomplete используется для унифицированной обработки всех объектов.

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

Созданные элементы можно сохранять, изменять или удалять через ссылки на объекты.

const overlays = [];

google.maps.event.addListener(drawingManager, "polygoncomplete", (polygon) => {
  overlays.push(polygon);
});

Удаление:

overlays.forEach((overlay) => overlay.setMap(null));
overlays.length = 0;

Редактирование геометрии

Большинство объектов поддерживает редактирование через editable: true.

polygon.setOptions({
  editable: true,
  draggable: true,
});

Редактирование включает:

  • перетаскивание вершин
  • изменение формы
  • перемещение объекта целиком

Стилизация объектов

Линии

strokeColor: "#0000ff",
strokeOpacity: 0.8,
strokeWeight: 4

Заливка

fillColor: "#ff0000",
fillOpacity: 0.35

Маркеры

icon: {
  url: "marker.png",
  scaledSize: new google.maps.Size(30, 30),
}

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

Поведение DrawingManager контролируется через конфигурацию:

const drawingManager = new google.maps.drawing.DrawingManager({
  drawingControl: true,
  drawingControlOptions: {
    drawingModes: [
      google.maps.drawing.OverlayType.POLYGON,
    ],
  },
  polygonOptions: {
    editable: true,
    fillColor: "#yellow",
  },
});

Глобальные настройки для каждого типа объекта позволяют задавать единый стиль до момента создания.

Работа с координатами

Все геометрические объекты используют тип LatLng.

Извлечение координат полигона:

const path = polygon.getPath();

for (let i = 0; i < path.getLength(); i++) {
  const point = path.getAt(i);
}

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

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

Интерактивные сценарии

Drawing Library часто комбинируется с дополнительной логикой:

  • ограничение количества точек
  • автоматическое замыкание областей
  • проверка пересечений
  • вычисление площади и длины

Пример расчёта площади полигона:

const area = google.maps.geometry.spherical.computeArea(polygon.getPath());

Взаимодействие с Geometry Library

Drawing Library тесно связана с geometry:

&libraries=drawing,geometry

Доступные вычисления:

  • расстояния между точками
  • площадь полигона
  • длина маршрута
  • проверка географических отношений

Отключение DrawingManager

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

drawingManager.setMap(null);

Возврат:

drawingManager.setMap(map);

Обработка сложных сценариев редактирования

При изменении геометрии отслеживаются события внутри путей:

const path = polygon.getPath();

path.addListener("set_at", () => {
  console.log("Точка изменена");
});

path.addListener("insert_at", () => {
  console.log("Точка добавлена");
});

path.addListener("remove_at", () => {
  console.log("Точка удалена");
});

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

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

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

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

Созданные объекты могут накладываться на дополнительные слои:

  • KmlLayer
  • GeoJSON
  • кастомные OverlayView

Интеграция требует синхронизации координатных систем и управления z-index слоёв.

Программное создание объектов без DrawingManager

Drawing Library может использоваться только как вспомогательный UI, тогда как геометрия создаётся вручную:

const polygon = new google.maps.Polygon({
  paths: [
    { lat: 55.75, lng: 37.61 },
    { lat: 55.76, lng: 37.62 },
    { lat: 55.74, lng: 37.63 },
  ],
  map: map,
});

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

Каждый overlay имеет привязку к карте:

overlay.setMap(map);   // отображение
overlay.setMap(null);  // скрытие

Это базовый механизм управления жизненным циклом геометрий.

Практика построения редактора карт

Типовая архитектура включает:

  • DrawingManager для ввода геометрии
  • массив для хранения объектов
  • обработчики событий изменения
  • вычислительный слой (geometry library)
  • слой сериализации (GeoJSON)

Такой подход формирует основу GIS-интерфейсов в веб-приложениях.

Оглавление