azulejos vectoriales de Mapbox de hospedaje automático

75

Tal como se presenta en un talk en FOSS4G Mapbox Studio permite crear mosaicos vectoriales de Mapbox y exportarlos como un archivo .mbtiles .

La biblioteca mapbox-gl.js se puede usar para diseñar y renderizar dinámicamente los mosaicos vectoriales de Mapbox en el cliente (navegador ) lado.

La parte faltante: ¿Cómo puedo alojar automáticamente los mosaicos vectoriales de Mapbox ( .mbtiles ) para poder consumirlos con mapbox-gl.js?

Sé que Mapbox Studio puede cargar los mosaicos vectoriales al servidor de Mapbox y dejar que aloje los mosaicos. Pero esa no es una opción para mí, quiero alojar los mosaicos vectoriales 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.

Probé TileStream que puede servir mosaicos de imágenes de .mbtiles files:

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 de JavaScript:

  var map = new mapboxgl.Map({
    container: 'map',
    center: [46.8104, 8.2452],
    zoom: 9,
    style: 'c.json'
  });

El archivo de estilo c.json configura el origen del 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 de 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 que se ejecuta en localhost:8888 . TileStream se ha iniciado con:

node index.js start --tiles="..\tiles"

... donde la carpeta ..\tiles contiene mi archivo osm_roads.mbtiles .

Con esta configuración, puedo abrir mi página web pero solo ver la capa de fondo. En la traza de la red del navegador, puedo ver que los mosaicos se cargan cuando me acerco, 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 de imágenes, sino archivos ProtoBuf, los URL de los mosaicos http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf realmente tendrían más sentido, pero eso no funciona.

¿Alguna idea?

    
pregunta Andreas Bilger 09.12.2014 - 21:31

7 respuestas

50

Como lo señaló @Greg, en lugar de TileStream (mi primer intento) debe usar Telelive para alojar tus propios mosaicos vectoriales.

Tilelive no es un servidor en sí, sino un marco de back-end que se ocupa de mosaicos en diferentes formatos de diferentes fuentes. Pero se basa en Node.js para que pueda convertirlo en un servidor de una manera bastante sencilla. Para leer los mosaicos de una fuente .mbtiles exportados por Mapbox Studio, necesita el node-mbtiles módulo tilelive.

Nota al margen: Mapbox Studio actual tiene un error en Windows y OS X que evita un% exportado .mbtiles archivo para mostrar en su destino elegido. Solución alternativa: simplemente tome el último archivo export-xxxxxxxx.mbtiles en ~/.mapbox-studio/cache .

Encontré dos implementaciones de servidor ( servidor de mosaicos ten20 por alexbirkett y TileServer by hanchao ) quienes usan Express.js como servidor de aplicaciones web.

Aquí está mi enfoque minimalista que se basa libremente en estas implementaciones:

  1. Instale Node.js
  2. Agarra los paquetes de nodo con npm install tilelive mbtiles express
  3. Implementar el servidor en el archivo 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'));
        });
    });
    

    Nota: los encabezados Access-Control-Allow-... habilitan el uso compartido de recursos de origen cruzado (CORS), por lo que las páginas web servidas desde un servidor diferente pueden acceder a los mosaicos.

  4. Ejecutalo con node server.js

  5. Configure la página web utilizando Mapbox GL JS en 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. Indique la ubicación del origen del mosaico y aplique un estilo a las capas con el siguiente 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. Sirve la página web y regocíjate.

respondido por el Andreas Bilger 14.12.2014 - 16:12
21

El alojamiento de los mosaicos vectoriales por su cuenta es relativamente sencillo. El MBTiles contiene archivos .pbf que deben estar expuestos a la web. Eso es todo.

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. El servidor TileServer hace toda la configuración de alojamiento por usted (CORS, TileJSON, encabezados de gzip correctos, etc.). La instalación significa simplemente desempaquetar 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 . Bajo Mac OS X y Windows, se ejecuta en un par de minutos con la interfaz gráfica de usuario de Kitematic: enlace . En Kitematic, solo busque "tileserver-php" e inicie el contenedor / máquina virtual listos para usar con el proyecto dentro. Luego haga clic en "Volúmenes" y suelte en la carpeta su archivo MBTiles. ¡Obtienes un hosting en ejecución para tus mosaicos vectoriales!

