Rectangle для прямоугольников

Класс прямоугольника (google.maps.Rectangle) в Google Maps Platform используется для отображения прямоугольных областей на карте, заданных географическими границами. Прямоугольник является разновидностью оверлея и строится на основе объекта LatLngBounds, который определяет юго-западную и северо-восточную точки области.

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

Геометрическая модель Rectangle

Прямоугольник задаётся через границы:

  • юго-западная точка (south-west)
  • северо-восточная точка (north-east)

Эти две точки формируют объект:

const bounds = {
  north: 55.75,
  south: 55.70,
  east: 37.70,
  west: 37.60
};

Внутренне API преобразует эти значения в объект LatLngBounds, который является базовой единицей пространственных ограничений.

Создание Rectangle

Прямоугольник создаётся через конструктор google.maps.Rectangle, принимающий объект настроек.

const rectangle = new google.maps.Rectangle({
  bounds: {
    north: 55.75,
    south: 55.70,
    east: 37.70,
    west: 37.60
  },
  editable: false,
  draggable: false,
  map: map
});

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

  • bounds — географические границы прямоугольника
  • map — карта, на которую добавляется объект
  • editable — возможность изменения границ пользователем
  • draggable — возможность перемещения прямоугольника
  • strokeColor — цвет контура
  • strokeOpacity — прозрачность контура
  • strokeWeight — толщина линии
  • fillColor — цвет заливки
  • fillOpacity — прозрачность заливки
  • zIndex — порядок отображения слоёв

Привязка к карте

Прямоугольник отображается на карте только при привязке к объекту Map.

rectangle.setMap(map);

Удаление с карты выполняется установкой null:

rectangle.setMap(null);

Этот механизм позволяет динамически управлять отображением оверлеев без пересоздания объекта.

Изменение границ Rectangle

Границы могут быть изменены после создания объекта с помощью метода setBounds.

rectangle.setBounds({
  north: 55.80,
  south: 55.65,
  east: 37.80,
  west: 37.55
});

Получение текущих границ:

const currentBounds = rectangle.getBounds();

Возвращаемое значение — объект LatLngBounds, содержащий методы:

  • getNorthEast()
  • getSouthWest()
  • toJSON()

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

При включении editable: true активируются интерактивные маркеры, позволяющие изменять размеры фигуры.

const rectangle = new google.maps.Rectangle({
  bounds: {
    north: 55.75,
    south: 55.70,
    east: 37.70,
    west: 37.60
  },
  editable: true,
  map: map
});

В этом режиме пользователь может:

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

Перетаскиваемый Rectangle

Свойство draggable включает возможность перемещения всей фигуры как единого объекта.

const rectangle = new google.maps.Rectangle({
  bounds: {
    north: 55.75,
    south: 55.70,
    east: 37.70,
    west: 37.60
  },
  draggable: true,
  map: map
});

При перемещении сохраняются пропорции и размеры фигуры, изменяется только положение.

Стилизация Rectangle

Контур

strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2

Заливка

fillColor: "#FF0000",
fillOpacity: 0.2

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

const rectangle = new google.maps.Rectangle({
  bounds: {
    north: 55.75,
    south: 55.70,
    east: 37.70,
    west: 37.60
  },
  strokeColor: "#1E88E5",
  strokeOpacity: 0.9,
  strokeWeight: 3,
  fillColor: "#90CAF9",
  fillOpacity: 0.35,
  map: map
});

События Rectangle

Rectangle поддерживает стандартные события изменения состояния.

bounds_changed

Срабатывает при изменении границ:

rectangle.addListener("bounds_changed", () => {
  const bounds = rectangle.getBounds();
});

dragstart и dragend

Используются при включённом draggable.

rectangle.addListener("dragstart", () => {
  console.log("Начало перемещения");
});

rectangle.addListener("dragend", () => {
  console.log("Окончание перемещения");
});

click

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

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

Работа с LatLngBounds

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

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

const bounds = rectangle.getBounds();

const point = new google.maps.LatLng(55.72, 37.65);

const contains = bounds.contains(point);

Центр области

const center = bounds.getCenter();

Изменение параметров после создания

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

rectangle.setOptions({
  fillOpacity: 0.5,
  strokeWeight: 4
});

Этот подход предпочтителен при интерактивных приложениях, где стили зависят от состояния интерфейса.

Типичные сценарии применения Rectangle

Выделение зоны интереса

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

  • области доставки
  • геозоны мониторинга
  • административные границы

Геоаналитика

Rectangle часто применяется совместно с пространственными запросами:

  • фильтрация объектов внутри границ
  • ограничение области поиска
  • анализ плотности объектов

Визуализация данных

Прямоугольники используются для:

  • тепловых карт (как вспомогательные области)
  • кластеризации данных по регионам
  • визуального сравнения зон

Управление видимостью и жизненным циклом

Показ и скрытие

rectangle.setMap(map);   // показать
rectangle.setMap(null);  // скрыть

Проверка привязки

const isVisible = rectangle.getMap() !== null;

Взаимодействие с другими оверлеями

Rectangle может комбинироваться с:

  • маркерами (Marker)
  • многоугольниками (Polygon)
  • кругами (Circle)
  • информационными окнами (InfoWindow)

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

Ограничения модели Rectangle

  • форма всегда строго ортогональна (без поворота)
  • невозможность произвольного количества вершин
  • привязка к меркаторной проекции карты
  • возможные искажения на высоких широтах

Эти ограничения обусловлены моделью Web Mercator, используемой в большинстве картографических систем Google Maps Platform.

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

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

  • минимизировать число активных оверлеев
  • использовать setMap(null) вместо удаления объектов
  • переиспользовать экземпляры Rectangle
  • отключать editable и draggable, если они не требуются

Особенно важно это при динамическом обновлении данных в реальном времени.

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

const rectangle = new google.maps.Rectangle({
  bounds: {
    north: 55.75,
    south: 55.70,
    east: 37.70,
    west: 37.60
  },
  editable: true,
  draggable: true,
  strokeColor: "#0000FF",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#0000FF",
  fillOpacity: 0.2,
  map: map
});

rectangle.addListener("bounds_changed", () => {
  const b = rectangle.getBounds();
  console.log("N:", b.getNorthEast().lat());
});
Оглавление