Conforme apresentado em uma palestra no FOSS4G, o Mapbox Studio permite criar blocos vetoriais do Mapbox e exportá-los como um .mbtiles
arquivo.
A biblioteca mapbox-gl.js pode ser usada para estilizar e renderizar dinamicamente blocos vetoriais do Mapbox no lado do cliente (navegador).
A parte que falta: como posso auto-hospedar blocos vetoriais do Mapbox ( .mbtiles
) para consumi-los com o mapbox-gl.js?
Eu sei que o Mapbox Studio pode carregar os blocos de vetor no servidor Mapbox e deixá-lo hospedar os blocos. Mas isso não é uma opção para mim, quero hospedar os blocos de vetor no meu próprio servidor.
A abordagem TileStream abaixo acabou sendo um beco sem saída. Veja minha resposta para uma solução funcional com o Tilelive.
Eu tentei o TileStream, que pode exibir imagens de .mbtiles
arquivos:
Minha página da web usa o 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>
e cria um mapboxgl.Map em um script JavaScript:
var map = new mapboxgl.Map({
container: 'map',
center: [46.8104, 8.2452],
zoom: 9,
style: 'c.json'
});
O c.json
arquivo de estilo configura a origem do bloco de vetores:
{
"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"
}
}]
}
... com a seguinte especificação TileJSON em tile.json
:
{
"tilejson": "2.1.0",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
... que aponta para o meu servidor TileStream em execução em localhost:8888
. O TileStream foi iniciado com:
node index.js start --tiles="..\tiles"
... onde a ..\tiles
pasta contém meu osm_roads.mbtiles
arquivo.
Com essa configuração, posso abrir minha página da Web, mas apenas ver a camada de plano de fundo. No rastreio da rede do navegador, posso ver que os blocos são realmente carregados quando aumento o zoom, mas o console de erros JavaScript do navegador contém vários erros no formulário
Error: Invalid UTF-8 codepoint: 160 in mapbox-gl.js:7
Como os blocos vetoriais não são .png
imagens, mas arquivos ProtoBuf, a URL dos blocos http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf
realmente faria mais sentido, mas isso não funciona.
Alguma ideia?
fonte
///
para definir o arquivo mbtiles em:tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
///
são necessários para Linux e OS X, como por exemplombtiles:///usr/local/osm_roads.mbtiles
. No Windows, porém, apenas dois//
são necessários se você especificar o disco como, por exemplombtiles://D/data/osm_roads.mbtiles
.A hospedagem dos blocos de vetor por conta própria é relativamente simples. O MBTiles contém arquivos .pbf que devem ser expostos à web. É isso aí.
Provavelmente, o mais fácil é usar um servidor de código aberto simples como o TileServer-PHP e colocar o arquivo MBTiles na mesma pasta que os arquivos do projeto. O TileServer faz toda a configuração de hospedagem para você (CORS, TileJSON, cabeçalhos gzip corretos, etc). Instalação significa apenas descompactar em um servidor da Web habilitado para PHP.
Se você deseja iniciar o TileServer-PHP no seu laptop, pode fazê-lo com o Docker. O contêiner pronto para usar está no DockerHub . No Mac OS X e Windows, ele é executado em alguns minutos com a interface gráfica do usuário Kitematic: https://kitematic.com/ . No Kitematic, procure por "tileserver-php" e inicie a máquina virtual / contêiner pronta para usar com o projeto dentro. Em seguida, clique em "Volumes" e solte na pasta seu arquivo MBTiles. Você recebe uma hospedagem em execução para seus blocos de vetor!
Esses blocos vetoriais podem ser abertos no MapBox Studio como uma fonte ou exibidos com o visualizador MapBox GL JS WebGL.
Tecnicamente, é possível hospedar os blocos vetoriais como uma pasta simples em qualquer servidor Web ou armazenamento em nuvem, ou mesmo no GitHub, se você descompactar o .pbf individual do contêiner MBtiles com um utilitário como mbutil , defina o CORS, TileJSON e gzip corretamente. Abaixo está um projeto do GitHub que demonstra essa abordagem também.
Experimente este visualizador:
e veja os repositórios relacionados:
fonte
Não para tocar minha buzina, mas https://github.com/spatialdev/PGRestAPI é um projeto no qual estou trabalhando para hospedar as exportações de mosaicos de vetores .mbtiles do Mapbox Studio.
Ainda precisa de muita documentação, mas, basicamente, solte seus arquivos .mbtiles em / data / pbf_mbtiles e reinicie o aplicativo do nó. Ele lerá essa pasta e oferecerá pontos de extremidade para seus blocos de vetor.
Ele também examinará / data / shapefiles e criará dinamicamente blocos vetoriais de Mapbox dinamicamente, com base no seu .shp. Você também pode apontar para uma instância do PostGIS e obter blocos vetoriais dinâmicos.
Nós os usamos em conjunto com https://github.com/SpatialServer/Leaflet.MapboxVectorTile , uma biblioteca Leaflet / Mapbox Vector Tile em que também estamos trabalhando.
fonte
Obrigado pela ótima pergunta. Eu não sabia que eles finalmente lançaram uma versão estável dos blocos de vetor. Além disso, você pode ter que trabalhar com essa resposta, pois ela é uma fonte de idéias para suas "alguma idéia?" Pergunta, questão. Ainda não tenho um estúdio de corrida.
Eu acho que um dos problemas que você está enfrentando é que você está usando um arquivo tilejson. Você precisa de um serviço tilejson para usar esse tipo de arquivo. Portanto, acredito que você precisa alterar sua seção de fontes para um URL in-line. Experimentar
ou
Quando eles usam
mapbox://
como protocolo, é uma notação de alias / abreviação para seus serviços. A seção de fontes foi discutida brevemente em torno das 8:40 do vídeo.Uma etapa do novo processo de mosaico vetorial é selecionar os dados vetoriais, ajustando o que você deseja nos dados. A outra etapa é trazer os dados vetoriais de volta para o MapBox Studio e renderizar os dados / criar uma folha de estilos. osm_roads seria o primeiro passo, enquanto o arquivo c.json é a folha de estilos. Você pode precisar de um vivo telha servidor versos um fluxo de azulejo como discutido em torno 15:01 do vídeo. O vídeo diz que você precisa de metadados adicionais no arquivo xml.
A singularidade aqui é que você faz referência ao .pbf e à folha de estilos em outro lugar, mas a URL que você fornece são os arquivos .png dos blocos resultantes, gerados a partir dos dados vetoriais.
Você não diz, se você tem uma chave MapBox. Para sua própria hospedagem, acredito que você precisará copiar os estilos e glifos do github para o seu próprio servidor. Observe novamente que existe um mapbox: // protocol na tag glyphs. Essas duas tags podem não ser necessárias porque você está processando linhas simples e polígonos e não POIs por meio de ícones. Vale a pena dar uma olhada.
Finalmente, o vídeo diz que você pode levar uma camada vetorial gerada de volta ao estúdio para estilizá-la. Você pode referenciar sua camada vetorial e aplicar seu estilo id: background e id: roads no estúdio primeiro. O vídeo diz que o tile live é o servidor nos bastidores do MapBox Studio. A idéia aqui é garantir que você tenha todos os problemas da etapa dois entendidos e corrigidos antes de tentar exibir os blocos vetoriais finais renderizados dinamicamente.
fonte
https://github.com/osm2vectortiles/tileserver-gl-light é muito mais fácil de usar do que as principais soluções mencionadas - não é necessário mexer nos arquivos JSON. Você acabou de executá-lo com
tileserver-gl-light filename.mbtiles
e então está servindo as peças para você. Ele funciona com os estilos predefinidos do Mapbox GL, como bright-v9; depois de executar o servidor, basta apontar o que estiver consumindo os blocos para
http: // localhost: 8080 / styles / bright-v9.json
fonte
Você pode experimentar o nosso servidor tilehut.js. Basicamente, faz tudo o que você precisa = hospedando blocos vetoriais e vem com bons exemplos / documentos ... e, em combinação com o openshift, é uma instalação de 5 minutos. Por favor, dê uma olhada:
https://github.com/bg/tilehut https://github.com/bg/tilehut/tree/master/examples/simplemap_vector https://github.com/bg/tilehut#your-own-hosted-tileserver- em 5 minutos
fonte
Super mais tarde, mas agora o GeoServer serve pbf's (formato de bloco vetorial)
fonte
Outras opções que você pode considerar para a veiculação de blocos;
Tegola (escrito em Go)
Ladrilhador
Há uma boa introdução a este tópico aqui
fonte