Заливка и обводка полигонов

Полигоны в Google Maps JavaScript API представляют собой один из ключевых инструментов визуализации областей на карте. Они используются для отображения границ регионов, зон покрытия, территорий обслуживания, геозон (geofences), маршрутов произвольной формы и любых других замкнутых областей. Основой полигона является набор координатных точек, соединяемых последовательно линиями, образующими замкнутый контур.

Полигон в API описывается через объект google.maps.Polygon, который принимает конфигурационный объект с двумя основными компонентами:

  • массив координат paths
  • набор параметров стилизации (fill и stroke)

Каждая координата задаётся через google.maps.LatLng или литерал { lat, lng }.

Массив paths может быть:

  • простым (один контур)
  • составным (массив массивов координат — поддержка «дырок» и сложных форм)

Базовое создание полигона

const polygon = new google.maps.Polygon({
  paths: [
    { lat: 48.8566, lng: 2.3522 },
    { lat: 48.8600, lng: 2.3600 },
    { lat: 48.8530, lng: 2.3700 }
  ],
  map: map
});

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

Заливка полигона (fill)

Заливка определяет внутреннюю область полигона. Она управляется двумя ключевыми свойствами:

  • fillColor — цвет заливки
  • fillOpacity — прозрачность заливки (0.0–1.0)

Цвет заливки

Цвет задаётся в формате HEX, RGB или именованных цветов CSS:

fillColor: "#FF0000"

или

fillColor: "rgba(255, 0, 0, 1)"

Прозрачность заливки

fillOpacity определяет визуальную плотность области:

fillOpacity: 0.35

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

Пример настройки заливки

const polygon = new google.maps.Polygon({
  paths: coordinates,
  fillColor: "#4285F4",
  fillOpacity: 0.4,
  map: map
});

Обводка полигона (stroke)

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

Основные параметры:

  • strokeColor — цвет линии
  • strokeOpacity — прозрачность линии
  • strokeWeight — толщина линии в пикселях

Цвет обводки

strokeColor: "#000000"

Прозрачность обводки

strokeOpacity: 0.8

Толщина линии

strokeWeight: 2

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

Пример настройки обводки

const polygon = new google.maps.Polygon({
  paths: coordinates,
  strokeColor: "#1A73E8",
  strokeOpacity: 1,
  strokeWeight: 3,
  map: map
});

Комбинированная стилизация: fill + stroke

На практике заливка и обводка используются совместно для создания выразительных визуальных слоёв.

const polygon = new google.maps.Polygon({
  paths: coordinates,
  strokeColor: "#0B8043",
  strokeOpacity: 0.9,
  strokeWeight: 2,
  fillColor: "#34A853",
  fillOpacity: 0.25,
  map: map
});

Такая комбинация позволяет:

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

Сложные полигоны и «дыры» (holes)

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

Структура:

const polygon = new google.maps.Polygon({
  paths: [
    outerPath,
    innerPath
  ],
  map: map
});

Где:

  • outerPath — внешний контур
  • innerPath — внутренний контур (исключаемая область)

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

const outerPath = [
  { lat: 50.0, lng: 30.0 },
  { lat: 50.0, lng: 31.0 },
  { lat: 49.0, lng: 31.0 },
  { lat: 49.0, lng: 30.0 }
];

const hole = [
  { lat: 49.7, lng: 30.4 },
  { lat: 49.7, lng: 30.6 },
  { lat: 49.5, lng: 30.6 },
  { lat: 49.5, lng: 30.4 }
];

const polygon = new google.maps.Polygon({
  paths: [outerPath, hole],
  strokeColor: "#000000",
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.3,
  map: map
});

Такая структура используется для:

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

Динамическое изменение стилей

Стили полигона можно изменять после создания через методы setOptions или отдельные сеттеры.

Обновление всей конфигурации

polygon.setOptions({
  fillColor: "#F4B400",
  fillOpacity: 0.5,
  strokeWeight: 4
});

Изменение отдельных параметров

polygon.setOptions({ fillOpacity: 0.1 });
polygon.setOptions({ strokeColor: "#DB4437" });

Динамическое управление используется при:

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

Поведение при взаимодействии

Полигоны могут быть интерактивными, включая обработку событий:

  • click
  • mouseover
  • mouseout
  • rightclick

Пример обработки клика

polygon.addListener("click", (event) => {
  console.log("Координаты клика:", event.latLng);
});

Интерактивность часто комбинируется с изменением fill/stroke для визуального отклика:

polygon.addListener("mouseover", () => {
  polygon.setOptions({
    fillOpacity: 0.6
  });
});

polygon.addListener("mouseout", () => {
  polygon.setOptions({
    fillOpacity: 0.3
  });
});

Оптимизация визуализации fill и stroke

При работе с большим количеством полигонов важны следующие аспекты:

Уменьшение нагрузки

  • ограничение количества вершин
  • упрощение геометрии перед передачей в API

Управление прозрачностью

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

Баланс strokeWeight

  • тонкие линии для глобальных карт
  • утолщённые линии для локального выделения

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

При масштабировании карты полигоны могут менять визуальное восприятие:

  • тонкие stroke могут исчезать на низких зумах
  • сложные контуры могут сглаживаться
  • пересекающиеся области fill могут создавать наложения

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

  • упрощение координатных цепочек
  • корректная сортировка вершин
  • избегание самопересечений

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

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

  • внешний контур должен быть первым элементом массива
  • внутренние контуры следуют после него
  • порядок влияет на корректное отображение «дыр»

Нарушение порядка может привести к некорректной интерпретации заливки и перекрытию областей.

Практическая конфигурация стилизованного полигона

const polygon = new google.maps.Polygon({
  paths: coordinates,
  strokeColor: "#2C3E50",
  strokeOpacity: 0.9,
  strokeWeight: 2,
  fillColor: "#3498DB",
  fillOpacity: 0.25,
  clickable: true,
  editable: false,
  map: map
});

Параметры clickable и editable позволяют управлять взаимодействием:

  • clickable: true — включение событий
  • editable: true — возможность редактирования вершин пользователем

Редактируемые полигоны и влияние на fill/stroke

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

  • положение вершин
  • форму контура
  • внутренние области

Стили при этом остаются активными, но динамически обновляются в зависимости от новой геометрии.

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

Заливка и обводка часто используются для кодирования информации:

  • fillColor — тип зоны (жилая, промышленная, запрещённая)
  • fillOpacity — интенсивность или плотность
  • strokeColor — категория границы
  • strokeWeight — значимость объекта

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

Оглавление