Самостійне розміщення векторних плиток Mapbox

Як викладено в розмові на 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насправді має більше сенсу, але це не працює.

Будь-які ідеї?

Як вказував @Greg, замість TileStream (моя перша спроба) ви повинні використовувати Tilelive для розміщення власних векторних плиток.

Tilelive - це не сам сервер, а резервний фреймворк, який займається плитками в різних форматах з різних джерел. Але він базується на Node.js, щоб ви могли перетворити його на сервер досить прямолінійно. Щоб прочитати плитки з .mbtilesджерела, експортованого Mapbox Studio, вам потрібен модуль плитки nve -mbtiles .

Побічна примітка: У поточній Mapbox Studio є помилка під Windows та OS X, яка не дозволяє експортованому .mbtilesфайлу з’являтися у вибраному вами пункті призначення. Обхід: просто захопіть останній export-xxxxxxxx.mbtilesфайл у ~/.mapbox-studio/cache.

Я знайшов дві серверні реалізації ( ten20-сервер плитки від alexbirkett і TileServer від hanchao ), які обидва використовують Express.js як сервер веб-додатків.

Ось мій мінімалістичний підхід, який слабо базується на таких реалізаціях:

1. Встановити Node.js
2. Візьміть пакети вузлів за допомогою npm install tilelive mbtiles express

3. Реалізуйте сервер у файлі server.js:

   var express = require('express');
   var http = require('http');
   var app = express();
   var tilelive = require('tilelive');
   require('mbtiles').registerProtocols(tilelive);
   
   //Depending on the OS the path might need to be 'mbtiles:///' on OS X and linux
   tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
   
       if (err) {
           throw err;
       }
       app.set('port', 7777);
   
       app.use(function(req, res, next) {
           res.header("Access-Control-Allow-Origin", "*");
           res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
           next();
       });
   
       app.get(/^\/v2\/tiles\/(\d+)\/(\d+)\/(\d+).pbf$/, function(req, res){
   
           var z = req.params[0];
           var x = req.params[1];
           var y = req.params[2];
   
           console.log('get tile %d, %d, %d', z, x, y);
   
           source.getTile(z, x, y, function(err, tile, headers) {
               if (err) {
                   res.status(404)
                   res.send(err.message);
                   console.log(err.message);
               } else {
                 res.set(headers);
                 res.send(tile);
               }
           });
       });
   
       http.createServer(app).listen(app.get('port'), function() {
           console.log('Express server listening on port ' + app.get('port'));
       });
   });

   Примітка. Access-Control-Allow-...Заголовки дають можливість спільного використання ресурсів (CORS), щоб веб-сторінки, що подаються з іншого сервера, могли отримати доступ до плиток.

4. Запустіть його node server.js

5. Налаштуйте веб-сторінку за допомогою Mapbox GL JS у minimal.html:

   <!DOCTYPE html >
   <html>
     <head>
       <meta charset='UTF-8'/>
       <title>Mapbox GL JS rendering my own tiles</title>
       <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>
       <style>
         body { margin:0; padding:0 }
         #map { position:absolute; top:0; bottom:50px; width:100%; }
       </style>
     </head>
     <body>
       <div id='map'>
       </div>
       <script>
         var map = new mapboxgl.Map({
           container: 'map',
           center: [46.8, 8.5],
           zoom: 7,
           style: 'minimal.json'
         });
       </script>
     </body>
   </html>

6. Вкажіть розташування джерела плитки та накресліть шари наступним чином minimal.json:

   {
     "version": 6,
     "constants": {
       "@background": "#808080",
       "@road": "#000000"
     },
     "sources": {
       "osm_roads": {
         "type": "vector",
         "tiles": [
           "http://localhost:7777/v2/tiles/{z}/{x}/{y}.pbf"
         ],
         "minzoom": 0,
         "maxzoom": 12
       }
     },
     "layers": [{
       "id": "background",
       "type": "background",
       "paint": {
         "background-color": "@background"
       }
     }, {
       "id": "roads",
       "type": "line",
       "source": "osm_roads",
       "source-layer": "roads",
       "paint": {
         "line-color": "@road"
       }
     }]
   }

7. Обслуговуйте веб-сторінку і радійте.

Розміщення векторних плиток самостійно відносно просто. 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 як джерело або відобразити за допомогою переглядача MapBox GL JS WebGL.

Технічно навіть можна розмістити векторні плитки як звичайну папку на будь-якому веб-сервері або хмарному сховищі, або навіть GitHub, якщо ви розпакуйте окремий .pbf з контейнера MBtiles з утилітою, наприклад mbutil , встановіть CORS, TileJSON і gzip правильно. Bellow - це проект GitHub, що демонструє і такий підхід.

