Что из себя представляют онлайн-карты? Как узнать адрес сервера заинтересовавшей вас карты? Как создать файл с настройками, который позволит навигатору на смартфоне подключиться к этой карте?

Содержание:

1 – Вступление. Стандартные растровые карты
2 – Продолжение. Пишем простой растеризатор для векторных карт
3 – Частный случай. Подключаем карту OverpassTurbo

Вступление

Среди навигационных приложений для смартфонов существует такие, которые предназначены для туризма и всевозможных загородных активностей. Среди наиболее известных из них можно выделить OsmAnd, Locus и GuruMaps. Всех их отличает большое количество специализированных функций, которые могут пригодится в пути. А так же еще большее количество всевозможных (порой весьма запутанных) настроек. Но сейчас нам более всего интересна одна: возможность добавлять дополнительные карты и быстро переключаться между ними.

Замечу, что это крайне полезная функция. Ведь один и тот же участок местности может быть весьма по разному отрисован на картах разных типов. И поэтому, перед преодолением сложных участков, полезно иметь возможность свериться с каждой из них. Однако, если бы для этого требовалось запускать на смартфоне несколько отдельных приложений, то это было бы крайне неудобно. Проседает производительность, да и батарея быстрее расходуется. Так что очень приятно, что существует возможность обойтись всего одним приложением: этаким картографическим агрегатором с удобным интерфейсом, специально рассчитанным на быстрое переключение между картами.

Так вот. Как правило, добавление новых карт реализовано сравнительно просто. В папке приложения есть подпапка с пресетами. То есть, с файлами сохранений, в которых указаны настройки для скачивания той или иной карты. Давайте посмотрим, что они из себя представляют.

Замечу, что у всех приложений пресеты более или менее похожи. Так что в качестве примера мы будем рассматривать GuruMaps, ведь он есть и под Android, и под iOS. Итак, давайте представим, что мы зашли в папку с его пресетами, обнаружили там файл с названием openstreetmaps.ms, а затем открыли его с помощью обычного текстового редактора.

<?xml version="1.0" encoding="UTF-8"?>

<customMapSource>
    <name>OpenStreetMaps</name>
    <minZoom>0</minZoom>
    <maxZoom>18</maxZoom>
    <url>http://{$serverpart}.tile.openstreetmap.org/{$z}/{$x}/{$y}.png</url>
    <serverParts>a b c</serverParts>
</customMapSource>

По сути, перед нами просто список из нескольких значений. Рассмотрим их по порядку:

name — Название карты, которое будет отображаться в приложении
minZoom — С какого уровня приближения будет показываться эта карта
maxZoom — До какого уровня приближения будет показываться эта карта
url — Шаблон для доступа к файлам карты
serverParts — Если у сервера, на котором хранятся файлы карты, есть несколько зеркал, то нужно перечислить их названия

Прежде, чем двинуться дальше, замечу, что для хранения на серверах большие карты разбиваются на маленькие кусочки. Обычно это изображения в формате png с размером 256х256 пикселей. Эти фрагменты называются тайлы.

А теперь подробнее приглядимся к шаблону url.

http://{$serverpart}.tile.openstreetmap.org /{$z}/{$x}/{$y}.png

Навигатор автоматически заменяет слова в фигурных скобках на “координаты” требуемого в данный момент фрагмента карты. Вот что именно будет подставлено на место заглушек:

{$serverpart} – Сюда будет подставлено одно из значений serverParts
{$z} – Уровень приближения (zoom), для которого нужно скачать фрагмент карты
{$x} – Номер фрагмента карты по горизонтали
{$y} – Номер фрагмента карты по вертикали

После подстановки значений навигатор получит ссылку, по которой затем скачает файл с требуемым фрагментом карты. К примеру, такую:

http://a.tile.openstreetmap.org /12/2478/1265.png

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

Добавляем свою карту

Итак, допустим, вы нашли в интернете карту, которая вас заинтересовала и которую вы бы очень хотели подключить к своему смартфону. Давайте попробуем. Для начала с помощью браузера на компьютере заходим на сайт с окном просмотра этой карты. Например на этот.

Открываем панель с инструментами разработчика (Ctrl + Alt + I для Google Chrome)

В открывшейся панели переходим на вкладку Sources.

Открываем по порядку все папки, пока не найдем папку изображениями кусочков отображаемой карты.

Жмем правой кнопкой на имя файла. В открывшемся меню выбираем Coly link address

К примеру, нам попалась вот такая ссылка
http://anygis.herokuapp.com/Combo_Best_Genshtab/1242/639/11

Нужно понять, что именно обозначают эти цифры. Проверяем из по нашей эталонной карте — OpenStreetMaps.

http://a.tile.openstreetmap.org/1242/639/11.png

Не загружается. Попробуем поменять цифры местами.
http://a.tile.openstreetmap.org/11/1242/639.png

Загрузилось! А теперь сравним тайл полученные по первой и по второй ссылке:

Мы убедились, что тайлы обеих этих карт показывают одно и то же место. И, что самое главное, без смещений. Значит найденная нами карта сделана в стандартной проекции и она подходит для подключения.

Чтож, а теперь, зная, в каком порядке шли координаты у OpenStreetMaps – z,x,y – мы можем с уверенностью сказать, в каком они идут у нашей карты.

http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}

Теперь поприближаем и поотдаляем карту в окне просмотра. Так мы выясним, что карта загружается только с 0-го и по 15-й зум.

Далее, если бы url начинался с одиночной буквы или цифры, то можно было бы поподставлять туда другие значения. Но обычно там или a,b,c или 0,1,2,3.

Итак, теперь мы выяснили все необходимые параметры и можем сделать пресет для нашей новой карты.

<?xml version="1.0" encoding="UTF-8"?>

<customMapSource>
    <name>Генштаб. Все масштабы </name>
    <minZoom>0</minZoom>
    <maxZoom>15</maxZoom>
    <url>http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}</url>
</customMapSource>

Остается сохранить файл под новым именем и добавить его в свое навигационное приложение. Для iOS – просто перетащите файл в папку приложения (через iTunes). Для Android – скопируйте файл в следующую директорию:

Android\data\com.bodunov.GalileoPro\files\Imported

Теперь, когда вы откроете навигатор, в списке карт появится сделанная вами. Поздравляю!

Как видите, это было довольно просто. И что самое приятное, весь процесс более или менее аналогичен для всех вышеперечисленных навигаторов. Быстро, универсально, кроссплатформенно.

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

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

Чтож, на этом со вступлением закончено. В следующей статье я расскажу, как подключить векторные онлайн-карты.