Начало работы с Polymaps

Эта страница является черновиком статьи.

Знакомство с библиотекой Polymaps.

Библиотека OpenLayers благодаря своим широким возможностям стала стандартом де-факто при разработке свободных картографических web-приложений. Однако, недавний скачок роста использования Интернета на мобильных устройствах привёл к появлению новых библиотек, демонстрирующих совершенно иной подход. Хотя OpenLayers, начиная с версии 2.11, добился значительного прогресса в вопросе поддержки мобильных устройств, новые библиотеки, такие как Polymaps, Tile5 и Leaflet изначально разрабатывались с ориентацией на современные технологии, в том числе и на работу в мобильных приложениях.

В данной статье мы рассмотрим одну из этих новых библиотек, а именно продукт совместной работы Stamen Design и SimpleGeo (в октябре 2011 компания SimpleGeo была приобретена Urban Airship) - Polymaps.

Особенности библиотеки

Polymaps - это небольшая (32 Кб, что в 30 раз меньше OpenLayers в оригинальной сборке) JavaScript библиотека с открытым исходным кодом, предназначенная для создания интерактивных web-карт. Главной особенностью библиотеки является возможность работы с векторными данными больших объёмов. Это достигается за счёт применения тайлового подхода к векторным SVG-изображениям и автоматического изменения детализации геометрий при переходе между масштабными уровнями. В качестве единственного поддерживаемого формата векторных данных в Polymaps используется GeoJSON.

Как уже было отмечено выше, Polymaps ориентирован на работу с масштабируемой векторной графикой (Scalable Vector Graphics, SVG). Многие из существующих библиотек web-картографии обременены поддержкой совместимости с устаревшими браузерами в которых отсутствует поддержка SVG (здесь важно отметить, что поскольку поддержка SVG появилась только в IE9, то в предыдущих версиях указанного браузера Polymaps работать не будет). Выбор же в качестве рендера SVG позволяет Polymaps выполнять широкий спектр графических операций, а также даёт возможность настраивать внешний вид объектов с помощью CSS.

Для обеспечения высокой производительности при работе с большими объёмами данных в Polymaps используется ряд специальных стратегий. Во-первых, все тайлы, и растровые и векторные, кэшируются, поэтому если потребуется какой-то из уже использованных ранее тайлов, он будет получен из кэша, а не через запрос к серверу. Во-вторых, если нужный тайл недоступен в кэше, но доступны тайлы соседних масштабных уровней на этот участок, то они могут быть временно использованы до тех пор, пока нужный тайл не придёт с сервера. Такой подход позволяет обеспечить плавность сдвига и изменения масштаба.

Подключение библиотеки и основные подходы к использованию

Для получения библиотеки необходимо перейти на главную страницу и скачать последнюю версию, на настоящий момент это 2.5.0. Для подключения Polymaps, необходимо в разделе head html-страницы указать путь до файла библиотеки polymaps.js или polymaps.min.js (минифицированный вариант).

Каждое приложение Polymaps начинается с создания объекта map. Но прежде чем его создавать, необходимо импортировать пространство имён Polymaps в какую-нибудь локальную переменную, например:

var po = org.polymaps;

После чего можно переходить непосредственно к созданию объекта map:

var map = po.map();

Отметим, что библиотека не использует традиционный JavaScript конструктор new, вместо этого Polymaps предоставляет фабричные методы, автоматически создающие необходимые объекты.

Все методы объекта map возвращают сам объект, поэтому работа с Polymaps предполагает активное использование цепочек методов. Например:

var map = po.map().container(document.body.appendChild(po.svg("svg"))).add(po.image().url(…));

Это одна команда, которая создаёт объект map, выделяет под него контейнер и добавляет растровый слой. В случае, если карта содержит несколько слоёв, они будут отрисовываны снизу вверх (алгоритм художника):

var map = po.map()
   .container(document.body.appendChild(po.svg("svg")))
   .add(po.image().url("grid.png")) //Нижний слой
   .add(po.image().url(…)); //Верхний слой

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

• {X} - номер столбца тайловой разбивки;
• {Y} - номер строки тайловой разбивки;
• {B} - охват;
• {Z} - масштабный уровень;
• {S} - хост.

Синтаксис добавления векторного GeoJSON слоя похож на синтаксис добавления растровой подложки:

var map = po.map()
   .container(document.body.appendChild(po.svg("svg")))
   .add(po.image().url(…)) //Растровый слой
   .add(po.geoJson().url(…)); //Векторный слой

По умолчанию создаваемая карта неинтерактивна. Для придания ей элементов интерактивности необходимо добавить контролы взаимодействия с пользователем:

var map = po.map()
   .container(document.body.appendChild(po.svg("svg")))
   .add(po.image())
   .add(po.interact());

Контрол interact представляет собой обобщенный вызов пяти различных контролов:

var map = po.map()
   .container(document.body.appendChild(po.svg("svg")))
   .add(po.image())
   .add(po.arrow())
   .add(po.drag())
   .add(po.dblclick())
   .add(po.touch())

Контрол arrow отвечает за сдвиг карты с помощью клавиш стрелок и изменение масштаба с помощью клавиш "+" и "-", контрол drag - за сдвиг карты с помощью мыши, контрол dblclick позволяет приблизить карту по двойному клику, контрол wheel отвечает за изменение масштаба карты при вращении колеса мыши и, наконец, контрол touch отвечает за работу с мобильными устройствами.

Практическое применение

На официальном сайте Polymaps представлен ряд примеров использования библиотеки. Кроме того, в архиве с библиотекой представлено еще около 30 примеров, некоторые из которых дублируют примеры с сайта. Рассмотрим пару простых примеров, наглядно иллюстрирующих использование Polymaps для создания интерактивных карт.

Подключение подложки CloudMade

Подложка CloudMade, представляет собой различные стили оформления данных проекта OpenStreetMap.