Если вы никогда не видели карты, размещенные в 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 может контролировать, если какой-либо пользователь неправильно использует свою платформу.
После входа вы сможете создавать новые стили карты. Самый простой способ — начать использовать один из начальных стилей, созданных великими дизайнерами Mapbox:
Здесь мы выбрали стиль Mapbox Outdoors . На рисунке вы можете увидеть код стиля (CartoCSS, который проверяется CSS) и результирующие листы, полученные при рисовании векторной информации с заданными правилами стиля:
CartoCSS — это препроцессор таблиц стилей Mapnik, разработанный MapBox и вдохновленный Cascadenik . Это как язык CSS, специально разработанный для стилей карт.
Сохраните стиль с новым именем где-нибудь на вашем компьютере, например customstyle,. Если вы посмотрите на свой диск, то увидите, customstyle.tm2что была создана папка, содержащая набор файлов, которые определяют правила стиля (посмотрите, они не опасны).
Наконец, измените некоторые свойства, например, @landили @cropцвета, и сохраните, чтобы увидеть результат:
Большой !!! Вы создали свой первый собственный стиль.
Создание растровых тайлов в стиле MbS
В поисках решения я обнаружил инструменты tessera и tl . Tessera — это приложение командной строки на основе узлов. Он основан на некоторых модулях из 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 FontSetOMG !!! 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 providersSo 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
-boptions 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: 11Ough !!! 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 !!!