Blog SIG & Territórios

Introdução: O que é o formato MBTiles?

O formato MBTiles é um formato de arquivo para armazenar blocos de mapas (raster ou vetoriais) em um banco de dados SQLite, um mecanismo de banco de dados leve e autônomo.

Inicialmente projetado pela Mapbox, esse formato foi amplamente adotado nas comunidades de GIS, cartografia e mapeamento da Web por sua portabilidade, facilidade de uso e compatibilidade com várias ferramentas.

Em termos práticos, um arquivo .mbtiles é um banco de dados único que pode conter milhares ou até milhões de blocos geográficos organizados por níveis de zoom, colunas e linhas. Isso evita a necessidade de uma estrutura de árvore complexa de arquivos no disco e, ao mesmo tempo, facilita a distribuição (na Web, via USB ou em modo desconectado).

O formato MBTiles pode conter :

• Ladrilhos rasterizados (geralmente PNG ou JPEG),
• Ou blocos vetoriais (no formato MVT – Mapbox Vector Tiles),
• E metadados (descrição, atribuição, formato, etc.).

Graças ao seu formato SQLite, o MBTiles pode ser facilmente lido com ferramentas como sqlite3, DB Browser for SQLite, ou operado por meio de servidores leves (como Flask ou TileServer-PHP), o que o torna altamente adequado para treinamento, demonstrações ou uso off-line.

Estrutura interna de um arquivo MBTiles

Um arquivo MBTiles é um banco de dados SQLite estruturado de acordo com um esquema simples e padronizado, que permite que os blocos de mapas sejam armazenados de forma eficiente em formato raster (PNG, JPEG) ou vetorial (PBF).

1. As tabelas principais

De acordo com a especificação oficial (https://github.com/mapbox/mbtiles-spec), um arquivo .mbtiles contém pelo menos :

a) tiles

Essa é a tabela central. Ela contém os blocos codificados, cada um identificado por suas coordenadas de zoom, coluna (x) e linha (y):

CREATE TABLE tiles (
zoom_level INTEGER,
tile_column INTEGER,
tile_row INTEGER,
tile_data BLOB
);

Observação: Os MBTiles usam o sistema de coordenadas TMS (Tile Map Service), o que significa que o eixo vertical (Y) está invertido em relação ao esquema XYZ usado pelo Leaflet. Alguns servidores ou visualizadores corrigem isso automaticamente.

b) metadados

Essa tabela contém informações gerais sobre o arquivo e os blocos que ele contém, por exemplo, :

CREATE TABLE metadata (
  name TEXT,
  value TEXT
);

Alguns campos comuns:

• name: nome do conjunto de blocos;
• format: formato do bloco (png, jpg, pbf);
• minzoom, maxzoom: níveis de zoom disponíveis;
• bounds: extensão geográfica (minlon,minlat,maxlon,maxlat) ;
• centro: coordenadas do centro do mapa (lon,lat,zoom) ;
• type: tipo de mapa (baselayer, overlay);
• descrição: texto explicativo.

2.Indexação

Os arquivos MBTiles podem incluir índices para acelerar o acesso aos blocos, mas isso não é obrigatório.

3.Outras visualizações e variantes

Algumas ferramentas (como o MapTiler ou o TileMill) geram visualizações adicionais ou esquemas alternativos, como a visualização de mapa associada a uma tabela de imagens em um formato otimizado (deduplicação de blocos).

Por exemplo:

CREATE TABLE images (
  tile_id TEXT,
  tile_data BLOB
);

CREATE TABLE map (
  zoom_level INTEGER,
  tile_column INTEGER,
  tile_row INTEGER,
  tile_id TEXT
);

Isso permite que cada imagem seja armazenada apenas uma vez, mesmo que seja usada em várias coordenadas.

Aqui está uma comparação clara entre os dois tipos de conteúdo que o formato MBTiles pode armazenar:

Raster vs. Vetor: dois tipos de blocos em arquivos MBTiles

O formato MBTiles é versátil: ele pode conter blocos rasterizados (imagens) ou vetoriais (dados geográficos codificados). Cada abordagem tem suas vantagens e é adequada para diferentes usos.

1.MBTiles Raster

• Conteúdo: imagens PNG ou JPEG (raramente WebP).
• Uso: mapas base pré-renderizados, mapas estáticos, mapas históricos, ortofotos, etc.
• Formato declarado: campo de formato = png ou jpg na tabela de metadados.
• Exibição: diretamente compatível com a maioria das bibliotecas, como Leaflet, OpenLayers ou MapLibre, por meio de um servidor de blocos (local ou remoto).

• Vantagens:

  • Muito simples de implementar.
  • Renderização consistente em todas as plataformas.
  • Sem processamento no lado do cliente.

• Limitações:

  • Sem interatividade nativa (sem clique na entidade).
  • Maior peso: uma imagem por bloco.
  • Menos flexível no caso de mudanças de estilo.

2.MBTiles de vetor (VectorTiles)

• Conteúdo: dados vetoriais codificados no formato Mapbox Vector Tile (MVT, .pbf).
• Uso: mapas dinâmicos, interativos e com vários estilos (OpenStreetMap, mapas personalizados).
• Formato declarado: campo format = pbf na tabela de metadados.
• Exibição: requer uma biblioteca que suporte a renderização vetorial (MapLibre GL, Mapbox GL JS, etc.).
• Vantagens:

  • Leve: um único arquivo pode conter vários estilos.
  • Muito rápido para carregar com o mecanismo de renderização correto.
  • Interativo: as entidades podem ser interrogadas em tempo real.

• Limitações:

  • Requer um renderizador no lado do cliente ou um servidor como o tileserver-gl.
  • Geração mais complexa.
  • Ainda não é compatível com todas as plataformas (o Leaflet, por exemplo, não é compatível diretamente com elas).

Em poucas palavras

Geração de arquivos MBTiles: ferramentas e fluxos de trabalho

MBTiles Raster (imagens)

Os blocos rasterizados geralmente são gerados a partir de um mapa exibido em um software GIS ou em um mecanismo de renderização cartográfica. Aqui estão as principais ferramentas:

ToolDescriptionTypeQGISPlugin “Export as tiles” (ou Processing → Generate XYZ tiles) Graphical interface GDALgdal2tiles.py with the –mbtiles option (since GDAL 3. 1) Linha de comando TileMill (antigo) Criação de tiles PNG via Mapnik Interface gráficaMapTiler Desktop Interface completa para criação de MBTiles (versão gratuita limitada) Interface gráficatippecanoe + rasterização Fluxo de trabalho híbrido: rasterização upstream, se necessário Linha de comandoMapProxy Gera dinamicamente e pode exportar para MBTiles Servidor/cache

Caso de uso típico: mapa turístico, ortofoto, mapa digitalizado.

2.Mosaicos vetoriais MBTiles

Os blocos vetoriais exigem codificação em PBF e corte em blocos de acordo com o padrão MVT (Mapbox Vector Tile). Isso requer ferramentas especializadas:

Caso de uso típico: mapa interativo da cidade, planos de fundo personalizáveis, projetos altamente interativos.

Estrutura interna de um arquivo MBTiles

Um arquivo .mbtiles é um banco de dados SQLite que contém blocos geográficos organizados de acordo com um esquema padronizado, que varia ligeiramente entre os formatos raster e vetorial.

Tabelas principais

tiles (ou mapa + imagens para vetores com várias partes)

Observação: no formato vetorial, algumas implementações, como o tilemaker, separam os metadados da imagem (imagens) e as posições (mapa). Nesse caso, é criada uma visualização de blocos que os combina.

metadados

Tabela de valores-chave (chave = texto, valor = texto) contendo informações essenciais para a interpretação do arquivo.

(optional) grids, grid_data, keymap

Usado para o formato UTFGrid, uma forma obsoleta de interatividade em planos de fundo raster.

Observações importantes

• As coordenadas de tile_row geralmente são invertidas, dependendo do sistema de blocos:

  • TMS (Tile Map Service): a origem é o canto inferior esquerdo.
  • XYZ (padrão da Web): a origem está no canto superior esquerdo.
  • A maioria dos servidores e visualizadores modernos usa XYZ.

