Создание автономного картографического приложения на базе изображений без привязки: различия между версиями
мНет описания правки |
мНет описания правки |
||
Строка 30: | Строка 30: | ||
принцип работы с которым заключается в том, что вы загружаете свое изображение, | принцип работы с которым заключается в том, что вы загружаете свое изображение, | ||
а на выходе получаете готовую карту, [http://hugepic.io/34f7e5716/2.00/47.3/6.7 пример]. | а на выходе получаете готовую карту, [http://hugepic.io/34f7e5716/2.00/47.3/6.7 пример]. | ||
== Обработка исходного изображения == | |||
=== Постановка задачи === | |||
1 | |||
=== Выбор исходного изображения === | |||
2 | |||
=== Разбивка на тайлы === | |||
3 | |||
== Подключение тайлов в Leaflet == | |||
== Заключение == | == Заключение == |
Версия от 10:53, 28 июля 2013
Рассмотрен процесс подготовки и подключения изображений без привязки в картографический JavaScript-движок Leaflet
Введение
Картографические JavaScript-движки, такие как OpenLayers или Leaflet, порой находят своё применение в таких областях, для которых они изначально вроде бы и не предназначались. Так, например, международное агентство Рейтер продемонстрировало использование Leaflet для интерактивного взаимодействия с фотографиями из зала вручения кинопремии «Оскар»:
Еще один необычный пример - интерактивный тур по городу на базе его вымышленной карты:
Таких примеров можно привести множество. Но есть один технический момент, который объединяет все эти «карты» - это то, что все они построены на базе изображений, которые не имеют абсолютно никакой географической привязки. Использование картографических движков для таких изображений добавляет возможность навигации по ним, а при небольшой предварительной обработке - возможность их масштабирования.
Именно вопросу такой предварительной подготовки и посвящена основная часть данной статьи. В качестве языка программирования будем использовать Python, в качестве JavaScript-движка - Leaflet.
Если перед вами стоит схожая задача, но вы не хотите вникать в технические моменты, тогда просто воспользуйтесь онлайн сервисом HUGEpic, принцип работы с которым заключается в том, что вы загружаете свое изображение, а на выходе получаете готовую карту, пример.
Обработка исходного изображения
Постановка задачи
1
Выбор исходного изображения
2
Разбивка на тайлы
3
Подключение тайлов в Leaflet
Заключение
В ходе данной статьи была описана процедура разбивки изображения без привязки на тайлы, а также подключение их в Leaflet. Отметим, что операцию по тайлированию изображения можно было выполнить, используя утилиту gdal2tiles, которая входит в состав библиотеки GDAL:
gdal2tiles.py -p raster -z 0-4 earthquakes.jpg
Описанный в статье вариант решения задачи не требует использования GDAL, плюс (что самое, наверное, важное) код довольно простой и наглядно дает понимание того, как вычисляются масштабные уровни и как выполняется непосредственно сама разбивка на тайлы. По коду gdal2tiles разбираться в этих вопросах гораздо сложнее, так как это более универсальный инструмент. И еще, gdal2tiles помимо генерирования тайлов также создает html-файлы с включенными в них движками OpenLayers и Google (но не Leaflet) и подключает на карту набор созданных тайлов, то есть по-сути делает все то же самое о чем идет речь в данной статье, но как-бы за кадром, мы же попытались представить этот процесс более наглядно.