Изохроны представляют собой области, ограничивающие точки, достижимые из заданного источника за фиксированное время или при заданной стоимости перемещения (время, расстояние, стоимость). В контексте веб-картографии они используются для оценки доступности объектов инфраструктуры, анализа транспортной связанности и построения сервисов логистики.
В системах интерактивных карт изохроны чаще всего реализуются как полигоны, полученные из сетевого графа дорог, где ребра взвешены временем проезда. Результат — не геометрическая абстракция, а вычисленный контур достижимости.
Mapbox GL JS не выполняет вычисление изохрон самостоятельно, но выступает ключевым слоем визуализации и интерактивного представления результатов пространственных запросов.
Типовая архитектура построения изохрон включает:
Mapbox GL JS обеспечивает:
Основной источник готовых изохрон — Mapbox Isochrone API. Он принимает координаты точки и возвращает полигоны достижимости.
Параметры запроса обычно включают:
Результат — GeoJSON FeatureCollection с полигонами.
Помимо готового API применяются:
В клиентской части Mapbox GL JS работает одинаково с любым источником, если результат приведён к GeoJSON.
Перед отображением изохрон требуется инициализация карты и подключение источника данных.
mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [69.6, 42.3],
zoom: 10
});После загрузки карты добавляется источник для изохрон:
map.on('load', () => {
map.addSource('isochrone', {
type: 'geojson',
data: null
});
});Запрос к сервису строится на основе координат точки:
async function getIsochrone(lon, lat) {
const url = `https://api.mapbox.com/isochrone/v1/mapbox/driving/` +
`${lon},${lat}?contours_minutes=5,10,15&polygons=true&access_token=YOUR_MAPBOX_TOKEN`;
const response = await fetch(url);
return await response.json();
}Результат содержит несколько полигонов, каждый из которых соответствует определённому времени доступности.
После получения GeoJSON данные передаются в источник карты:
map.getSource('isochrone').setData(geojson);Далее создаётся слой заливки:
map.addLayer({
id: 'isochrone-fill',
type: 'fill',
source: 'isochrone',
paint: {
'fill-color': [
'interpolate',
['linear'],
['get', 'contour'],
5, '#2DC4B2',
10, '#3BB3C3',
15, '#669EC4'
],
'fill-opacity': 0.5
}
});И слой границ:
map.addLayer({
id: 'isochrone-outline',
type: 'line',
source: 'isochrone',
paint: {
'line-color': '#1B7F7A',
'line-width': 2
}
});Типичный GeoJSON изохрон содержит:
FeatureCollection
Polygon или MultiPolygon
свойства (properties), включающие:
Пример структуры:
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [...]
},
"properties": {
"contour": 10,
"metric": "time"
}
}Эта структура позволяет использовать декларативные стили Mapbox GL JS через выражения.
Изохроны часто зависят от пользовательского ввода: перемещение маркера, выбор режима транспорта, изменение времени.
const marker = new mapboxgl.Marker({ draggable: true })
.setLngLat([69.6, 42.3])
.addTo(map);
marker.on('dragend', async () => {
const lngLat = marker.getLngLat();
const data = await getIsochrone(lngLat.lng, lngLat.lat);
map.getSource('isochrone').setData(data);
});При работе с изохронами важно учитывать визуальную интерпретацию времени доступа.
Используются выражения Mapbox:
'fill-opacity': [
'interpolate',
['linear'],
['get', 'contour'],
5, 0.6,
15, 0.2
]Изохроны редко отображаются изолированно. Они комбинируются с:
Порядок слоёв критичен:
При работе с изохронами в Mapbox GL JS возникают нагрузки, связанные с:
Оптимизационные подходы:
Debounce при перемещении маркера:
function debounce(fn, delay) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), delay);
};
}На сервере применяется simplification (Douglas-Peucker), уменьшающий количество точек.
Изохроны для одинаковых координат и параметров повторно не запрашиваются.
Изохроны в Mapbox GL JS используются в задачах:
Каждый сценарий требует адаптации визуального представления и диапазонов времени.
Разные профили маршрутизации формируют разные формы изохрон:
Различие в геометрии отражает структуру городской среды и транспортной доступности.
При сравнительном анализе строятся наборы изохрон для разных точек:
Mapbox GL JS позволяет отображать их через разные источники и стили:
map.addSource('isochrone-a', { type: 'geojson', data: a });
map.addSource('isochrone-b', { type: 'geojson', data: b });Далее применяется различная цветовая кодировка и прозрачность для анализа пересечений.
Пересечение изохронных полигонов используется для:
Геометрические операции обычно выполняются на сервере (turf.js или PostGIS), после чего результат передаётся в Mapbox GL JS как новый слой.
Изохроны чувствительны к масштабу карты:
Решения:
Интерактивность строится на событиях:
map.on('click', 'isochrone-fill', (e) => {
const properties = e.features[0].properties;
});Изохроны становятся частью аналитических систем:
Mapbox GL JS выполняет роль визуального слоя, тогда как аналитика выполняется вне браузера.
Изохроны с несколькими интервалами времени формируют вложенные полигоны. Их корректная визуализация требует:
Используется стабильная структура данных, где каждый contour является отдельным feature с общим source.