Как представлено в докладе FOSS4G, Mapbox Studio позволяет создавать векторные плитки Mapbox и экспортировать их в виде .mbtiles
файла.
Библиотека mapbox-gl.js может использоваться для динамического оформления и рендеринга векторных плиток Mapbox на стороне клиента (браузера).
Недостающая часть: Как я могу самостоятельно разместить векторные тайлы Mapbox ( .mbtiles
), чтобы я мог использовать их с mapbox-gl.js?
Я знаю, что Mapbox Studio может загружать векторные листы на сервер Mapbox и позволять им размещать листы. Но это не вариант для меня, я хочу разместить векторные плитки на моем собственном сервере.
Подход TileStream ниже оказался тупиком. Смотрите мой ответ для рабочего решения с Tilelive.
Я попытался TileStream, который может обслуживать плитки изображений из .mbtiles
файлов:
Моя веб-страница использует mapbox-gl v0.4.0:
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
и он создает mapboxgl.Map в сценарии JavaScript:
var map = new mapboxgl.Map({
container: 'map',
center: [46.8104, 8.2452],
zoom: 9,
style: 'c.json'
});
c.json
Файл стиль настраивает источник вектора плитки:
{
"version": 6,
"sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/bright",
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@land": "#808080",
"@earth": "#805040",
"@water": "#a0c8f0",
"@road": "#000000"
},
"sources": {
"osm_roads": {
"type": "vector",
"url": "tile.json"
}
},
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "@land"
}
}, {
"id": "roads",
"type": "line",
"source": "osm_roads",
"source-layer": "roads",
"paint": {
"line-color": "@road"
}
}]
}
... со следующей спецификацией TileJSON в tile.json
:
{
"tilejson": "2.1.0",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
... который указывает на мой сервер TileStream, работающий на localhost:8888
. TileStream был запущен с:
node index.js start --tiles="..\tiles"
... где ..\tiles
папка содержит мой osm_roads.mbtiles
файл.
С помощью этой настройки я могу открыть свою веб-страницу, но вижу только фоновый слой. В трассировке сети браузера я вижу, что плитки действительно загружаются при увеличении, но консоль ошибок JavaScript браузера содержит несколько ошибок вида
Error: Invalid UTF-8 codepoint: 160 in mapbox-gl.js:7
Поскольку векторные плитки - это не .png
изображения, а файлы ProtoBuf, URL плиток на http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf
самом деле имеет больше смысла, но это не работает.
Есть идеи?
источник
///
чтобы определить файл mbtiles в:tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
///
необходимы для Linux и OS X, например, напримерmbtiles:///usr/local/osm_roads.mbtiles
. Однако в Windows//
требуется только два , если указать диск, например, напримерmbtiles://D/data/osm_roads.mbtiles
.Хостинг векторных плиток самостоятельно относительно прост. MBTiles содержит файлы .pbf, которые должны быть доступны в Интернете. Вот и все.
Вероятно, проще всего использовать простой сервер с открытым исходным кодом, такой как TileServer-PHP, и поместить файл MBTiles в ту же папку, что и файлы проекта. TileServer выполняет всю конфигурацию хостинга за вас (CORS, TileJSON, правильные заголовки gzip и т. Д.). Установка означает просто распаковку на веб-сервере с поддержкой PHP.
Если вы хотите запустить TileServer-PHP на своем ноутбуке, вы можете использовать Docker. Готовый контейнер находится на DockerHub . В Mac OS X и Windows он запускается через пару минут с графическим интерфейсом пользователя Kitematic: https://kitematic.com/ . В Kitematic просто найдите «tileserver-php» и запустите готовый контейнер / виртуальную машину с проектом внутри. Затем нажмите «Тома» и поместите в папку файл MBTiles. Вы получаете работающий хостинг для ваших векторных плиток!
Такие векторные плитки можно открывать в MapBox Studio как источник или отображать в программе просмотра MapBox GL JS WebGL.
Технически можно даже разместить векторные плитки в виде простой папки на любом веб-сервере, в облачном хранилище или даже на GitHub, если вы распакуете отдельный файл .pbf из контейнера MBtiles с помощью утилиты, такой как mbutil , установите CORS, TileJSON. и gzip правильно. Bellow - это проект GitHub, демонстрирующий такой подход.
Попробуйте этот просмотрщик:
и посмотреть соответствующие репозитории:
источник
Не для моего собственного рога, но https://github.com/spatialdev/PGRestAPI - это проект, над которым я работал, на котором размещается экспорт векторных плиток .mbtiles из Mapbox Studio.
По-прежнему требуется много документации, но, по сути, удалите файлы .mbtiles в / data / pbf_mbtiles и перезапустите приложение узла. Он прочитает эту папку и предложит конечные точки для ваших векторных плиток.
Он также просматривает / data / shapefiles и создает динамические векторные плитки Mapbox на лету на основе вашего .shp. Вы также можете указать на экземпляр PostGIS и получить динамические векторные плитки.
Мы используем их вместе с https://github.com/SpatialServer/Leaflet.MapboxVectorTile , библиотекой векторных листов Leaflet / Mapbox, над которой мы также работаем.
источник
Спасибо за отличный вопрос. Я не знал, что они наконец выпустили стабильную версию векторных тайлов. Более того, вам, возможно, придется поработать с этим ответом, поскольку он является источником идей для ваших "каких-либо идей?" вопрос. У меня пока нет работающей студии.
Я думаю, что одна из проблем, с которыми вы сталкиваетесь, заключается в том, что вы используете файл tilejson. Вам нужен сервис tilejson для использования такого типа файла. Следовательно, я считаю, что вам нужно изменить раздел источников на встроенный URL. Пытаться
или же
Когда они используют
mapbox://
в качестве протокола, это псевдоним / сокращенная запись для их служб. Секция источников была кратко обсуждена около 8:40 видео.Один из этапов нового процесса векторных листов состоит в том, чтобы курировать векторные данные, корректируя то, что вы хотите в данных. Другой шаг - вернуть векторные данные в MapBox Studio и отобразить данные / создать таблицу стилей. osm_roads будет первым шагом, в то время как ваш файл c.json является таблицей стилей. Вам может понадобиться, чтобы живой сервер мозаики использовал поток плиток, как обсуждалось в 15:01 видео. В видео говорится, что вам нужны дополнительные метаданные в XML-файле.
Странность здесь в том, что вы ссылаетесь на .pbf и таблицу стилей в другом месте, но URL-адрес, который вы предоставляете, - это результирующие файлы плиток .png, которые генерируются из векторных данных.
Вы не говорите, если у вас есть ключ MapBox. Я считаю, что для вашего собственного хостинга вам придется скопировать стили и глифы github на ваш собственный сервер. Еще раз обратите внимание, что в теге glyphs есть протокол mapbox: //. Эти два тега могут не понадобиться, поскольку вы отображаете простые линии и полигоны, а не POI с помощью значков. Стоит взглянуть.
Наконец, видео говорит о том, что вы можете взять сгенерированный векторный слой обратно в студию для его стилизации. Возможно, вы захотите сослаться на свой векторный слой и вначале применить стиль id: background и id: roads в студии. Видео говорит о том, что плитка вживую является сервером за сценой MapBox Studio. Идея здесь состоит в том, чтобы убедиться, что у вас есть все проблемы второго шага, которые были поняты и исправлены, прежде чем вы попытаетесь обработать окончательные векторные листы, которые отображаются динамически.
источник
https://github.com/osm2vectortiles/tileserver-gl-light намного проще в использовании, чем упомянутые основные решения - не нужно возиться с файлами JSON. Вы просто запускаете это с
tileserver-gl-light filename.mbtiles
а потом он подает плитки для вас. Он работает с предопределенными стилями Mapbox GL, такими как bright-v9; после запуска сервера вы просто указываете, что потребляет плитки
HTTP: // локальный: 8080 / стили / ярко-v9.json
источник
Вы можете попробовать наш сервер tilehut.js. Он в основном делает все, что вам нужно = хостинг векторных плиток и поставляется с хорошими примерами / документами ... и в сочетании с openshift это установка за 5 минут. Пожалуйста, посмотрите:
https://github.com/bg/tilehut https://github.com/bg/tilehut/tree/master/examples/simplemap_vector https://github.com/bg/tilehut#your-own-hosted-tileserver- в-5-й
источник
Супер позже, но теперь GeoServer обслуживает pbf (векторный формат листов)
источник
Другие варианты, которые вы можете рассмотреть для подачи плитки;
Тегола (Написано на Го)
плиточник
Там хорошее введение в эту тему здесь
источник