Tales 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 en GitHub, si desempaqueta el archivo .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 este enfoque también.

Prueba este visor:

yconsultelosrepositoriosrelacionados:

respondido por el Klokan Technologies GmbH 28.09.2015 - 02:09
12

No para tocar mi propia bocina, pero enlace es un proyecto en el que he estado trabajando. de Mapbox Studio.

Todavía se necesita mucha documentación, pero básicamente, suelte sus archivos .mbtiles en / data / pbf_mbtiles y reinicie la aplicación de nodo. Se leerá en esa carpeta y ofrecerá puntos finales para sus mosaicos vectoriales.

También buscará en / data / shapefiles y creará mosaicos dinámicos de Mapbox Vector 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 enlace , una biblioteca de Folleto / Mapbox Vector Tile en la que también hemos estado trabajando.

    
respondido por el Ryan Whitley 25.02.2015 - 21:52
10

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 su "¿alguna idea?" pregunta. Todavía no tengo un estudio de ejecución.

Creo que uno de los problemas con los que se está ejecutando es que está utilizando un archivo tilejson. Necesitas un servicio de tilejson para usar ese tipo de archivo. Por lo tanto, creo que necesita cambiar su sección de fuentes a una URL en línea. Intenta

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

o

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

Cuando usan mapbox:// como protocolo, es una notación alias / abreviada 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 vectorial es curar los datos vectoriales ajustando lo que desea en los datos. El otro paso es volver a traer los datos vectoriales a MapBox Studio y generar 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 azulejo en vivo y un flujo de azulejos como se comentó alrededor del 15:01 del video. El video dice que necesitas metadatos adicionales en el archivo xml.

La rareza aquí es que usted hace referencia a la hoja de estilo y .pbf en otra parte, pero la url que proporciona son los archivos .png de los mosaicos resultantes que se generan a partir de los datos vectoriales.

No dices, si tienes una clave de MapBox. Para su propio alojamiento, creo que tendrá que copiar los estilos y glifos de github a su propio servidor. Observe de nuevo que hay un protocolo mapbox: // en la etiqueta de glifos. Es posible que estas dos etiquetas no sean necesarias porque está representando líneas y polígonos simples y no puntos de interés mediante iconos. Vale la pena echar un vistazo.

Finalmente, el video dice que puedes llevar una capa vectorial generada al estudio para darle un estilo. Es posible que desee hacer referencia a su capa vectorial y aplicar primero su estilo id: background e id: roads 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 todos los problemas del paso dos se entienden y se solucionan antes de intentar mostrar los mosaicos de vectores finales que se representan dinámicamente.

    
respondido por el Greg 10.12.2014 - 03:43
4

enlace es mucho más fácil de usar que las principales soluciones mencionadas: no es necesario jugar con los archivos JSON. Solo ejecutalo con

tileserver-gl-light filename.mbtiles

y luego está sirviendo los azulejos para ti. Funciona con los estilos predefinidos de Mapbox GL como bright-v9; después de ejecutar el servidor, simplemente apunte lo que esté consumiendo los mosaicos a

enlace

    
respondido por el Mohan 20.11.2016 - 00:45
3

Es posible que desee probar nuestro servidor tilehut.js. Básicamente hace todo lo que necesita = hospedar mosaicos vectoriales y viene con buenos ejemplos / documentos ... y, en combinación con openshift, es una configuración de 5 minutos. Por favor, eche un vistazo:

enlace enlace enlace

    
respondido por el Benedikt Groß 06.01.2015 - 10:15
0

Súper tarde, pero ahora GeoServer sirve pdf's

    
respondido por el Bwyss 30.05.2017 - 23:06

Lea otras preguntas en las etiquetas