Along и destination

Геометрические операции вдоль маршрутов в Mapbox GL JS часто строятся вокруг работы с линиями (LineString) и вычисления точек на заданном расстоянии. В экосистеме Mapbox GL JS эти задачи обычно решаются через вспомогательную библиотеку Turf.js, где ключевую роль играют функции вдоль линии и вычисление целевой точки по направлению и дистанции.

Работа с маршрутами в таком подходе сводится к двум базовым операциям: получение точки, находящейся на определённой длине вдоль линии, и построение новой точки по направлению (bearing) и расстоянию от исходной позиции. Эти операции формируют основу для анимации движения по маршруту, симуляции навигации и анализа геопространственных траекторий.

Использование функции вдоль линии (along) в геопространственных расчётах

Функция вдоль линии применяется для получения координат точки, находящейся на заданной дистанции от начала линии. В Turf.js это реализуется через turf.along.

Алгоритмическая модель основана на последовательном суммировании длин сегментов LineString до достижения нужного расстояния. Если расстояние попадает внутрь сегмента, вычисляется интерполяция между двумя вершинами.

Базовая структура GeoJSON линии:

const route = {
  type: "Feature",
  geometry: {
    type: "LineString",
    coordinates: [
      [37.6156, 55.7522],
      [37.6250, 55.7550],
      [37.6400, 55.7600]
    ]
  }
};

Получение точки на 2 километра вдоль маршрута:

import along from "@turf/along";

const pointOnRoute = along(route, 2, { units: "kilometers" });

Результатом является GeoJSON Feature типа Point, содержащий координаты вычисленной позиции.

Интеграция along с Mapbox GL JS

Mapbox GL JS использует GeoJSON-источники для динамического отображения данных. Точка, полученная через along, может быть добавлена в виде отдельного слоя.

map.addSource("moving-point", {
  type: "geojson",
  data: pointOnRoute
});

map.addLayer({
  id: "moving-point-layer",
  type: "circle",
  source: "moving-point",
  paint: {
    "circle-radius": 6,
    "circle-color": "
  }
});

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

function updatePoint(distance) {
  const updatedPoint = along(route, distance, { units: "kilometers" });

  map.getSource("moving-point").setData(updatedPoint);
}

Такой подход формирует основу анимации перемещения по маршруту.

Непрерывное движение вдоль линии

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

let distance = 0;
const speed = 0.05; // километров за кадр

function animate() {
  distance += speed;

  const point = along(route, distance, { units: "kilometers" });
  map.getSource("moving-point").setData(point);

  requestAnimationFrame(animate);
}

animate();

При достижении конца линии необходимо учитывать общую длину маршрута, вычисляемую через turf.length.

Функция destination и вычисление точки по направлению

Операция destination используется для получения координаты, смещённой от исходной точки на заданное расстояние по определённому азимуту. В Turf.js это реализуется через turf.destination.

Математическая модель основана на сферической тригонометрии, где учитывается кривизна Земли.

Исходная точка:

const origin = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [37.6156, 55.7522]
  }
};

Вычисление точки на расстоянии 5 километров под углом 45 градусов:

import destination from "@turf/destination";

const nextPoint = destination(origin, 5, 45, { units: "kilometers" });

Результатом является новая точка, смещённая относительно исходной позиции.

Применение destination в построении траекторий

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

Пример построения ломаной траектории:

let current = origin;
const path = [current];

for (let i = 0; i < 10; i++) {
  current = destination(current, 1, 90 + i * 10, { units: "kilometers" });
  path.push(current);
}

Полученная последовательность может быть преобразована в LineString:

const line = {
  type: "Feature",
  geometry: {
    type: "LineString",
    coordinates: path.map(p => p.geometry.coordinates)
  }
};

Сравнение along и destination в контексте маршрутов

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

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

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

В задачах Mapbox GL JS эти функции часто комбинируются: destination формирует траекторию, along используется для навигации по ней.

Анимация движения с комбинированным использованием функций

При моделировании навигации возможна схема, где маршрут генерируется через destination, а движение по нему осуществляется через along.

import along from "@turf/along";
import destination from "@turf/destination";

let origin = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [37.6156, 55.7522]
  }
};

const pathCoords = [origin.geometry.coordinates];

let current = origin;

for (let i = 0; i < 20; i++) {
  current = destination(current, 0.5, 60, { units: "kilometers" });
  pathCoords.push(current.geometry.coordinates);
}

const route = {
  type: "Feature",
  geometry: {
    type: "LineString",
    coordinates: pathCoords
  }
};

let d = 0;
const total = turf.length(route, { units: "kilometers" });

function step() {
  d += 0.02;

  if (d > total) d = total;

  const p = along(route, d, { units: "kilometers" });
  map.getSource("moving-point").setData(p);

  requestAnimationFrame(step);
}

step();

Работа с длиной маршрута и нормализация расстояний

Для корректной работы along требуется знание общей длины линии. Она вычисляется через turf.length, возвращающую значение в заданных единицах измерения.

Нормализация позволяет преобразовать прогресс в диапазон от 0 до 1:

const progress = distance / totalLength;

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

Особенности работы на сфере и точность вычислений

Все расчёты выполняются с учётом сферической модели Земли. Это влияет на результат destination и along при больших расстояниях. Локально (в пределах города) погрешность минимальна, но при масштабах сотен километров различия становятся заметными.

Mapbox GL JS, работая в Web Mercator, визуализирует результаты после геодезических вычислений, что обеспечивает согласованность между математической моделью и отображением.

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

В навигационных системах along применяется для отображения прогресса маршрута, а destination — для предсказания следующей позиции при заданной скорости и курсе.

Типичный сценарий включает:

  • вычисление маршрута (LineString)
  • определение общей длины
  • инкрементальное движение вдоль линии через along
  • обновление позиции объекта на карте

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

Оглавление