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

Работа с границами (bounds) в Leaflet является ключевым аспектом при построении интерактивных карт: от автоматического масштабирования до ограничения области перемещения и вычисления видимых объектов. Границы в Leaflet представлены объектом LatLngBounds, который описывает прямоугольную область на карте по координатам юго-западной и северо-восточной точек.

В основе всех операций лежит класс LatLngBounds, представляющий прямоугольник в географических координатах.

Основная структура:

  • SouthWest (юго-западная точка) — минимальные широта и долгота
  • NorthEast (северо-восточная точка) — максимальные широта и долгота

Создание границ:

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

Также допустим массив координат:

const bounds = L.latLngBounds([
  [55.70, 37.50],
  [55.80, 37.70]
]);

Получение границ карты

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

map.getBounds()

Метод возвращает объект LatLngBounds, соответствующий текущей области отображения:

const mapBounds = map.getBounds();

Особенности:

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

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

map.on('moveend', () => {
  const bounds = map.getBounds();
  console.log(bounds.getSouthWest(), bounds.getNorthEast());
});

Вычисление границ для слоёв

layer.getBounds()

Многие векторные слои имеют метод получения собственных границ.

Применимо к:

  • Polyline
  • Polygon
  • Rectangle
  • Circle (через аппроксимацию)
  • GeoJSON слои
const polygon = L.polygon([
  [55.70, 37.50],
  [55.75, 37.60],
  [55.80, 37.55]
]);

const bounds = polygon.getBounds();

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

FeatureGroup.getBounds()

Группы объектов могут агрегировать границы всех вложенных элементов:

const group = L.featureGroup([marker1, polygon, polyline]);

const bounds = group.getBounds();

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

Автоматическое масштабирование по границам

map.fitBounds()

Метод подгоняет масштаб и центр карты под заданные границы:

map.fitBounds(bounds);

Расширенные параметры:

map.fitBounds(bounds, {
  padding: [20, 20],
  maxZoom: 15,
  animate: true
});

Ключевые параметры:

  • padding — отступы от краёв карты
  • maxZoom — ограничение максимального приближения
  • animate — анимация перехода

Пример с группой объектов:

const group = L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(group.getBounds());

Расширение границ

bounds.extend()

Позволяет динамически увеличивать область:

const bounds = L.latLngBounds();

bounds.extend([55.70, 37.50]);
bounds.extend([55.80, 37.70]);
bounds.extend([55.75, 37.65]);

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

Практическое применение:

  • накопление точек
  • построение bounds по данным API
  • динамическое обновление области видимости

Проверка попадания в границы

bounds.contains()

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

const inside = bounds.contains([55.75, 37.60]);

Возвращает:

  • true — точка внутри
  • false — вне области

Применение:

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

Пересечение границ

bounds.intersects()

Проверяет пересечение двух областей:

const result = bounds1.intersects(bounds2);

Используется для:

  • кластеризации объектов
  • проверки пересечения тайлов
  • анализа гео-данных

Получение координат границ

getSouthWest() и getNorthEast()

const sw = bounds.getSouthWest();
const ne = bounds.getNorthEast();

Каждый метод возвращает объект LatLng.

Дополнительно:

console.log(sw.lat, sw.lng);
console.log(ne.lat, ne.lng);

Преобразование границ в строку

toBBoxString()

Метод возвращает строку формата:

west,south,east,north

Пример:

const str = bounds.toBBoxString();

Используется при:

  • запросах к API (WMS, GeoServer)
  • передаче параметров в URL

Ограничение перемещения карты

map.setMaxBounds()

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

map.setMaxBounds(bounds);

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

Дополнительные особенности:

  • можно использовать вместе с minZoom/maxZoom
  • предотвращает «уход» карты в пустые области

Снятие ограничения:

map.setMaxBounds(null);

Расширение границ с отступами

bounds.pad()

Создаёт увеличенную копию границ:

const padded = bounds.pad(0.2);

Параметр:

  • значение от 0 до 1
  • задаёт процент увеличения

Применение:

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

Проверка валидности границ

bounds.isValid()

if (bounds.isValid()) {
  console.log('Границы корректны');
}

Границы считаются невалидными, если:

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

Использование границ в запросах к серверу

Частый сценарий — получение данных по текущей области карты:

map.on('moveend', () => {
  const b = map.getBounds();

  const params = {
    west: b.getWest(),
    south: b.getSouth(),
    east: b.getEast(),
    north: b.getNorth()
  };

  fetch('/api/objects?' + new URLSearchParams(params));
});

Это позволяет:

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

Объединение нескольких границ

L.latLngBounds([…])

Можно объединять массив точек или bounds:

const b1 = L.latLngBounds([55.7, 37.5], [55.8, 37.6]);
const b2 = L.latLngBounds([55.75, 37.55], [55.85, 37.65]);

const combined = L.latLngBounds([b1, b2]);

Также через extend:

const combined = L.latLngBounds();
combined.extend(b1);
combined.extend(b2);
Оглавление