Недавно я вспомнил стартап, над которым работал в 2024 году. Мы делали что‑то вроде Pokemon GO на свой лад: пользователь должен был ходить по городу и собирать сундучки, из которых можно было получить скидку, промокод или специальное предложение от компании‑партнёра.
В какой‑то момент проект свернулся, а я ушёл в вольное плавание. Но из него у меня остался интересный и достаточно уникальный опыт — в ходе разработки пришлось довольно глубоко разобраться в том, как вообще работают карты в браузере.
Например, как по широте и долготе определить, какую именно часть карты нужно показать пользователю? Откуда берутся отдельные изображения карты и как они соединяются между собой? Как определить точное положение пользователя уже внутри полученного изображения?
В этой статье я хочу разобрать базовую механику web‑карт: пройти путь от обычной пары координат до конкретного тайла карты и позиции пользователя внутри него. Без готовых картографических библиотек — только координаты, немного математики и тайлы OpenStreetMap.
Что человек вообще видит на web‑карте?
В целом всю планету можно представить как одно изображение определённой ширины и высоты. Для масштаба, на котором мы видим только океаны и материки, особых проблем не возникает — такое изображение может быть относительно небольшим. Изображение без проблем встраивается в браузер.
Но при необходимости более детального масштаба возникает проблема — невозможно детально показать улицы и дома, сохранив при этом итоговое изображение в рамках разумного размера. Схема с одним изображением перестаёт быть жизнеспособной: карта размером в несколько десятков или даже сотен гигабайт будет слишком долго загружаться.
Для решения этой проблемы карту со всеми улицами, домами и другими объектами разделяют на небольшие квадратные изображения размером 256 × 256 пикселей (обычно). Такие кусочки называются тайлами карты. Серверу достаточно отдать только те фрагменты карты, которые нужны пользователю в данный момент, а их объединением в цельное изображение занимается уже клиентское приложение. Каждый тайл можно получить по отдельному URL, пример такого URL:
Из каких частей состоит адрес тайла?
Возьмем URL тайла openstreetmap (бесплатный сервис предоставления тайлов карты планеты): https://tile.openstreetmap.org/13/5765/2593.png
Часть с доменом и разрешением изображение не особо интересны — гораздо интереснее 3 числа.
13 — это показатель масштаба. Он определяет, каким количеством тайлов представлен мир по каждой из осей. При этом ширина и высота представления мира в тайлах одинаковы. Для получения количества тайлов по оси нужно воспользоваться формулой:
где N — количество тайлов по оси, а Z — тот самый показатель масштаба.
зная, что по обеим осям количество тайлов совпадает, можно узнать общее число тайлов, на которые разбит мир — достаточно умножить N на себя же (вспоминаем формулу площади квадрата).
давайте посчитаем значение общего количества тайлов для нескольких масштабов. Начнем с масштаба, равного 0.
Соответственно, при таком масштабе весь мир умещается в один тайл. Учитывая, что стандартное разрешение тайла 256 на 256 — единственное, что можно увидеть при такой детализации это континенты и океаны.
Перейдем к машстабу 13, получаем количество тайлов по каждой оси: 2 в степени 13 = 8192
Если представлять мир в более чем 60 миллионах тайлах 256 на 256 пикселей — это достаточно, чтобы в тайлы поместились уже дома и улицы.
Перейдем в числу 5765 — это номер тайла по оси x. В то время как 2593 — это номер тайла по оси y.
При этом тайл с координатами (0, 0) — это левый вехний тайл условного гигантского изображения мира.
Связь X тайла и долготы
Вспомним, что долгота — это значение в пределах от −180° до 180°. Нулевая долгота соответствует Гринвичскому меридиану, отрицательные значения находятся к западу от него, а положительные — к востоку.
Возьмем масштаб тайловой системы, равный 1 — тогда количество тайлов по ширине равно 
Как видно, тайл со значением x = 0 граничит с долготой −180°. А тайл со значением = кол‑во тайлов — 1, граничит с долготой 180°.
Для того, чтобы получить значение тайла по соответствующей долготе для начала долготу нужно перевести из диапазона [−180°, 180°] в более привычные значения [0,1].
Превратим начальную точку диапазона в 0. То есть для значения долготы −180° мы должны получить значением 0 в новом диапазоне. Несложно догадаться, что для этого достаточно прибавить 180.
Теперь самая правая граница смещается до 360.
Для того, чтобы сузить диапазон до [0,1] достаточно разделить значение диапазона [0,360] на 360. Итоговая формула получения значения долготы в диапазоне [0,1] выглядит так:
longitude — изначальная долгота искомой точки.
Теперь нам нужно «растянуть» полученное значение в диапазоне [0,1] до диапазона [0, количество тайлов по x], для этого достаточно просто умножить полученное значение на количество тайлов. В javascript это выглядит так:
const xFloat = ((longitude + 180) / 360) * 2 ** zoom;Так как долгота может быть представлена числом с десятичной частью, для получения номера тайла (учитывая, что номер тайла — число целое), необходимо отбросить дробную часть, иными словами округлить в меньшую сторону через Math.floor. Итоговый код для получения номера тайла через долготу выглядит так:
const tileCount = 2 ** zoom
const xFloat = ((longitude + 180) / 360) * tileCount;
const tileX = Math.floor(xFloat);Связь Y тайла и широты
Казалось бы, для координаты Y можно проследовать тем же путём, что и для X. Однако здесь всё немного сложнее: карта представляет собой проекцию поверхности Земли на плоскость, поэтому связь между широтой и координатой Y уже не является линейной.
Для отображения тайлов OpenStreetMap (тайлы которого мы и берем) используется проекция Web Mercator. Именно она определяет, каким образом значение широты преобразуется в координату Y на карте.
Web Mercator — достаточно объёмная тема, поэтому подробно рассматривать её в рамках этой статьи мы не будем. Если вам интересно разобраться в ней глубже, советую прочитать статью другого автора на Хабре — в ней достаточно подробно разобраны устройство Web Mercator, используемые формулы и связанные с этой системой координат особенности.
Нам достаточно знать, что позиция по оси Y точки на карте по ее широте можно получить таким образом:
const n = 2 ** zoom;
const yFloat = ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) * n;Для получения Y тайла необходимо округлить позицию по оси Y в меньшую сторону (помним, что тайлы нумеруются целыми числами, а значит дробную часть необходимо отбросить).
const tileY = Math.floor(yFloat);Отображение позиции внтутри тайла
Итак, код выше дает нам возможность определить внутри какого тайла находится искомая точка, но где именно она находится? Возможно на мосту, в речке, на одной из улиц и так далее
Для правильного отображения точки нам нужно не только знать тайл, но и позицию внутри него. Мы помним, что номер тайла мы получали через округление вниз:
const tileCount = 2 ** zoom
const xFloat = ((longitude + 180) / 360) * tileCount;
const tileX = Math.floor(xFloat);Какую смысловую нагрузку несет дробная часть координаты точки в тайловой системе?
Она показывает позицию внутри тайла, что как раз нам и нужно:
Для определения позиции внутри тайла нам достаточно получить это значение после точки:
xFloat - tileXПолученное значение находится в диапазоне от 0 до 1. Однако для отображения точки на изображении нам нужна её позиция в пикселях. Например, если точка находится ровно по центру тайла размером 256 × 256 пикселей, её координата по соответствующей оси должна быть равна 128 — половине размера тайла. Если она в начале тайла — ее позиция равна 0, а в конце — 256.
Для этого достаточно умножить полученное значение на размер тайла:
(xFloat - tileX) * sizesize — размер тайла. Для стандартных тайлов OpenStreetMap он составляет 256 × 256 пикселей. Важно помнить: если при отображении вы изменили размер тайла, например растянули его в два раза, то при расчёте позиции точки необходимо использовать уже фактический размер отображаемого изображения.
Например, если тайл размером 256 × 256 пикселей был растянут до 512 × 512, то и положение точки внутри него необходимо рассчитывать относительно 512, а не 256.
(рассчет позиции Y идентичен, просто берем tileY)
Итоговая функция преобразования широты и долготы в номер тайла и позиции точки внутри него
/**
* @param latitude - широта точки
* @param longitude - долгота точки
* @param zoom - масштаб тайлов
* @param size - размер тайла
* @returns координаты тайла и точки внутри тайла
**/
export const getTitleCoordinates = (latitude: number, longitude: number, zoom: number, size: number) => {
const n = 2 ** zoom;
const tileCount = 2 ** zoom;
const xFloat = ((longitude + 180) / 360) * tileCount;
const tileX = Math.floor(xFloat);
const latRad = (latitude * Math.PI) / 180;
const yFloat = ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) * n;
const tileY = Math.floor(yFloat);
return {
tileX,
tileY,
pixelX: (xFloat - tileX) * size,
pixelY: (yFloat - tileY) * size,
};
};
Зная номера тайла по обеим осям и положение точки внутри него, мы уже можем без проблем отобразить полученные данные в вёрстке. Ниже демонстрационный html‑файл:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>OSM Tile Demo</title>
</head>
<body>
<div>
tileX: <span id="tileX"></span>
</div>
<div>
tileY: <span id="tileY"></span>
</div>
<div>
pixelX: <span id="pixelX"></span>
</div>
<div>
pixelY: <span id="pixelY"></span>
</div>
<br />
<div
id="tile"
style="
position: relative;
width: 256px;
height: 256px;
"
>
<img
id="tileImage"
width="256"
height="256"
/>
<div
id="point"
style="
position: absolute;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
transform: translate(-50%, -50%);
"
></div>
</div>
<script>
const LATITUDE = 56.4846;
const LONGITUDE = 84.9482;
const ZOOM = 13;
const SIZE = 256;
const getTileCoordinates = (
latitude,
longitude,
zoom,
size
) => {
const tileCount = 2 ** zoom;
const xFloat =
((longitude + 180) / 360) * tileCount;
const tileX = Math.floor(xFloat);
const latRad =
(latitude * Math.PI) / 180;
const yFloat =
(
(
1 -
Math.log(
Math.tan(latRad) +
1 / Math.cos(latRad)
) / Math.PI
) / 2
) * tileCount;
const tileY = Math.floor(yFloat);
return {
tileX,
tileY,
pixelX:
(xFloat - tileX) * size,
pixelY:
(yFloat - tileY) * size,
};
};
const {
tileX,
tileY,
pixelX,
pixelY
} = getTileCoordinates(
LATITUDE,
LONGITUDE,
ZOOM,
SIZE
);
document.getElementById("tileX").textContent =
tileX;
document.getElementById("tileY").textContent =
tileY;
document.getElementById("pixelX").textContent =
pixelX.toFixed(2);
document.getElementById("pixelY").textContent =
pixelY.toFixed(2);
document.getElementById("tileImage").src =
`https://tile.openstreetmap.org/${ZOOM}/${tileX}/${tileY}.png`;
const point =
document.getElementById("point");
point.style.left = `${pixelX}px`;
point.style.top = `${pixelY}px`;
</script>
</body>
</html>Автор: GreenFox_2003
