Статьи

Создавайте и размещайте собственные растровые плитки, настроенные с помощью Mapbox Studio

Если вы никогда не видели карты, размещенные в Mapbox, вы, вероятно, согласитесь с качеством ее дизайна. Бизнес Mapbox заключается в размещении и обслуживании геопространственных данных. По этой причине все замечательные инструменты Mapbox ориентированы на то, чтобы помочь своим пользователям подготовиться и работать со своими данными.

Одним из предоставляемых инструментов является  Mapbox Studio . Mapbox Studio (MbS) — это настольное приложение, которое позволяет создавать темы CartoCSS , которые впоследствии используются для создания растровых плиток. Кратко объяснил, что делает MbS, чтобы загрузить данные OpenStreetMap в векторном формате и визуализировать их на лету, применяя указанный стиль CartoCSS.

Результатом работы с MbS является не набор плиток, а стиль, то есть набор правил, которые определяют, какой цвет должен использоваться для рендеринга дорог, на каких уровнях отображаются метки, с каким размером, для какого цвета должен использоваться земля и т. д. Этот стиль может быть позже загружен в Mapbox, чтобы растровые плитки создавались в облаке, и мы могли использовать плитки, оплачивая услугу.

Вопрос, который мы можем задать: как мы можем генерировать растровые тайлы локально из заданного стиля MbS?

Ну, эта статья об этом. Продолжить чтение.

Работа с Mapbox Studio и создание собственного стиля

Начнем с самого начала — загрузите приложение Mapbox Studio и установите его в своей системе. После установки выполните его, и вам будет предложено подключиться к платформе Mapbox.

Есть две основные причины, по которым Mapbox требует, чтобы вы зарегистрировались как пользователь. Во-первых, сила платформы находится в облаке. Это включает в себя стили, которые вы создаете.

Во-вторых, MbS получает данные в векторном формате с серверов Mapbox. Когда вы регистрируетесь как пользователь, вы получаете токен API, который идентифицирует ваши запросы. Каждый раз, когда MbS делает запрос на извлечение данных, у него есть ваш токен, который идентифицирует вас как пользователя. Таким образом, Mapbox может контролировать, если какой-либо пользователь неправильно использует свою платформу.
Снимок экрана 2015-07-25 в 23.43.26

После входа вы сможете создавать новые стили карты. Самый простой способ — начать использовать один из начальных стилей, созданных великими дизайнерами Mapbox:

Снимок экрана 2015-07-25 в 23.47.38

Здесь мы выбрали стиль Mapbox Outdoors . На рисунке вы можете увидеть код стиля (CartoCSS, который проверяется CSS) и результирующие листы, полученные при рисовании векторной информации с заданными правилами стиля:

CartoCSS — это препроцессор таблиц стилей Mapnik, разработанный MapBox и вдохновленный Cascadenik . Это как язык CSS, специально разработанный для стилей карт.

Снимок экрана 2015-07-25 в 23.54.20

Сохраните стиль с новым именем где-нибудь на вашем компьютере, например customstyle,. Если вы посмотрите на свой диск, то увидите, customstyle.tm2что была создана папка, содержащая набор файлов, которые определяют правила стиля (посмотрите, они не опасны).

Наконец, измените некоторые свойства, например, @landили @cropцвета, и сохраните, чтобы увидеть результат:

Снимок экрана 2015-07-25 в 23.54.47

Большой !!! Вы создали свой первый собственный стиль.

Создание растровых тайлов в стиле MbS

В поисках решения я обнаружил инструменты tessera  и tlTessera — это приложение командной строки на основе узлов. Он основан на некоторых модулях из mapbox (конкретно tilelive) и других, реализованных автором ( Seth Fitzsimmons ). В результате мы можем выполнить tessera, передав определенный стиль MbS, открыть браузер, указывающий на локальный адрес, и увидеть карту с растровыми листами, сгенерированными в нашем стиле MbS.

