Класс Rectangle

Класс Rectangle в Leaflet представляет собой слой прямоугольной географической области, ограниченной двумя координатами: юго-западной и северо-восточной точками. Внутри библиотеки он является частным случаем полигона и наследует поведение от абстракции Path, что обеспечивает поддержку стилизации, событий и интерактивности.

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

  • юго-западный угол (SouthWest)
  • северо-восточный угол (NorthEast)

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

Ключевая особенность модели заключается в том, что Rectangle не хранит массив вершин, как Polygon, а вычисляет их автоматически на основе границ.

Создание прямоугольника

Основной способ создания — фабричная функция L.rectangle.

const bounds = [
  [55.75, 37.50],
  [55.80, 37.70]
];

const rect = L.rectangle(bounds);
rect.addTo(map);

Альтернативная форма использует явный LatLngBounds:

const bounds = L.latLngBounds(
  L.latLng(55.75, 37.50),
  L.latLng(55.80, 37.70)
);

const rect = L.rectangle(bounds);
rect.addTo(map);

Опции конфигурации

Rectangle принимает те же стилистические параметры, что и Path-объекты:

const rect = L.rectangle(bounds, {
  color: "#3388ff",
  weight: 2,
  opacity: 0.8,
  fillOpacity: 0.2,
  dashArray: "5, 10"
});

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

  • color — цвет обводки
  • weight — толщина линии
  • opacity — прозрачность границы
  • fillColor — цвет заливки
  • fillOpacity — прозрачность заливки
  • dashArray — пунктирный стиль линии

Методы управления границами

setBounds

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

rect.setBounds([
  [55.76, 37.52],
  [55.82, 37.72]
]);

При вызове происходит пересчёт всех вершин и перерисовка слоя.

getBounds

Возвращает текущие границы объекта:

const currentBounds = rect.getBounds();

Результатом является экземпляр LatLngBounds, который можно использовать для масштабирования карты или анализа области.

Взаимодействие с картой

Rectangle поддерживает стандартные события слоя:

rect.on("click", (e) => {
  console.log("Клик по прямоугольнику", e.latlng);
});

rect.on("mouseover", () => {
  rect.setStyle({ fillOpacity: 0.4 });
});

rect.on("mouseout", () => {
  rect.setStyle({ fillOpacity: 0.2 });
});

События наследуются от Interactive layer, что делает возможным полноценное взаимодействие с пользователем.

Наследование и архитектура

Rectangle наследует поведение по цепочке:

  • Layer
  • Interactive layer
  • Path
  • Polygon
  • Rectangle

Это означает, что:

  • доступны методы addTo, remove, removeFrom
  • поддерживается setStyle
  • доступна работа с событиями мыши
  • реализована отрисовка через SVG или Canvas

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

После инициализации стиль можно изменять динамически:

rect.setStyle({
  color: "red",
  weight: 3,
  fillOpacity: 0.5
});

Метод setStyle применяется мгновенно без пересоздания объекта.

Работа с масштабом карты

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

map.fitBounds(rect.getBounds());

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

Географические особенности

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

  • широта ограничена диапазоном [-90, 90]
  • долгота нормализуется в пределах [-180, 180]
  • при пересечении анти-меридиана поведение может отличаться от стандартной евклидовой геометрии

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

Rectangle применяется для:

  • выделения областей на карте
  • визуализации административных границ упрощённой формы
  • отображения результатов геокодинга (bounding box)
  • построения зон анализа данных (heatmap overlays, clustering bounds)
  • пользовательского выделения области поиска

Совместимость с GeoJSON

Rectangle легко конвертируется в GeoJSON-совместимую структуру через полигональную модель:

const geo = rect.toGeoJSON();

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

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

Несмотря на простоту, Rectangle имеет ряд особенностей:

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

Производительность

Rectangle является одним из наиболее лёгких в отрисовке слоёв благодаря:

  • минимальному числу вершин (всегда 4)
  • упрощённой геометрии
  • отсутствию сложных вычислений при рендеринге

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

Поведение при зуме и трансформациях

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

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

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

  • Marker
  • Circle
  • Polygon
  • TileLayer
  • ImageOverlay

При наложении слоёв учитывается порядок z-index, задаваемый через bringToFront и bringToBack.

Оглавление