Polygon для создания многоугольников

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

google.maps.Polygon представляет замкнутую геометрическую фигуру, заданную массивом координат LatLng. Последовательность точек автоматически соединяется линиями, а последняя точка соединяется с первой, формируя замкнутую область.

Ключевая структура:

const polygon = new google.maps.Polygon({
  paths: coordinates,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35
});

polygon.setMap(map);

Основной параметр — paths, который определяет геометрию фигуры.

Определение координат (paths)

Многоугольник задаётся массивом объектов LatLng или литералов:

const triangleCoords = [
  { lat: 55.75, lng: 37.61 },
  { lat: 55.76, lng: 37.62 },
  { lat: 55.74, lng: 37.63 }
];

Также можно использовать экземпляры google.maps.LatLng:

const triangleCoords = [
  new google.maps.LatLng(55.75, 37.61),
  new google.maps.LatLng(55.76, 37.62),
  new google.maps.LatLng(55.74, 37.63)
];

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

Добавление полигона на карту

Полигон не отображается сам по себе — его необходимо привязать к объекту карты:

const polygon = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#0000FF",
  strokeOpacity: 1,
  strokeWeight: 3,
  fillColor: "#0000FF",
  fillOpacity: 0.2
});

polygon.setMap(map);

Метод setMap(map) добавляет объект на карту, а setMap(null) удаляет его.

Настройка стиля полигона

Polygon поддерживает гибкую стилизацию границ и заливки.

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

  • strokeColor — цвет границы
  • strokeOpacity — прозрачность границы
  • strokeWeight — толщина линии
  • fillColor — цвет заливки
  • fillOpacity — прозрачность заливки

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

const polygon = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#2E7D32",
  strokeOpacity: 0.9,
  strokeWeight: 4,
  fillColor: "#66BB6A",
  fillOpacity: 0.3
});

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

polygon.setOptions({
  fillColor: "#FF9800",
  strokeWeight: 6
});

Работа с несколькими контурами (holes)

Polygon поддерживает внутренние вырезы — отверстия в фигуре. Это реализуется через массив массивов координат.

const outer = [
  { lat: 55.80, lng: 37.50 },
  { lat: 55.80, lng: 37.70 },
  { lat: 55.70, lng: 37.70 },
  { lat: 55.70, lng: 37.50 }
];

const hole = [
  { lat: 55.78, lng: 37.55 },
  { lat: 55.78, lng: 37.65 },
  { lat: 55.72, lng: 37.65 },
  { lat: 55.72, lng: 37.55 }
];

const polygon = new google.maps.Polygon({
  paths: [outer, hole],
  strokeColor: "#000",
  fillColor: "#2196F3",
  fillOpacity: 0.4
});

Первый массив — внешний контур, последующие — внутренние вырезы.

Геодезические полигоны

При работе с большими территориями важно учитывать кривизну Земли. Параметр geodesic управляет типом линий:

const polygon = new google.maps.Polygon({
  paths: triangleCoords,
  geodesic: true
});
  • true — линии следуют геодезической кривой
  • false — линии рисуются как прямые на проекции карты

Геодезический режим полезен для больших расстояний и точных измерений.

Получение и изменение путей

Polygon использует структуру MVCArray, которая позволяет динамически изменять геометрию.

Получение путей:

const paths = polygon.getPaths();

Изменение точки:

const path = paths.getAt(0);
path.setAt(1, { lat: 55.77, lng: 37.66 });

Добавление новой вершины:

path.push({ lat: 55.79, lng: 37.68 });

Полная замена координат:

polygon.setPaths(newCoordinates);

События Polygon

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

Клик по полигону:

polygon.addListener("click", (event) => {
  console.log(event.latLng);
});

Наведение курсора:

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

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

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

polygon.setEditable(true);
polygon.setDraggable(true);

Редактируемые полигоны

Режим редактирования позволяет пользователю изменять форму прямо на карте.

const polygon = new google.maps.Polygon({
  paths: triangleCoords,
  editable: true,
  draggable: false
});

При включённом editable:

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

Проверка попадания точки внутрь полигона

Частая задача — определить, находится ли координата внутри области.

Базовая реализация использует алгоритм ray casting:

function isPointInPolygon(point, polygonPath) {
  let x = point.lat, y = point.lng;
  let inside = false;

  for (let i = 0, j = polygonPath.length - 1; i < polygonPath.length; j = i++) {
    const xi = polygonPath[i].lat, yi = polygonPath[i].lng;
    const xj = polygonPath[j].lat, yj = polygonPath[j].lng;

    const intersect = ((yi > y) !== (yj > y)) &&
      (x < (xj - xi) * (y - yi) / (yj - yi) + xi);

    if (intersect) inside = !inside;
  }

  return inside;
}

Для сложных случаев используется google.maps.geometry.poly.containsLocation.

Работа с библиотекой geometry

Дополнительная функциональность доступна через geometry библиотеку:

const result = google.maps.geometry.poly.containsLocation(
  new google.maps.LatLng(55.75, 37.61),
  polygon
);

Также доступны:

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

Вычисление площади полигона

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

Результат возвращается в квадратных метрах.

Оптимизация производительности

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

Рекомендации:

  • уменьшать количество точек (simplification)
  • избегать частых вызовов setOptions
  • использовать setMap(null) для скрытия вместо удаления
  • группировать обновления через MVCArray

Сравнение Polygon и Polyline

  • Polyline — открытая линия без заливки
  • Polygon — замкнутая область с возможной заливкой

Polygon автоматически замыкает контур, Polyline — нет.

Использование в геозонах и аналитике

Polygon часто применяется для:

  • зон доставки
  • территорий филиалов
  • пользовательских геозон
  • тепловых карт границ
  • анализа пространственных данных

В связке с событиями API можно реализовать интерактивные карты мониторинга.

Динамическое обновление формы

Polygon можно обновлять в реальном времени:

setInterval(() => {
  const path = polygon.getPath();
  path.push({ lat: 55.7 + Math.random() * 0.01, lng: 37.6 + Math.random() * 0.01 });
}, 2000);

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

Взаимодействие с другими объектами карты

Polygon может сочетаться с:

  • Markers — для обозначения вершин
  • InfoWindow — для информации об области
  • Circles — для радиусных зон
  • GroundOverlay — для наложения изображений

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

const infoWindow = new google.maps.InfoWindow({
  content: "Область выделена"
});

polygon.addListener("click", (e) => {
  infoWindow.setPosition(e.latLng);
  infoWindow.open(map);
});
Оглавление