Здравствуйте. Я продолжаю серию статей, про картографирование в интернете с использованием набора программного обеспечения с открытым исходным кодом MapBox, от компании Development Seed.
Предыдущие части:
Сегодня я рассмотрю:
Интересно? Приглашаю под кат.
Для того чтобы объяснить, что такое кэшируемый картографический сервис, приведу цитату из статьи Самсонова Т.Е. «Картографический дизайн, ориентированный на Интернет: проектирование и оформление карт для веб-сервисов»:
TileStream—это высокопроизводительный тайловый сервер с возможностью просмотра файлов формата MBTiles через веб.
Возможности:
Требования:
Установите необходимые пакеты. Например, для Ubuntu:
Установите node.js и npm. Вы можете воспользоваться утилитой nvm для выбора определённой версии node.js. Установка из исходного кода:
Установка npm:
Скачайте исходный код из репозитория. И запустите процесс установки используя npm.
Ключ
Запустите TileStream.
Проверить TIleStream вы можете с помощью набора тестов, который предоставляют разработчики. Для тестирования, они используют Expresso. Установить библиотеку и запустить тесты вы можете так:
Важно. Если вы хотите использовать TileStream как сервер не на локальной машине, необходимо указать hostname при запуске.
Получить подробную справку по всем параметрам запуска TileStream можно так:
Для того, чтобы начать пользоваться TileStream, вам необходимо скопировать MBTiles в директорию tiles. Напоминаю, что на сайте MapBox вы можете найти набор бесплатных тайлов от разработчиков.
Каждый набор тайлов можно просмотреть по адресу
Имена наборов тайлов:
Wax—это набор расширений и инструментов для того, чтобы облегчить использование карт на сайте. Wax поддерживает API нескольких различных библиотек, таких как Modest Maps, LeafLet и Google Maps.
Загрузка
Wax API использует TileJSON. TileJSON—это формат, который содержит метаданные и информацию, необходимую для использования набора тайлов.
Для того, чтобы начать, вам необходимо знать URL набора тайлов, которые вы хотите использовать. В большинстве случаев, используется следующее соглашение:
Где
Например такой URL
Возвращает тайл
TileJSON, описывающий этот набор тайлов выглядит следующим образом:
Существует довольно много разнообразных библиотек используемых совместно с кэшируемыми картографическими сервисами, но все они выполняют примерно одно и то же—добавляют тайлы на страницу и управляют ими таким образом, чтобы карта смотрелась целостным образом мира, а не набором маленьких квадратных кусочков.
Итак, начнём с использования Modest Maps—легкой и быстрой картографической JavaScript библиотеки.
Modest Maps JS—это JavaScript библиотека для отображения карт на основе тайлов и взаимодействия с ними. Распространяется на условиях лицензии BSD.
Разработчики позиционируют Modest Maps JS как свободную, легковесную, расширяемую и настраиваемую библиотеку для разборчивых дизайнеров и программистов, которые хотят использовать интерактивные карты в своих проектах. Библиотека предоставляет ядро с набором возможностей, в виде сжатого и чистого кода, который можно расширить использую встроенную систему хуков.
Изначально Modest Maps была написана на Python и ActionScript. Пример использования — walkingpapers.org
Во первых, надо скачать необходимый исходный код.
В комплекте с Wax идёт набор поддерживаемых библиотек, в том числе и Modest Maps. Подключаем JavaScript и CSS.
Wax содержит Modest Maps провайдер, который отображает наборы тайлов, описываемые форматом TileJSON в
Карта будет отображаться в div с идентификатором
Пример.
LeafLet—это ещё одна современная и легковесная JavaScript библиотека для создания интерактивных карт на основе тайлов, разрабатываемая компанией CloudMade.
Эта библиотека разработана «с нуля», для того чтобы эффективно и гладко работать как на настольных так и мобильных платформах, с использованием передовых технологий включенных в HTML5. Главными приоритетами в разработке являются удобство использования, производительность, небольшой размер, поддержка передовых браузеров, гибкость и удобное в использовании API. Код написан в ООП стиле и спроектирован таким образом, чтобы быть модульным, расширяемым и лёгким в понимании.
Для того, чтобы воспользоваться LeafLet, в своём проекте, подключаем необходимый код.
Wax также содержит провайдер для LeafLet, который отображает наборы тайлов, описываемые форматом TileJSON в
В данном топике мы рассмотрели создание простейшего кэширующего картографического сервиса с использованием тайлового сервера TileStream, совместно с библиотеками Modest Maps и LeafLet.
Спасибо за внимание.
Предыдущие части:
Сегодня я рассмотрю:
- Высокопроизводительный тайловый сервер TileStream
- Легковесные картографические библиотеки Modest Maps и LeafLet
- Использование TileStream вместе с картографической библиотекой OpenLayers
- Использование расширенных возможностей TileMill с помощью библиотеки Wax
Интересно? Приглашаю под кат.
Для того чтобы объяснить, что такое кэшируемый картографический сервис, приведу цитату из статьи Самсонова Т.Е. «Картографический дизайн, ориентированный на Интернет: проектирование и оформление карт для веб-сервисов»:
Картографические веб-сервисы принято делить на две большие группы: динамические и кэшируемые. В первом случае каждый раз при масштабировании или перемещении происходит обращение к данным и перерисовка изображения с учетом нового охвата. При этом клиент получает только готовые растровые картинки — их рендеринг осуществляется сервером.
В случае кэшированного сервиса мозаика растровых изображений (тайлов) для каждого масштаба готова заранее, поэтому работа выполняется на порядок быстрее. Само собой, сложность оформления и самих данных никак не сказывается на скорости отображения – это большой плюс. Но имеются и очевидные ограничения: при изменении данных необходимо пересчитать кэш, нельзя редактировать объекты и управлять отображением слоев, список масштабов фиксирован. Также стоит помнить, что пересчет кэша может занять несколько суток и даже недель (!) в зависимости от того, насколько сложная карта лежит в его основе.
Поэтому выбор между динамическим и кэшируемым сервисом не столь очевиден, как может показаться на первый взгляд. Как правило, кэшируемый сервис имеет смысл делать при редко или фрагментарно обновляющихся данных, для создания карт-подложек под динамические сервисы, или если проект сам по себе небольшой – кэш можно быстро пересчитать. Существует еще вариант многослойного кэша, когда каждый слой представляет собой отдельную растровую мозаику. Однако производительность сервиса в таком случае оставляет желать лучшего – ведь веб-серверу приходится динамически накладывать растры слоев друг на друга.
TileStream
TileStream—это высокопроизводительный тайловый сервер с возможностью просмотра файлов формата MBTiles через веб.
Возможности:
- Галерея ваших карт с возможностью просмотра
- Поддержка легенды и интерактивности MBTiles с помощью библиотеки Wax
Требования:
- Клиент TileStream
- Проверено: Chrome 6+, Firefox 3+, IE8+
- Должно работать под Opera 11
- TileStream сервер
- Проверено: Mac OS X 10.6, Ubuntu 10.10, Gentoo
- Проверено: node 0.4.9
- Проверено: npm v1.0.3
- Как минимум 613МБ ОЗУ
- Должно работать на старых версиях и других POSIX-совместимых системах
Установка зависимостей
Установите необходимые пакеты. Например, для Ubuntu:
sudo apt-get install curl build-essential libssl-dev libsqlite3-0 libsqlite3-dev
Установите node.js и npm. Вы можете воспользоваться утилитой nvm для выбора определённой версии node.js. Установка из исходного кода:
git clone --depth 1 git://github.com/joyent/node.git
cd node
git checkout v0.4.9
export JOBS=2 # optional, sets number of parallel commands.
mkdir ~/local
./configure --prefix=$HOME/local/node
make
make install
echo 'export PATH=$HOME/local/node/bin:$PATH' >> ~/.profile
source ~/.profile
Установка npm:
curl http://npmjs.org/install.sh | sh
Установка TileStream
Скачайте исходный код из репозитория. И запустите процесс установки используя npm.
git clone git://github.com/mapbox/tilestream.git
cd tilestream
npm install -g tilestream
Ключ
-g
указывает npm, что tilestream необходимо установить глобально. Для этого потребуются права суперпользователя. Для того, чтобы установить локально (в текущую директорию), достаточно опустить этот ключ.Запустите TileStream.
tilestream
Проверить TIleStream вы можете с помощью набора тестов, который предоставляют разработчики. Для тестирования, они используют Expresso. Установить библиотеку и запустить тесты вы можете так:
npm install -g expresso
cd tilestream
npm test
Важно. Если вы хотите использовать TileStream как сервер не на локальной машине, необходимо указать hostname при запуске.
tilestream --host 127.0.0.1
tilestream --host yourhost.com
Получить подробную справку по всем параметрам запуска TileStream можно так:
tilestream start --help
Использование
Для того, чтобы начать пользоваться TileStream, вам необходимо скопировать MBTiles в директорию tiles. Напоминаю, что на сайте MapBox вы можете найти набор бесплатных тайлов от разработчиков.
Каждый набор тайлов можно просмотреть по адресу
localhost:8888/map/[filename]
, где [filename]
—имя набора тайлов, без расширения .mbtiles.Имена наборов тайлов:
- Могут содержать буквы (нижнего и верхнего регистра), числа, подчёркивания и тире
world-light.mbtiles control_room.mbtiles PartyLikeIts1999.mbtiles
- Не могут содержать пробелы, не ASCII-символы и другие знаки пунктуации
World Light.mbtiles BlueWorld-1.0.mbtiles
Wax
Wax—это набор расширений и инструментов для того, чтобы облегчить использование карт на сайте. Wax поддерживает API нескольких различных библиотек, таких как Modest Maps, LeafLet и Google Maps.
Использование
Загрузка
Wax API использует TileJSON. TileJSON—это формат, который содержит метаданные и информацию, необходимую для использования набора тайлов.
Для того, чтобы начать, вам необходимо знать URL набора тайлов, которые вы хотите использовать. В большинстве случаев, используется следующее соглашение:
/{z}/{x}/{y}.[image format]
Где
{z}
—уровень представления (zoom), {x}
и {y}
—координаты. TileJSON представляет URL набора тайлов заменяя эти метки (placeholders) таким образом, чтобы можно было получить любой тайл из набора.Например такой URL
https://habrastorage.org/getpro/habr/post_images/e09/b8b/605/e09b8b60541e60473a21c777c75bcff9.png
Возвращает тайл
TileJSON, описывающий этот набор тайлов выглядит следующим образом:
{
"version": "1.0.0",
"scheme": "tms",
"tiles" ["http://a.tile.mapbox.com/1.0.0/world-light/{z}/{x}/{y}.png"]
}
- Ключ
version
определяет, что используется 1.0.0 версия спецификации TileJSON - Ключ
scheme
описывает используемую координатную систему тайлов (наборы тайлов от MapBox используют TMS) - Ключ
tiles
содержит массив URL из которых запрашиваются тайлы
Существует довольно много разнообразных библиотек используемых совместно с кэшируемыми картографическими сервисами, но все они выполняют примерно одно и то же—добавляют тайлы на страницу и управляют ими таким образом, чтобы карта смотрелась целостным образом мира, а не набором маленьких квадратных кусочков.
Итак, начнём с использования Modest Maps—легкой и быстрой картографической JavaScript библиотеки.
Modest Maps JS
Modest Maps JS—это JavaScript библиотека для отображения карт на основе тайлов и взаимодействия с ними. Распространяется на условиях лицензии BSD.
Разработчики позиционируют Modest Maps JS как свободную, легковесную, расширяемую и настраиваемую библиотеку для разборчивых дизайнеров и программистов, которые хотят использовать интерактивные карты в своих проектах. Библиотека предоставляет ядро с набором возможностей, в виде сжатого и чистого кода, который можно расширить использую встроенную систему хуков.
Изначально Modest Maps была написана на Python и ActionScript. Пример использования — walkingpapers.org
Во первых, надо скачать необходимый исходный код.
git clone git://github.com/mapbox/wax.git
В комплекте с Wax идёт набор поддерживаемых библиотек, в том числе и Modest Maps. Подключаем JavaScript и CSS.
<html>
<head>
<script src='wax/ext/modestmaps.min.js' type='text/javascript'></script>
<script src='wax/dist/wax.mm.js' type='text/javascript'></script>
<link href='wax/theme/controls.css' rel='stylesheet' type='text/css' />
...
wax/ext/modestmaps.min.js
— содержит библиотеку Modest Mapswax/dist/wax.mm.js
— содержит код интегрирующий Wax и Modest Mapswax/theme/controls.css
— содержит стили оформления для элементов управления
Wax содержит Modest Maps провайдер, который отображает наборы тайлов, описываемые форматом TileJSON в
wax.mm.connector
.var tilejson = {
tilejson: '1.0.0',
scheme: 'tms',
tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/world-light/{z}/{x}/{y}.png']
};
// Alias com.modestmaps to mm. This isn't necessary -
// just nice for shorter code.
var mm = com.modestmaps;
// Set up a map in a div with the id 'modestmaps-setup'
var m = new mm.Map('modestmaps-setup',
// Use Wax's connector to add a new custom layer
new wax.mm.connector(tilejson),
// And it'll be 240px by 120px
new mm.Point(240,120));
// Center it on the United States, at zoom level 2.
m.setCenterZoom(new mm.Location(39, -98), 2);
Карта будет отображаться в div с идентификатором
modestmaps-setup
.<div id="modestmaps-setup"></div>
Пример.
LeafLet
LeafLet—это ещё одна современная и легковесная JavaScript библиотека для создания интерактивных карт на основе тайлов, разрабатываемая компанией CloudMade.
Эта библиотека разработана «с нуля», для того чтобы эффективно и гладко работать как на настольных так и мобильных платформах, с использованием передовых технологий включенных в HTML5. Главными приоритетами в разработке являются удобство использования, производительность, небольшой размер, поддержка передовых браузеров, гибкость и удобное в использовании API. Код написан в ООП стиле и спроектирован таким образом, чтобы быть модульным, расширяемым и лёгким в понимании.
Для того, чтобы воспользоваться LeafLet, в своём проекте, подключаем необходимый код.
<html>
<head>
<script src='wax/ext/leaflet.js' type='text/javascript'></script>
<script src='wax/dist/wax.leaf.js' type='text/javascript'></script>
<link href='wax/ext/leaflet.css' rel='stylesheet' type='text/css' />
...
wax/ext/leaflet.js
— содержит библиотеку LeafLetwax/dist/wax.leaf.js
— содержит код интегрирующий Wax и LeafLetwax/ext/leaflet.css
— содержит стили оформления для элементов управления
Wax также содержит провайдер для LeafLet, который отображает наборы тайлов, описываемые форматом TileJSON в
wax.leaf.connector
.var tilejson = {
tilejson: '1.0.0',
scheme: 'tms',
tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png'],
grids: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.grid.json'],
formatter: function(options, data) { return data.NAME }
};
var map = new L.Map('leaflet-simple')
.addLayer(new wax.leaf.connector(tilejson))
.setView(new L.LatLng(51.505, -0.09), 1);
wax.leaf.interaction(map, tilejson);
Заключение
В данном топике мы рассмотрели создание простейшего кэширующего картографического сервиса с использованием тайлового сервера TileStream, совместно с библиотеками Modest Maps и LeafLet.
Спасибо за внимание.