• O campo tile_data contém :

  • Uma imagem compactada (png, jpg) para rasterização.
  • Um objeto PBF compactado com zlib para blocos vetoriais.

• Para blocos de vetores, o campo json em metadados pode conter:

  • { “vector_layers”: [ { “id”: “buildings”, “description”: “”, “minzoom”: 12, “maxzoom”: 16, “fields”: { “name”: “String”, “height”: “Number” } } ] }

Uso do MBTiles com o Leaflet

O Leaflet é uma biblioteca JavaScript popular para a criação de mapas interativos. Ela oferece suporte à integração de muitos tipos de fundo de mapa, incluindo MBTiles. Aqui estão as etapas típicas e os casos de uso para incorporar MBTiles em um mapa do Leaflet.

1.Pré-requisitos: um servidor de blocos

Antes de usar os MBTiles com o Leaflet, você precisa configurar um servidor de blocos, pois o Leaflet não carrega diretamente os MBTiles locais. Esse servidor fornecerá os blocos como imagens ou em formato vetorial, acessíveis por meio de um URL.

Há várias opções para hospedar MBTiles:

• TileStache
• Tileserver-GL
• Flask + Flask-tile (para uma instalação leve)
• Tileserver-php

Depois que o servidor tiver sido configurado, ele poderá distribuir os blocos via HTTP, que o Leaflet poderá chamar para exibi-los no mapa.

2.Integração do MBTiles com o Leaflet

Veja a seguir um exemplo simples de uso de um servidor de blocos com o Leaflet para exibir dados de um arquivo .mbtiles:

Exemplo com blocos rasterizados

a) Inicie o servidor de blocos

Vá para o diretório que contém os blocos rasterizados.

php.exe -S localhost:8081

inicie o servidor de blocos

