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

Прямоугольники в Leaflet представляют собой частный случай прямоугольных геометрических объектов на карте, реализуемых через класс L.Rectangle. Внутри библиотеки они являются наследниками слоя Polygon, а их геометрия строго определяется двумя диагонально противоположными точками, которые формируют границы типа LatLngBounds.

В основе прямоугольника лежит объект границ:

const bounds = L.latLngBounds(
  L.latLng(55.75, 37.50),
  L.latLng(55.70, 37.60)
);

Эти границы описывают минимальный прямоугольный регион, охватывающий две координаты. Независимо от порядка точек, Leaflet автоматически нормализует их, вычисляя северо-западный и юго-восточный углы.

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

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

Создание и добавление на карту

Базовая форма инициализации поддерживает несколько вариантов входных данных:

L.rectangle(bounds).addTo(map);

или с явным указанием стиля:

L.rectangle(bounds, {
  color: "#ff7800",
  weight: 2,
  fillOpacity: 0.3
}).addTo(map);

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

Работа с LatLngBounds

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

  • getNorth(), getSouth()
  • getEast(), getWest()
  • getNorthWest(), getSouthEast()

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

rectangle.setBounds(
  L.latLngBounds(
    [55.8, 37.4],
    [55.6, 37.7]
  )
);

Визуальные параметры и стилизация

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

const rectangle = L.rectangle(bounds, {
  stroke: true,
  color: "#3388ff",
  weight: 3,
  opacity: 1,
  fill: true,
  fillColor: "#3388ff",
  fillOpacity: 0.2,
  dashArray: "5, 10",
  lineJoin: "round"
});

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

Интерактивность

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

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

Поддерживаются события:

  • click
  • mouseover
  • mouseout
  • mousedown
  • mouseup
  • contextmenu

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

rectangle.bindPopup("Выбранная область");

Привязка к карте и управление слоем

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

rectangle.addTo(map);
rectangle.remove();

Проверка наличия на карте:

map.hasLayer(rectangle);

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

Изменение размеров и пересчёт границ

Прямоугольник не имеет встроенного механизма “перетаскивания углов” без дополнительных плагинов, но его можно полностью пересоздавать или обновлять через новые границы:

const newBounds = rectangle.getBounds().pad(0.1);
rectangle.setBounds(newBounds);

Метод pad() расширяет границы на заданный коэффициент, создавая визуальный эффект увеличения области.

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

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

map.fitBounds(rectangle.getBounds());

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

Проверка пересечений и принадлежности

Хотя прямоугольник не содержит встроенной логики геометрических пересечений уровня GIS, базовые операции выполняются через LatLngBounds:

const bounds1 = rectangle.getBounds();
const bounds2 = L.latLngBounds([55.72, 37.55], [55.68, 37.65]);

const intersects =
  bounds1.overlaps(bounds2);

Также доступна проверка включения точки:

bounds1.contains([55.74, 37.58]);

Работа с GeoJSON

Прямоугольники могут быть конвертированы в GeoJSON-совместимый формат через полигоны:

const geojson = rectangle.toGeoJSON();

Результирующая структура будет представлять собой Polygon с четырьмя координатами, замыкающими контур.

Обратное преобразование:

L.geoJSON(geojson).addTo(map);

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

В базовой версии библиотеки редактирование не включено, но через плагины (например, leaflet.pm или Leaflet.draw) прямоугольники становятся интерактивными:

  • изменение углов
  • перемещение всей фигуры
  • сохранение новых bounds

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

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

Прямоугольники являются лёгкими в рендеринге объектами, поскольку состоят из фиксированного числа точек (обычно 5, включая замыкание контура). Это делает их предпочтительными для:

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

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

  • использование pane для управления слоями
  • отключение интерактивности (interactive: false)
  • группировку через LayerGroup

Комбинирование с другими слоями

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

const group = L.layerGroup([
  rectangle,
  L.marker([55.72, 37.58])
]).addTo(map);

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

Анимация и динамическое обновление

Leaflet не предоставляет встроенной анимации прямоугольников, но их можно обновлять через изменение bounds в таймере:

setInterval(() => {
  const b = rectangle.getBounds();
  rectangle.setBounds(b.pad(0.01));
}, 1000);

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

Оглавление