Класс Point

В Leaflet координатная модель делится на несколько уровней представления: географические координаты (широта и долгота), проекционные координаты карты и экранные пиксельные координаты. Класс точки представляет именно последний уровень — двухмерное положение в пикселях относительно контейнера карты или слоя.

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

Представление пиксельной геометрии

Экземпляр точки описывает положение в двумерной декартовой системе координат:

  • x — горизонтальная ось (в пикселях)
  • y — вертикальная ось (в пикселях)

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

Основная особенность модели — независимость от масштаба карты. При изменении zoom значения точек пересчитываются, но сама структура остаётся неизменной.

Создание экземпляра

Создание выполняется через фабричную функцию:

L.point(x, y, round?)

Параметры:

  • x — координата по оси X
  • y — координата по оси Y
  • round — логическое значение, определяющее необходимость округления значений до целых пикселей

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

Примеры:

const p1 = L.point(100, 200);

const p2 = L.point(150.7, 300.2, true); // округлённые координаты

Базовые операции над точками

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

Сложение

point.add(otherPoint)

Возвращает новую точку, являющуюся суммой координат:

  • x = x₁ + x₂
  • y = y₁ + y₂
const a = L.point(10, 20);
const b = L.point(5, 7);

const result = a.add(b); // (15, 27)

Вычитание

point.subtract(otherPoint)

Вычисляет разницу координат:

  • x = x₁ - x₂
  • y = y₁ - y₂

Используется для вычисления смещений между позициями.

Масштабирование

point.multiplyBy(number)

Умножает координаты на скаляр:

  • x = x * k
  • y = y * k

Применяется при изменении масштаба отображения.

const p = L.point(10, 20);
const scaled = p.multiplyBy(2); // (20, 40)
point.divideBy(number)

Делит координаты на число:

  • x = x / k
  • y = y / k

Используется при нормализации значений или обратных преобразованиях масштаба.

Метрика расстояния

point.distanceTo(otherPoint)

Возвращает евклидово расстояние между двумя точками:

[ ]

Применяется при обработке жестов, вычислении близости элементов и детекции взаимодействий.

const a = L.point(0, 0);
const b = L.point(3, 4);

a.distanceTo(b); // 5

Сравнение и идентичность

point.equals(otherPoint)

Проверяет строгое совпадение координат:

  • true — если x и y равны
  • false — если хотя бы одна координата отличается

Используется для кэширования и оптимизации перерисовок.

Клонирование

point.clone()

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

const original = L.point(10, 20);
const copy = original.clone();

Округление координат

Класс поддерживает три основных метода приведения значений к целым пикселям:

floor

point.floor()

Округление вниз.

ceil

point.ceil()

Округление вверх.

round

point.round()

Округление до ближайшего целого значения.

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

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

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

Типовые сценарии применения:

  • вычисление положения тайлов в слое сетки
  • смещение центра карты при панорамировании
  • позиционирование всплывающих окон и маркеров
  • обработка событий click, mousemove, где координаты передаются в виде точек
  • преобразование LatLng → Point через внутренние проекции

Роль в обработке событий

При взаимодействии с картой события мыши возвращают координаты в пикселях относительно контейнера. Эти значения инкапсулируются в точку и позволяют:

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

Связь с системой преобразований Leaflet

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

географические координаты → проекция → пиксельная точка → экранное положение

Любая анимация карты фактически представляет собой перерасчёт множества точек с последующим смещением DOM-структуры или canvas-слоёв.

Особенности поведения и производительности

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

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

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

Оглавление