Спробуйте цього глядача:

і подивіться відповідні репости:

• https://github.com/klokantech/tileserver-php
• https://github.com/klokantech/vector-tiles-sample
• https://github.com/klokantech/mapbox-gl-js-offline-example

Не для того, щоб зарізати власний ріг, але https://github.com/spatialdev/PGRestAPI - це проект, над яким я працював над тим, щоб розмістити векторний експорт плитки .mbtiles з Mapbox Studio.

Все ще потрібно багато документації, але в основному, перекиньте свої файли .mbtiles в / data / pbf_mbtiles і перезавантажте додаток для вузла. Він прочитає через цю папку і запропонує кінцеві точки для вашої векторної плитки.

Він також буде виглядати через / data / shapefiles та створювати динамічні векторні плитки Mapbox на льоту, спираючись на ваш .shp. Ви також можете вказати на екземпляр PostGIS і отримати динамічні векторні плитки.

Ми використовуємо їх у поєднанні з https://github.com/SpatialServer/Leaflet.MapboxVectorTile , бібліотекою листівок / картотек векторних плиток, над якими ми також працювали.

Дякую за чудове запитання. Я не знав, що вони нарешті випустили стабільну версію векторних плиток. Більше того, можливо, вам доведеться попрацювати з цією відповіддю, оскільки це джерело ідей для ваших "будь-яких ідей"? питання. У мене ще немає студії бігу.

Я думаю, що однією з проблем, з якою ви стикаєтесь, є те, що ви використовуєте файл tilejson. Щоб використовувати файл такого типу, вам потрібна служба tilejson . Отже, я вважаю, що вам потрібно змінити розділ джерел на строкову URL-адресу. Спробуйте

"sources": {
"osm_roads": {
  "type": "vector",
  "url": "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
 }
},

або

"sources": { 
"osm_orads": {
  "type": "vector",
  "tiles": [
    "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
  ],
  "minzoom": 0,
  "maxzoom": 12
 }
},

Коли вони використовуються mapbox://як протокол, це є псевдонімом / скороченням для їхніх послуг. У розділі джерел було коротко обговорено близько 8:40 відео.

Одним із кроків нового процесу векторних плиток є курація векторних даних, коригуючи те, що потрібно в даних. Другим кроком є ​​повернення векторних даних у MapBox Studio та надання даних / створення таблиці стилів. osm_roads буде першим кроком, тоді як ваш файл c.json - аркуш стилів. Можливо, вам знадобиться живий сервер з плитковими віршами з потоку плиток, про який говорилося близько 15:01 відео. У відео йдеться про те, що потрібні додаткові метадані у файлі xml.

Дивна ситуація полягає в тому, що ви посилаєте на .pbf та аркуш стилів деінде, але URL, який ви надаєте, - це отримані файли .png в плитках, які генеруються з векторних даних.

Ви не скажете, якщо у вас є ключ MapBox. Для вашого власного хостингу я вважаю, що вам доведеться скопіювати стилі github та гліфи на свій власний сервер. Зауважте ще раз, що у тезі glyphs є протокол mapbox: //. Ці два теги можуть не знадобитися, оскільки ви відображаєте звичайні лінії та багатокутники, а не POI за допомогою значків. Варто поглянути.

Нарешті, у відео йдеться про те, що ви можете взяти згенерований векторний шар назад у студію для його стилізації. Ви можете посилатися на свій векторний шар та застосувати свій ідентифікатор: background та id: стиль доріг там спочатку в студії. У відео йдеться про те, що плитка в прямому ефірі - це сервер за сценою MapBox Studio. Ідея тут полягає в тому, щоб переконатися, що ви зрозуміли та вирішили всі кроки два проблеми, перш ніж спробувати подати кінцеві векторні плитки, які динамічно відображаються.

https://github.com/osm2vectortiles/tileserver-gl-light набагато простіше у використанні, ніж основні згадані рішення - не потрібне зіткнення з файлами JSON. Ви просто запускаєте це

tileserver-gl-light filename.mbtiles

і тоді вона подає вам плитку. Він працює з наперед визначеними стилями Mapbox GL, такими як яскравий-v9; після запуску сервера ви просто вказуєте на те, що споживає плитки

http: // localhost: 8080 / styles /right-v9.json

Ви можете спробувати наш сервер tilehut.js. По суті, це все, що вам потрібно = розміщення плиток вектора та поставляється з приємними прикладами / документами ... і в поєднанні з openhift - це налаштування на 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 (векторний формат плитки)

Інші варіанти, які ви можете розглянути для подачі плитки;

Тегола (написано в ходу)

Плитка

Там гарне введення в цю тему тут