Интернет картография с открытым исходным кодом

Здравствуйте. Я продолжаю серию статей, про картографирование в интернете с использованием набора программного обеспечения с открытым исходным кодом MapBox, от компании Development Seed.

Предыдущие части:

1. Обзор студии
2. Введение в TileMill
3. Расширенные возможности

Сегодня я рассмотрю:

• Высокопроизводительный тайловый сервер 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 (3.0.4)
• Предыдущие релизы
• Исходный код

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 Maps
• wax/dist/wax.mm.js — содержит код интегрирующий Wax и Modest Maps
• wax/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 — содержит библиотеку LeafLet
• wax/dist/wax.leaf.js — содержит код интегрирующий Wax и LeafLet
• wax/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.

Спасибо за внимание.

Полезные ссылки

• TileStream
• Wax
• Modest Maps JS
• LeafLet