Точно так же tl — это инструмент командной строки на основе узлов, который мы можем запустить, передав набор параметров, для генерации файла MBTiles или пирамиды плиток в соответствии с хорошо известным z/x/y.pngформатом.

Я знаю об обоих инструментах в статье  Преобразование векторных плиток Mapbox Studio в растры  из Azavea Labs.

Как установить инструменты?

ПРИМЕЧАНИЕ. В вашей системе должен быть установлен NodeJS , а также инструменты командной строки менеджера пакетов npm.

Я не люблю устанавливать глобальные пакеты узлов (или, по крайней мере, больше, чем необходимо), поэтому я собираюсь установить предыдущие инструменты в пользовательскую папку:

> mkdir tiletools
> cd tiletools

Внутри каталога выполнить следующее предложение, которое УСТАНАВЛИВАЕТЕ tesseraи tlпакеты среди прочего:

> npm install tessera tl mbtiles mapnik tilelive tilelive-file tilelive-http tilelive-mapbox tilelive-mapnik tilelive-s3 tilelive-tmsource tilelive-tmstyle tilelive-utfgrid tilelive-vector tilejson

Вы увидите, что был создан скрытый каталог с именем  .npm_modules, который содержит несколько подкаталогов с тем же именем, что и у предыдущих пакетов.

Бег Тессера

Давайте попробуем запустить Тессера в первый раз. Поскольку он установлен как модуль локального узла, выполните:

> ./node_modules/tessera/bin/tessera.js 

Usage: node tessera.js [uri] [options]

uri     tilelive URI to serve

