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


81

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

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

Відповіді:


53

Як вказував @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. Обслуговуйте веб-сторінку і радійте.


2
зауважте, що вам потрібно три, ///щоб визначити файл mbtiles у:tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
CDavis

@cdavis: Це , здається, залежить від операційної системи: Три ///необхідно для Linux і OS X , як , наприклад mbtiles:///usr/local/osm_roads.mbtiles. В операційній системі Windows , проте тільки два //необхідні , якщо ви вкажете диск , як , наприклад mbtiles://D/data/osm_roads.mbtiles.
Андреас Більгер

Дійсно, дуже дякую, допомогли мені обслуговувати векторні mbtiles за 5 '!
Bwyss

Привіт Андреасе - я не зміг цього зробити - карта відображається, але це просто великий пустий сірий квадрат. Я не впевнений, звідки у вас джерело mbtiles. Я спробував експортувати деякі mbtiles за замовчуванням з мельниці.
mheavers

ви, здається, використовуєте localhost: 7777 / v2 / tile / для розташування ваших плиток, але де ви проходите цей шлях? Або що вам потрібно зробити, щоб переконатися, що експортований файл mbtiles обслуговує зображення на цьому шляху?
mheavers

26

Розміщення векторних плиток самостійно відносно просто. 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, що демонструє і такий підхід.

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

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


1
Це був найпростіший з усіх варіантів, описаних вище для мене, дякую за публікацію.
mheavers

PGRestAPI, звучить чудово, але для мене не вдалося встановити. Я ніколи не зможу успішно встановити PGRestAPI. Тож цей сервер плиткових файлів PHP - мій єдиний вибір, і він працює ідеально.
hoogw

Це найцікавіше, чи можете ви детальніше налаштувати правильну настройку CORS та TileJSON для обслуговування файлів pbf? Я завантажив файл pbf з download.geofabrik.de/europe, однак пов'язаний проект містить багато каталогів з багатьма файлами pbf.
php_nub_qq

12

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

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

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

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


1
На жаль, PGRestAPI вже не активно розвивається
raphael

10

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

Я думаю, що однією з проблем, з якою ви стикаєтесь, є те, що ви використовуєте файл 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. Ідея тут полягає в тому, щоб переконатися, що ви зрозуміли та вирішили всі кроки два проблеми, перш ніж спробувати подати кінцеві векторні плитки, які динамічно відображаються.


Гаразд, дякую @Greg за ваші ідеї. Буду далі досліджувати та повертатись із моїми висновками.
Андреас Більгер

4

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

tileserver-gl-light filename.mbtiles

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

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


3

Ви можете спробувати наш сервер 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 хвилин


1

Супер пізніше, але тепер GeoServer обслуговує pbf (векторний формат плитки)


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.