Comme présenté lors d'une conférence à FOSS4G, Mapbox Studio permet de créer des tuiles vectorielles Mapbox et de les exporter sous forme de .mbtiles
fichier.
La bibliothèque mapbox-gl.js peut être utilisée pour styler et restituer dynamiquement des tuiles vectorielles Mapbox côté client (navigateur).
La partie manquante: Comment puis-je auto-héberger des tuiles vectorielles Mapbox ( .mbtiles
) afin de pouvoir les consommer avec mapbox-gl.js?
Je sais que Mapbox Studio peut télécharger les tuiles vectorielles sur le serveur Mapbox et le laisser héberger les tuiles. Mais ce n'est pas une option pour moi, je veux héberger les tuiles vectorielles sur mon propre serveur.
L’approche TileStream ci-dessous s’est révélée être une impasse. Voir ma réponse pour une solution de travail avec Tilelive.
J'ai essayé TileStream, qui peut servir de mosaïques d'images à partir de .mbtiles
fichiers:
Ma page Web utilise 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>
et il crée une mapboxgl.Map dans un script JavaScript:
var map = new mapboxgl.Map({
container: 'map',
center: [46.8104, 8.2452],
zoom: 9,
style: 'c.json'
});
Le c.json
fichier de style configure la source de tuiles vectorielles:
{
"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"
}
}]
}
... avec la spécification TileJSON suivante dans tile.json
:
{
"tilejson": "2.1.0",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
... qui pointe vers mon serveur TileStream en cours d'exécution localhost:8888
. TileStream a été lancé avec:
node index.js start --tiles="..\tiles"
... où le ..\tiles
dossier contient mon osm_roads.mbtiles
fichier.
Avec cette configuration, je peux ouvrir ma page Web mais ne voir que la couche d’arrière-plan. Dans la trace réseau du navigateur, je constate que les vignettes sont bien chargées lorsque je fais un zoom avant, mais la console d’erreur JavaScript du navigateur contient plusieurs erreurs de la forme.
Error: Invalid UTF-8 codepoint: 160 in mapbox-gl.js:7
Comme les tuiles vectorielles ne sont pas des .png
images mais plutôt des fichiers ProtoBuf, l'URL des tuiles http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf
aurait plus de sens, mais cela ne fonctionne pas.
Des idées?
///
pour définir le fichier mbtiles dans:tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {