Як викладено в розмові на 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) {