Options:
   -C SIZE, --cache-size SIZE          Set the cache size (in MB)  [10]
   -c CONFIG, --config CONFIG          Provide a configuration file
   -p PORT, --port PORT                Set the HTTP Port  [8080]
   -r MODULE, --require MODULE         Require a specific tilelive module
   -S SIZE, --source-cache-size SIZE   Set the source cache size (in # of sources)  [10]
   -v, --version                       Show version info

A tilelive URI or configuration file is required.

Tessera требует, чтобы вы передали URI, чтобы он мог обслуживать свой контент. Он принимает URI из размещенного файла Mapbox, Mapnik, Tilemill, Mapbox Studio,…

Повторите еще раз, указав путь к нашему ранее созданному стилю с указанием протокола  tmstyle://.

> ./node_modules/tessera/bin/tessera.js tmstyle://./customstyle.tm2
Listening at http://0.0.0.0:8080/

/Users/antonio/Downloads/tiletools/node_modules/tessera/server.js:43
        throw err;
              ^
Error: A Mapbox access accessToken is required. `export MAPBOX_ACCESS_TOKEN=...` to set.
...

Сначала кажется, что tessera работает на порте 8080, но позже мы получаем ошибку о MAPBOX_ACCESS_TOKEN. Если вы помните из первого раздела, Mapbox требует, чтобы все запросы были подписаны токеном пользователя. Итак, вам нужно получить токен доступа из вашей учетной записи и установить его как переменную среды перед выполнением tessera:

> export MAPBOX_ACCESS_TOKEN=your_token_here
> > ./node_modules/tessera/bin/tessera.js tmstyle://./customstyle.tm2
Listening at http://0.0.0.0:8080/

/Users/antonio/Downloads/tiletools/node_modules/tessera/server.js:43
        throw err;
              ^
Error: Failed to find font face 'Open Sans Bold' in FontSet 'fontset-0' in FontSet

Мы близки к тому, чтобы заставить это работать. Проблема в том, что наш стиль MbS использует шрифт, который мы не установили в нашей системе. Одно простое, но грубое решение — установить все шрифты Google Web Fonts в вашей системе. Для этого вы можете использовать установочный скрипт Web Font Load . В моем случае я установил их в папке шрифтов пользователя ~/Library/Fonts.

После установки шрифтов попробуйте снова запустить tessera:

> ./node_modules/tessera/bin/tessera.js tmstyle://./customstyle.tm2
Listening at http://0.0.0.0:8080/

/Users/antonio/Downloads/tiletools/node_modules/tessera/server.js:43
        throw err;
              ^
Error: Failed to find font face 'Open Sans Bold' in FontSet 'fontset-0' in FontSet

Это немного странно, мы только что установили шрифты, но они не найдены. Что случилось? Что ж, tessera использует mapnik для создания растровых плиток и ищет шрифты в папках, указанных в переменной среды MAPNIK_FONT_PATH, поэтому давайте определим переменную:

> export MAPNIK_FONT_PATH=~/Library/Fonts/

и снова запустите скрипт:

> ./node_modules/tessera/bin/tessera.js tmstyle://./customstyle.tm2
Listening at http://0.0.0.0:8080/

/Users/antonio/Downloads/tiletools/node_modules/tessera/server.js:43
        throw err;
              ^
Error: Failed to find font face 'Arial Unicode MS Regular' in FontSet 'fontset-0' in FontSet

OMG !!! This seems a never ending story. Now we need to install the Arial Unicode font. Look for it, install in your system and execute tessera again:

> ./node_modules/tessera/bin/tessera.js tmstyle://./customstyle.tm2
Listening at http://0.0.0.0:8080/

Great !!! It seems tessera is working fine. Let’s go to open our browser pointing to http://localhost:8080 and see the result:

A map implemented using Leaflet web mapping library is shown, rendering raster tiles that are created on the fly. Look at the console to see the tessera output information:

We can see how tiles at current zoom, the zoom level 8, has been generated.

At this point we have tessera working but what about generating a local pyramid of tiles for a given zoom level and a given bounding box?

Generating a custom pyramid of tiles with tl command line tool

Before continue we need to know which bounding box we want to generate, the whole world? or only a piece. In my case I want three zoom levels (7, 8 and 9) wrapping Catalonia.

There are some online tools you can use to get the bbox of a region, but one I like it the Bounding Box Tool from Klokan Technologies.

The tl tool can run three main commands but we are only interested in the copy one, which copies data between two providers. In our case the MbS style is one provider and the file system is the other. Run the tl command to see the available options:

> ./node_modules/tl/bin/tl.js copy -help
'-p' expects a value


Usage: node tl.js copy <source> <sink> [options]

source     source URI
sink       sink URI

Options:
   -v, --version                 Show version info
   -b BBOX, --bounds BBOX        WGS84 bounding box  [-180,-85.0511,180,85.0511]
   -z ZOOM, --min-zoom ZOOM      Min zoom (inclusive)  [0]
   -Z ZOOM, --max-zoom ZOOM      Max zoom (inclusive)  [22]
   -r MODULE, --require MODULE   Require a specific tilelive module
   -s SCHEME, --scheme SCHEME    Copy scheme  [scanline]
   -i FILE, --info FILE          TileJSON

copy data between tilelive providers

So let’s go to execute the command to copy data from our MbS style to the local tiles folder. We want to generate tiles from zoom level 7 to 9 and indicating a bounding box wrapping Catalonia.

Remember the -b options must be indicated as [minLon minLat maxLon maxLat].

> ./node_modules/tl/bin/tl.js copy -z 7 -Z 9 -b "0.023293972 40.4104003077 3.6146087646 42.9542303723" tmstyle://./customstyle.tm2/ file://./tiles
Segmentation fault: 11

Ough !!! That hurts. A segmentation fault. After looking for a while I realized it was a bug. To solve it, go to tl/node_modules/abaculus/node_modules and remove the mapnik folder dependency. It is redundant because there is one installed in parent folder.

Execute the command again and see the output:

The tl tool has created a local tiles directory and generated all the raster tiles for the given zoom levels and bounding box. The output shows, in addition, the time required to generate each tile.

That’s all. Now we only need to host the tiles at our own servers !!!