Como se presentó en una charla en FOSS4G, Mapbox Studio permite crear mosaicos vectoriales de Mapbox y exportarlos como un .mbtiles
archivo.
La biblioteca mapbox-gl.js se puede usar para diseñar y representar dinámicamente mosaicos vectoriales de Mapbox en el lado del cliente (navegador).
La parte que falta: ¿cómo puedo alojar los mosaicos vectoriales de Mapbox ( .mbtiles
) para poder consumirlos con mapbox-gl.js?
Sé que Mapbox Studio puede cargar los mosaicos vectoriales en el servidor de Mapbox y dejar que aloje los mosaicos. Pero esa no es una opción para mí, quiero alojar los mosaicos de vectores en mi propio servidor.
El enfoque de TileStream a continuación resultó ser un callejón sin salida. Vea mi respuesta para una solución de trabajo con Tilelive.
Intenté TileStream, que puede servir mosaicos de imágenes de .mbtiles
archivos:
Mi página web usa 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>
y crea un mapboxgl.Map en un script JavaScript:
var map = new mapboxgl.Map({
container: 'map',
center: [46.8104, 8.2452],
zoom: 9,
style: 'c.json'
});
El c.json
archivo de estilo configura la fuente de mosaico vectorial:
{
"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"
}
}]
}
... con la siguiente especificación TileJSON en tile.json
:
{
"tilejson": "2.1.0",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
... que apunta a mi servidor TileStream ejecutándose en localhost:8888
. TileStream se ha iniciado con:
node index.js start --tiles="..\tiles"
... donde la ..\tiles
carpeta contiene mi osm_roads.mbtiles
archivo.
Con esta configuración, puedo abrir mi página web pero solo ver la capa de fondo. En el rastreo de la red del navegador, puedo ver que los mosaicos se cargan cuando hago un acercamiento, pero la consola de errores de JavaScript del navegador contiene varios errores del formulario
Error: Invalid UTF-8 codepoint: 160 in mapbox-gl.js:7
Dado que los mosaicos vectoriales no son .png
imágenes, sino más bien archivos ProtoBuf, la URL de los mosaicos en http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf
realidad tendría más sentido, pero eso no funciona.
¿Algunas ideas?
fuente
///
para definir el archivo mbtiles en:tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
///
se necesitan tres para Linux y OS X como por ejemplombtiles:///usr/local/osm_roads.mbtiles
. En Windows sin embargo, sólo dos//
son necesarios si se especifica el disco, como por ejemplombtiles://D/data/osm_roads.mbtiles
.El alojamiento de los mosaicos vectoriales por su cuenta es relativamente sencillo. Los MBTiles contienen archivos .pbf que deben exponerse a la web. Eso es.
Probablemente lo más fácil es usar un servidor de código abierto simple como TileServer-PHP y colocar el archivo MBTiles en la misma carpeta que los archivos del proyecto. TileServer hace toda la configuración de alojamiento por usted (CORS, TileJSON, encabezados gzip correctos, etc.). La instalación significa simplemente desempacar en un servidor web habilitado para PHP.
Si desea iniciar TileServer-PHP en su computadora portátil, puede hacerlo con Docker. El contenedor listo para usar está en DockerHub . En Mac OS X y Windows, se ejecuta en un par de minutos con la interfaz gráfica de usuario de Kitematic: https://kitematic.com/ . En Kitematic solo busque "tileserver-php" e inicie la máquina virtual / contenedor lista para usar con el proyecto dentro. Luego haga clic en "Volúmenes" y suelte en la carpeta su archivo MBTiles. ¡Obtienes un hosting para tus mosaicos vectoriales!
Dichos mosaicos vectoriales podrían abrirse en MapBox Studio como fuente, o mostrarse con el visor MapBox GL JS WebGL.
Técnicamente, incluso es posible alojar los mosaicos vectoriales como una carpeta simple en cualquier servidor web o almacenamiento en la nube, o incluso GitHub, si desempaqueta el .pbf individual del contenedor de MBtiles con una utilidad como mbutil , configure CORS, TileJSON y gzip correctamente. Bellow es un proyecto de GitHub que demuestra ese enfoque también.
Prueba este visor:
y ver los repositorios relacionados:
fuente
No para sonar mi propia bocina, pero https://github.com/spatialdev/PGRestAPI es un proyecto en el que he estado trabajando que aloja las exportaciones de mosaicos de vectores .mbtiles de Mapbox Studio.
Todavía necesita mucha documentación, pero básicamente, suelte sus archivos .mbtiles en / data / pbf_mbtiles y reinicie la aplicación de nodo. Leerá a través de esa carpeta y ofrecerá puntos finales para sus mosaicos vectoriales.
También se verá a través de / data / shapefiles, y creará mosaicos vectoriales dinámicos de Mapbox sobre la marcha en función de su .shp. También puede apuntar a una instancia de PostGIS y obtener mosaicos vectoriales dinámicos.
Los usamos junto con https://github.com/SpatialServer/Leaflet.MapboxVectorTile , una biblioteca de mosaicos vectoriales de folleto / mapa en la que también hemos estado trabajando.
fuente
Gracias por la gran pregunta. No sabía que finalmente habían lanzado una versión estable de los mosaicos vectoriales. Además, es posible que tenga que trabajar con esta respuesta, ya que es una fuente de ideas para sus "¿alguna idea?" pregunta. Todavía no tengo un estudio de funcionamiento.
Creo que uno de los problemas con los que se encuentra es que está utilizando un archivo tilejson. Necesita un servicio tilejson para usar ese tipo de archivo. Por lo tanto, creo que debe cambiar su sección de fuentes a una URL en línea. Tratar
o
Cuando se usan
mapbox://
como protocolo, es una notación de alias / abreviatura para sus servicios. La sección de fuentes se discutió brevemente alrededor de las 8:40 del video.Un paso del nuevo proceso de mosaico de vectores es curar los datos del vector ajustando lo que desea en los datos. El otro paso es traer los datos del vector nuevamente a MapBox Studio y renderizar los datos / crear una hoja de estilo. osm_roads sería el primer paso mientras que su archivo c.json es la hoja de estilo. Es posible que necesite un servidor de mosaico en vivo con una secuencia de mosaico como se discutió alrededor de las 15:01 del video. El video dice que necesita metadatos adicionales en el archivo xml.
Lo extraño aquí es que hace referencia al .pbf y la hoja de estilo en otro lugar, pero la url que proporciona son los archivos .png de mosaicos resultantes que se generan a partir de los datos vectoriales.
No diga si tiene una clave MapBox. Para su propio alojamiento, creo que tendrá que copiar los estilos y glifos de github a su propio servidor. Observe nuevamente que hay un protocolo mapbox: // en la etiqueta de glifos. Es posible que estas dos etiquetas no sean necesarias porque representa líneas planas y polígonos y no PDI a través de iconos. Vale la pena echarle un vistazo.
Finalmente, el video dice que puedes llevar una capa vectorial generada nuevamente al estudio para darle estilo. Es posible que desee hacer referencia a su capa vectorial y aplicar primero su estilo id: fondo e id: carreteras en el estudio. El video dice que tile live es el servidor detrás de la escena de MapBox Studio. La idea aquí es asegurarse de que tiene todos los problemas del paso dos entendidos y solucionados antes de intentar servir los mosaicos de vectores finales que se representan dinámicamente.
fuente
https://github.com/osm2vectortiles/tileserver-gl-light es mucho más fácil de usar que las principales soluciones mencionadas: no es necesario jugar con archivos JSON. Solo lo ejecutas con
tileserver-gl-light filename.mbtiles
y luego te sirve los azulejos. Funciona con los estilos predefinidos de Mapbox GL, como bright-v9; después de ejecutar el servidor, simplemente señala lo que está consumiendo los mosaicos
http: // localhost: 8080 / styles / bright-v9.json
fuente
Es posible que desee probar nuestro servidor tilehut.js. Básicamente hace todo lo que necesita = alojar mosaicos vectoriales y viene con buenos ejemplos / documentos ... y está en combinación con openshift, es una cosa de configuración de 5 minutos. Por favor échale un vistazo:
https://github.com/bg/tilehut https://github.com/bg/tilehut/tree/master/examples/simplemap_vector https://github.com/bg/tilehut#your-own-hosted-tileserver- en 5 minutos
fuente
Súper más tarde, pero ahora GeoServer sirve pbf (formato de mosaico vectorial)
fuente
Otras opciones que puede considerar para servir azulejos;
Tegola (Escrito en Go)
Solador
Hay una buena introducción a este tema aquí
fuente