A página html a seguir exibe o conteúdo dos blocos no arquivo countries.mbtiles localizado na subpasta tiles/. No navegador, você precisa digitar o endereço localhost:8081/page_name.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Carte Mondiale</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        html, body, #map { height: 100%; margin: 0; }
    </style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    var map = L.map('map').setView([45, 2], 5);

    L.tileLayer('tileserver.php?file=tiles/countries.mbtiles&z={z}&x={x}&y={y}', {
        tileSize: 256,
        minZoom: 0,
        maxZoom: 6,
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);
</script>
</body>
</html>

O resultado é o seguinte:

3.Ladrilhos vetoriais (MBTiles PBF)

Se estiver usando um arquivo MBTiles vetorial (por exemplo, gerado pelo MapTiler ou Mapbox), será necessário configurar o Leaflet com um plug-in que possa interpretar blocos vetoriais. O Leaflet.VectorGrid é um dos plug-ins que podem manipular blocos vetoriais no Leaflet.

Exemplo com blocos vetoriais (PBF)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carte Vectorielle MBTiles avec Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@1.1.0/dist/Leaflet.VectorGrid.js"></script>
</head>
<body>
    <div id="map" style="height: 600px;"></div>

    <script>
        var map = L.map('map').setView([ -19.7, 63.35], 12); // Centré sur Rodrigues

        // Charger les tuiles vectorielles MBTiles
        L.vectorGrid.protobuf("http://localhost:8081/tileserver.php?file=tiles/map.mbtiles&z={z}&x={x}&y={y}", {
            vectorTileLayerStyles: {
                // Styles pour les tuiles vectorielles
                building: {
                    fillColor: 'blue',
                    weight: 1,
                    fillOpacity: 0.6
                },
                park: {
                    fillColor: 'green',
                    weight: 1,
                    fillOpacity: 0.6
                }
            }
        }).addTo(map);
    </script>
</body>
</html>

Neste exemplo, o servidor Flask ou Tileserver-GL é usado para fornecer os blocos de vetores, que o Leaflet renderiza como vetores usando L.vectorGrid.

No entanto, isso não é tão simples quanto com os blocos rasterizados.

Simbologia

A primeira diferença é que os blocos vetoriais, ao contrário dos blocos rasterizados, não têm simbologia associada no nível do servidor. Portanto, você é obrigado a definir a simbologia no nível do cliente html. Você pode ver isso no código de exemplo acima:

vectorTileLayerStyles: {
                // Styles pour les tuiles vectorielles
                building: {
                    fillColor: 'blue',
                    weight: 1,
                    fillOpacity: 0.6
                },
                park: {
                    fillColor: 'green',
                    weight: 1,
                    fillOpacity: 0.6
                }
            }

O que você também precisa saber é que não existe uma simbologia padrão. Se uma camada não tiver uma definição de simbologia em vectorTileLayerStyles, ela não será exibida. Em nosso exemplo, apenas edifícios e parques serão exibidos, todas as outras camadas (estradas, etc.) serão ignoradas.

Dependências

O Leaflet.VectorGrid tem várias dependências que podem complicar a operação do servidor de blocos local. Quando exibimos um arquivo .mbtiles convertido em .pbf por meio do tileserver.php (por exemplo), estamos chamando blocos de vetores brutos de um servidor PHP local, sem os cabeçalhos ou codificações corretos. Agora:

• Esses blocos requerem pbf.js (que você pode adicionar: src=“https://unpkg.com/pbf@3.2.1/dist/pbf.js”)
• Mas também @mapbox/vector-tile para decodificar o conteúdo .pbf

O último não está disponível como um arquivo .js que pode ser usado diretamente em uma página HTML: ele foi escrito para o Node.js ou para um empacotador moderno (Webpack, Vite etc.).

Codificação

O código PHP padrão no tileserver.php está configurado para lidar com blocos rasterizados (imagens PNG), mas não com blocos vetoriais (.pbf).

Portanto, você precisará ajustar o arquivo tileserver.php para servir blocos vetoriais (PBF):

Modificação do cabeçalho Content-Type:
Para blocos de vetores, um cabeçalho Content-Type deve ser especificado: application/x-protobuf, porque os blocos de vetores são arquivos no formato Protobuf (.pbf), e não imagens PNG.

Exemplo de código PHP modificado para servir blocos de vetores (PBF):

<?php
// Ouverture de la base de données SQLite
$db = new SQLite3($_GET['file']);

// Extraction des coordonnées de la tuile
$z = (int) $_GET['z'];
$x = (int) $_GET['x'];
$y = (int) $_GET['y'];

// Conversion du système de coordonnées TMS vers XYZ
$y = (1 << $z) - 1 - $y;  // TMS flip

// Préparation de la requête pour extraire la tuile correspondante
$stmt = $db->prepare("SELECT tile_data FROM tiles WHERE zoom_level = :z AND tile_column = :x AND tile_row = :y");
$stmt->bindValue(':z', $z, SQLITE3_INTEGER);
$stmt->bindValue(':x', $x, SQLITE3_INTEGER);
$stmt->bindValue(':y', $y, SQLITE3_INTEGER);
$res = $stmt->execute();

// Si une tuile est trouvée
if ($row = $res->fetchArray()) {
    // Définir l'en-tête approprié pour les tuiles vectorielles Protobuf
    header('Content-Type: application/x-protobuf');
    
    // Retourner les données de la tuile
    echo $row['tile_data'];
} else {
    // Si aucune tuile n'est trouvée, renvoyer une erreur 404
    http_response_code(404);
}
?>

4.Escalabilidade e outros usos

Os MBTiles são particularmente úteis em cenários em que :

• O desempenho é uma questão importante, pois os blocos podem ser distribuídos com eficiência usando um servidor de blocos otimizado.
• Você deseja distribuir um grande número de blocos off-line ou em um ambiente sem conexão com a Internet (blocos pré-gerados armazenados em um único arquivo).
• Os blocos são gerados a partir de dados que mudam com frequência, e você pode atualizá-los ou substituí-los com o mínimo de interrupção para os usuários finais.

Conclusão

O formato MBTiles é muito adequado para aplicativos Leaflet, pois oferece uma solução simples e eficiente para servir blocos geoespaciais, sejam eles rasterizados ou vetoriais. Com uma instalação leve e um servidor de blocos bem configurado, é fácil exibir mapas de alto desempenho e gerenciar grandes quantidades de dados geoespaciais.

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois