Visualizador de MBTiles vetoriais: abra blocos vetoriais online, grátis

Um visualizador de MBTiles vetoriais que funciona no navegador

Um arquivo MBTiles é um mapa em blocos inteiro dentro de um único arquivo. Lá dentro existe um pequeno banco de dados SQLite: uma tabela com os blocos e outra com informações sobre eles. Os MBTiles vetoriais guardam Mapbox Vector Tiles, blocos binários compactos com ruas, prédios, rios, limites e seus atributos, prontos para receber o estilo de um app de mapas. Eles são criados com ferramentas como tippecanoe, Planetiler, OpenMapTiles e QGIS, e estão por trás de muitos mapas MBTiles offline e hospedados por conta própria.

O problema começa quando você quer olhar dentro. O computador não sabe abrir o arquivo, os visualizadores de imagem não veem nada e a maioria dos visualizadores online só mostra blocos raster. Para ver um MBTiles vetorial, normalmente você precisa de um servidor de blocos, um estilo e um pouco de JavaScript, ou de um programa de SIG completo. Este visualizador de MBTiles vetoriais online pula tudo isso: solte o arquivo, e ele lê o banco de dados, decodifica os blocos vetoriais no navegador e desenha cada camada no mapa com sua própria cor.

Ele foi feito tanto para conferir quanto para ver. Você pode clicar em qualquer feição para ler os atributos, ligar e desligar camadas, ver quanto pesam os blocos em cada nível de zoom e quais são os maiores, e conferir o arquivo pelas especificações do MBTiles e dos blocos vetoriais. No fim, exporte as feições da vista em GeoJSON, salve um PNG do mapa ou baixe um relatório técnico para um colega ou cliente. Minha opinião: rode as verificações antes de colocar um tileset em um servidor. A maioria dos problemas de "meu mapa aparece em branco" é uma linha de metadados faltando ou uma faixa de zoom errada, e é bem mais fácil corrigir antes de publicar.

O que o visualizador de MBTiles vetoriais faz

Aqui está tudo o que a ferramenta faz, na ordem em que você vai encontrar.

1. Abra o arquivo. Arraste um arquivo .mbtiles para o mapa ou clique em "Abrir MBTiles". Arquivos de até 300 MB abrem no navegador com o motor SQLite sql.js. "Testar um exemplo" carrega um pequeno tileset mundial com países, lagos, rios e cidades, para você ver a ferramenta funcionando na hora.
2. Veja o mapa na hora. A ferramenta lê a extensão e o centro dos metadados e aproxima dos dados. Cada camada é desenhada em um canvas com sua própria cor: polígonos como preenchimentos claros, linhas como traços e pontos como círculos. Nomes de camada comuns como water, landuse, building, transportation e place recebem cores naturais.
3. Trabalhe com as camadas. A aba Camadas lista cada camada dos metadados e dos blocos com seus tipos de geometria, o número de feições em uma amostra e todos os campos com um valor de exemplo. Ligue e desligue camadas, clique em "Só esta" para ver uma camada sozinha ou clique no quadradinho de cor para escolher sua própria cor.
4. Clique para inspecionar feições. Clique no mapa e um cartão mostra cada feição naquele ponto nas camadas visíveis: camada, tipo de geometria, ID e todos os atributos. A feição fica destacada no mapa, e você pode copiá-la como GeoJSON ou baixar o bloco inteiro como arquivo .pbf bruto.
5. Leia as informações do arquivo. A aba Arquivo mostra os metadados em palavras simples: nome, descrição, atribuição, versão, formato, compactação, faixa de zoom, extensão, centro, a ferramenta que o gerou (por exemplo tippecanoe) e o tamanho do arquivo e dos dados dos blocos.
6. Confira os blocos. A aba Blocos mostra o número de blocos, o tamanho total, médio e máximo por nível de zoom e os dez maiores blocos do arquivo. Clique em "Ver" para ir até um bloco. A opção de grade desenha cada borda de bloco com seu z/x/y e tamanho.
7. Rode as verificações. A aba Verificações testa o arquivo: tabela tiles, metadados, formato, compactação, a lista vector_layers do json, camadas fora dos metadados, extensão, centro, a faixa de zoom comparada aos blocos reais, blocos acima de 500 KB e atribuição. Cada verificação aparece como OK, aviso ou erro, com uma explicação simples.
8. Aproxime além dos dados. Os blocos vetoriais continuam nítidos quando você aproxima além do último nível de zoom, então o visualizador continua desenhando os blocos mais profundos ampliados ("overzoom"). Abaixo do primeiro nível, um aviso pede para você aproximar.
9. Ajuste a exibição. Mude a opacidade do preenchimento e a espessura da linha, ligue ou desligue os rótulos de lugares e adicione um mapa de ruas ou de satélite para se orientar. Sem mapa base, nada é carregado de outros servidores.
10. Exporte. Baixe as feições visíveis em GeoJSON, a vista do mapa em PNG, os metadados em JSON ou um relatório técnico com as verificações, camadas, campos, estatísticas dos blocos e recomendações.

O arquivo é lido com JavaScript e WebAssembly dentro da aba do navegador. Ele nunca é enviado, então o visualizador é seguro também para dados privados ou licenciados.

Como ver um arquivo MBTiles vetorial, passo a passo

Um exemplo real com o tileset mundial de exemplo (dados do Natural Earth, zoom 0 a 5).

1

Passo 1: Abra o visualizador de MBTiles vetoriais

A ferramenta abre com um mapa vazio e uma área para soltar arquivos. Arraste seu arquivo .mbtiles, clique para escolher um arquivo ou clique em "Testar um exemplo".

2

Passo 2: Carregue o arquivo

O visualizador lê o banco SQLite, aproxima da extensão e desenha as quatro camadas: países como preenchimentos cinza, lagos em azul, rios como linhas azuis e cidades como pontos vermelhos com rótulos.

3

Passo 3: Explore as camadas

A aba Camadas lista cada camada com sua geometria, as feições encontradas em uma amostra e cada campo com um valor de exemplo. Aqui só rios e cidades estão ligados, com a vista sobre a Europa.

4

Passo 4: Clique em uma feição

Clique em uma cidade. O cartão mostra a camada, o tipo de geometria, o ID e todos os atributos, e a feição fica destacada. Você pode copiá-la como GeoJSON ou baixar o bloco de onde ela veio.

5

Passo 5: Leia as informações do arquivo

A aba Arquivo transforma a tabela metadata em informações claras: nome, atribuição, formato, compactação gzip, zoom 0 a 5, extensão, centro e tamanho do arquivo.

6

Passo 6: Confira os blocos

A aba Blocos mostra blocos e tamanhos por nível de zoom e os maiores blocos. Com a grade ligada, cada borda de bloco é desenhada com seu z/x/y e tamanho guardado.

7

Passo 7: Rode as verificações

A aba Verificações testa o arquivo pelas regras do MBTiles e dos blocos vetoriais. O exemplo passa em todas; um arquivo real costuma mostrar um ou dois avisos, cada um com sua explicação.

8

Passo 8: Baixe o relatório

O relatório técnico reúne em uma página o resumo, uma prévia do mapa, as verificações, os metadados, cada camada e campo, as estatísticas dos blocos e recomendações. Imprima ou salve em PDF.

Como abrir um arquivo MBTiles: suas opções

Existem várias formas de abrir um arquivo MBTiles. A certa depende do que você quer: só olhar, conferir ou usar em um projeto.

1. No navegador, com este visualizador. O jeito mais rápido de ver o que há dentro de um arquivo vetorial: sem instalar nada, sem servidor, no Windows, Mac, Linux e em tablets. Ideal para conferir um tileset, ler atributos e compartilhar um relatório. Para MBTiles raster (blocos PNG, JPEG, WebP), use o visualizador de MBTiles deste site.
2. No QGIS. O QGIS 3.14 ou mais novo abre MBTiles vetoriais direto: arraste o arquivo para o mapa ou use Camada → Adicionar camada → Adicionar camada de blocos vetoriais. MBTiles raster abrem em Camada → Adicionar camada → Adicionar camada raster. Bom para combinar os blocos com outros dados de SIG.
3. Com um servidor de blocos. TileServer GL, Martin e mbtileserver leem um arquivo MBTiles e servem seus blocos por HTTP, para que um mapa web no MapLibre GL JS, Mapbox GL JS ou Leaflet possa usá-los. É assim que os mapas MBTiles costumam ser publicados.
4. Como PMTiles. Converta o arquivo para PMTiles (há um conversor grátis neste site) e coloque esse único arquivo em qualquer hospedagem estática ou armazenamento de objetos. O MapLibre lê direto, sem servidor de blocos.
5. No celular ou GPS. Muitos apps de mapa offline carregam arquivos MBTiles para uso sem conexão. Confira qual formato de bloco o app espera: alguns só aceitam blocos raster.
6. Como banco de dados. Como MBTiles é SQLite, o DB Browser for SQLite ou a linha de comando sqlite3 também abrem o arquivo. Você vê as tabelas e os blobs binários, não o mapa, mas é útil para corrigir uma linha de metadados.

Uma coisa é igual em todo lugar: um arquivo MBTiles traz dados, não um estilo. Cada app decide como colorir as camadas. Este visualizador escolhe as cores automaticamente para você ver a estrutura sem escrever um estilo antes.

Como o visualizador lê e desenha blocos vetoriais

Abrir um MBTiles vetorial leva quatro passos: ler o banco SQLite, achar o bloco certo, descompactar e decodificar e, por fim, desenhar. Veja exatamente o que acontece, com as fórmulas.

CREATE TABLE metadata (name text, value text);
CREATE TABLE tiles (zoom_level integer, tile_column integer,
                    tile_row integer, tile_data blob);

linhas de metadata:  name, format = pbf, minzoom, maxzoom, bounds,
                     center, attribution, description, json, …
estatísticas:        SELECT zoom_level, COUNT(*), SUM(LENGTH(tile_data)),
                     MAX(LENGTH(tile_data)) FROM tiles GROUP BY zoom_level

n = 2^z                                   blocos por lado no zoom z
x = ⌊(λ + 180) / 360 × n⌋
y = ⌊(1 − ln(tan φ + sec φ) / π) / 2 × n⌋   linha do mapa web (a partir do norte)

tile_row = n − 1 − y                        linha do MBTiles (a partir do sul)

exemplo  z = 5, x = 16, y = 10  →  tile_row = 32 − 1 − 10 = 21

1F 8B …        gzip       (a maioria: tippecanoe, Planetiler, OpenMapTiles)
78 01/5E/9C/DA zlib       (algumas ferramentas antigas)
qualquer outro sem compactação

89 50 4E 47    PNG  ┐
FF D8          JPEG ├  blocos raster: não é um arquivo vetorial
52 49 46 46    WebP ┘

varint   300 = 1010 1100  0000 0010  → 0101100 + 0000010 × 128 = 300
zigzag   0 → 0,  −1 → 1,  1 → 2,  −2 → 3,  2 → 4
         decodificar: n = (z >>> 1) ^ −(z & 1)

Tile     { layers = 3 }
Layer    { name = 1, features = 2, keys = 3, values = 4, extent = 5, version = 15 }
Feature  { id = 1, tags = 2, type = 3, geometry = 4 }
tags     [índice da chave, índice do valor, índice da chave, índice do valor, …]

comando = (contagem << 3) | id     MoveTo = 1, LineTo = 2, ClosePath = 7

9  = (1 << 3) | 1   MoveTo, 1 ponto
     parâmetros 50, 34  →  +25, +17   cursor (25, 17)
18 = (2 << 3) | 2   LineTo, 2 pontos
     parâmetros 0, 18, 18, 0  →  (25, 26), (34, 26)
15 = (1 << 3) | 7   ClosePath

anéis de polígono: área > 0  anel externo (sentido horário na tela)
                   área < 0  buraco
área = ½ Σ (x_j·y_i − x_i·y_j)       fórmula de Gauss, y para baixo

escala = 256 × f / extent          f = 2^(z_mapa − z_dados)
deslocamento = (x mod f, y mod f) × 256   parte do bloco pai a mostrar

exemplo  dados até z 14, mapa em z 16
  f = 4, escala = 256 × 4 / 4096 = 0.25 px por unidade
  o bloco (x, y) do mapa usa o bloco de dados (⌊x/4⌋, ⌊y/4⌋)

unidades por pixel = extent / (256 × 2^(z_mapa − z_dados))

ponto     selecionado se a distância ≤ 7 px
linha     selecionada se a distância a um segmento ≤ 5 px
          d² = |p − a − t(b − a)|²,  t = clamp(((p − a)·(b − a)) / |b − a|², 0, 1)
polígono  selecionado se um raio a partir do ponto cruza os anéis um número ímpar de vezes

tamanho guardado = LENGTH(tile_data)          bytes, ainda compactados
tamanho médio    = SUM(tamanho) / COUNT(*)     por nível de zoom
cobertura        = blocos / 4^z                parte da grade mundial

referência       maior bloco < 500 KB  (512.000 bytes)

MBTiles e os formatos de exportação em detalhe

O que há dentro de um arquivo MBTiles, como os MBTiles vetoriais e raster se diferenciam e o que cada download deste visualizador contém.

metadata.json = {
  "vector_layers": [
    { "id": "cities", "minzoom": 0, "maxzoom": 5,
      "fields": { "name": "String", "pop_max": "Number" } } ],
  "tilestats": { "layerCount": 1, "layers": [ … ] }
}

{ "type": "Feature", "id": 812,
  "properties": { "name": "Lyon", "pop_max": 1423000,
                  "_layer": "cities", "_tile": "5/16/11" },
  "geometry": { "type": "Point", "coordinates": [4.8320114, 45.7578137] } }

Todas as exportações são criadas no seu navegador a partir do arquivo aberto. Nada é enviado a um servidor.

Quem usa um visualizador de MBTiles vetoriais

Os blocos vetoriais ficam entre os dados e o mapa, então muita gente diferente precisa olhar dentro deles.

1. Desenvolvedores de mapas web. Confira um tileset antes de escrever um estilo do MapLibre ou do Mapbox GL: quais camadas existem, como os campos se chamam e em que níveis de zoom os dados aparecem. A lista de campos e os valores de exemplo poupam muita tentativa e erro.
2. Analistas de SIG. Confirme que uma exportação do tippecanoe, Planetiler ou QGIS tem o que você espera, com os atributos e a faixa de zoom certos, antes de entregar.
3. DevOps e administradores de servidores de blocos. Encontre blocos grandes demais, metadados faltando e faixas de zoom erradas antes de publicar no TileServer GL, no Martin ou em uma CDN, e guarde o relatório como registro.
4. Mapeamento offline e de campo. Confira se os mapas MBTiles carregados em tablets ou coletores de campo cobrem a área e os níveis de zoom certos antes de ficar sem sinal.
5. Compradores e revisores de dados. Veja um tileset vetorial de um fornecedor sem instalar nada, percorra os atributos e devolva o relatório.
6. Estudantes e professores. Veja como os blocos vetoriais funcionam de verdade: ligue a grade, compare tamanhos de bloco entre níveis de zoom e observe o overzoom manter as linhas nítidas.
7. Publicadores de dados abertos. Confira a atribuição, a extensão e a descrição nos metadados antes de publicar um tileset, para que os usuários tenham o crédito e a vista inicial corretos.
8. Suporte e relatórios de bug. Quando um mapa mostra um buraco ou uma feição quebrada, ache o bloco, baixe como .pbf e anexe ao chamado junto com o relatório.

Perguntas frequentes sobre MBTiles e blocos vetoriais

As 20 perguntas mais comuns sobre arquivos MBTiles e este visualizador.

Especificações, software e créditos dos dados

O visualizador se baseia em especificações e software abertos:

• MBTiles Specification (Mapbox) · Specification
  Especificação MBTiles da Mapbox: a estrutura SQLite do arquivo, a ordem de linhas TMS e as linhas de metadados que o visualizador confere.
• Mapbox Vector Tile Specification · Specification
  Especificação Mapbox Vector Tile: a estrutura protobuf, os comandos de geometria e as regras de orientação que o decodificador segue.
• sql.js · MIT
  SQLite compilado para WebAssembly, usado para abrir o banco .mbtiles no navegador.
• Leaflet 1.9 · BSD-2-Clause
  Mapa interativo e a camada de grade em canvas que desenha os blocos.
• Natural Earth · Public domain
  Dados de domínio público usados para criar o tileset de exemplo (países, lagos, rios e cidades na escala 1:50m).
• Protomaps (hosted by KONAKTIVE), CARTO, OpenStreetMap, Esri World Imagery · ODbL and provider terms
  Mapas base opcionais: blocos vetoriais próprios hospedados pela KONAKTIVE, com CARTO e OpenStreetMap como reserva, e Esri World Imagery.

O decodificador de blocos vetoriais, o renderizador, as verificações e todas as exportações foram escritos para este site e rodam inteiramente no seu navegador.

Ferramentas relacionadas de blocos e arquivos SIG