<\/div>

<\/div><\/div>

<\/p>\n\n\n\n

CREATE TABLE tiles (
zoom_level INTEGER,
tile_column INTEGER,
tile_row INTEGER,
tile_data BLOB
);
<\/p>\n\n\n

<\/div><\/div>\n\n\n\n

Observa\u00e7\u00e3o<\/strong>: Os MBTiles usam o sistema de coordenadas TMS (Tile Map Service), o que significa que o eixo vertical (Y) est\u00e1 invertido em rela\u00e7\u00e3o ao esquema XYZ usado pelo Leaflet. Alguns servidores ou visualizadores corrigem isso automaticamente.<\/p>\n\n\n\n

<\/span>b) metadados<\/span><\/h4>\n\n\n\n
Essa tabela cont\u00e9m informa\u00e7\u00f5es gerais sobre o arquivo e os blocos que ele cont\u00e9m, por exemplo, :<\/p>\n\n\n
<\/div>
<\/div>
<\/div><\/div>
<\/p>\n\n\n\n
CREATE TABLE metadata (\n name TEXT,\n value TEXT\n);\n<\/code><\/pre>\n\n\n<\/div><\/div>\n\n\n\n Alguns campos comuns:<\/p>\n\n\n\n \nname: nome do conjunto de blocos;<\/li>\n\n\n\n format: formato do bloco (png, jpg, pbf);<\/li>\n\n\n\n minzoom, maxzoom: n\u00edveis de zoom dispon\u00edveis;<\/li>\n\n\n\n bounds: extens\u00e3o geogr\u00e1fica (minlon,minlat,maxlon,maxlat) ;<\/li>\n\n\n\n centro: coordenadas do centro do mapa (lon,lat,zoom) ;<\/li>\n\n\n\n type: tipo de mapa (baselayer, overlay);<\/li>\n\n\n\n descri\u00e7\u00e3o: texto explicativo.<\/li>\n<\/ul>\n\n\n\n<\/span>2.Indexa\u00e7\u00e3o<\/span><\/h3>\n\n\n\nOs arquivos MBTiles podem incluir \u00edndices para acelerar o acesso aos blocos, mas isso n\u00e3o \u00e9 obrigat\u00f3rio.<\/p>\n\n\n\n <\/span>3.Outras visualiza\u00e7\u00f5es e variantes<\/span><\/h3>\n\n\n\nAlgumas ferramentas (como o MapTiler ou o TileMill) geram visualiza\u00e7\u00f5es adicionais ou esquemas alternativos, como a visualiza\u00e7\u00e3o de mapa associada a uma tabela de imagens em um formato otimizado (deduplica\u00e7\u00e3o de blocos).<\/p>\n\n\n\n Por exemplo:<\/p>\n\n\n <\/div> <\/div><\/div><\/div><\/p>\n\n\n\nCREATE TABLE images (\n tile_id TEXT,\n tile_data BLOB\n);\n\nCREATE TABLE map (\n zoom_level INTEGER,\n tile_column INTEGER,\n tile_row INTEGER,\n tile_id TEXT\n);\n<\/code><\/pre>\n\n\n<\/div><\/div>\n\n\n\n Isso permite que cada imagem seja armazenada apenas uma vez, mesmo que seja usada em v\u00e1rias coordenadas.<\/p>\n\n\n\n Aqui est\u00e1 uma compara\u00e7\u00e3o clara entre os dois tipos de conte\u00fado que o formato MBTiles pode armazenar:<\/p>\n\n\n\n \n\n\n\n<\/span>Raster vs. Vetor: dois tipos de blocos em arquivos MBTiles<\/span><\/h2>\n\n\n\nO formato MBTiles \u00e9 vers\u00e1til: ele pode conter blocos rasterizados (imagens) ou vetoriais (dados geogr\u00e1ficos codificados). Cada abordagem tem suas vantagens e \u00e9 adequada para diferentes usos.<\/p>\n\n\n\n <\/span>1.MBTiles Raster<\/span><\/h3>\n\n\n\n\nConte\u00fado: imagens PNG ou JPEG (raramente WebP).<\/li>\n\n\n\n Uso: mapas base pr\u00e9-renderizados, mapas est\u00e1ticos, mapas hist\u00f3ricos, ortofotos, etc.<\/li>\n\n\n\n Formato declarado: campo de formato = png ou jpg na tabela de metadados.<\/li>\n\n\n\n Exibi\u00e7\u00e3o: diretamente compat\u00edvel com a maioria das bibliotecas, como Leaflet, OpenLayers ou MapLibre, por meio de um servidor de blocos (local ou remoto).<\/li>\n<\/ul>\n\n\n\n\nVantagens:\n\nMuito simples de implementar.<\/li>\n\n\n\n Renderiza\u00e7\u00e3o consistente em todas as plataformas.<\/li>\n\n\n\n Sem processamento no lado do cliente.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Limita\u00e7\u00f5es:\n\nSem interatividade nativa (sem clique na entidade).<\/li>\n\n\n\n Maior peso: uma imagem por bloco.<\/li>\n\n\n\n Menos flex\u00edvel no caso de mudan\u00e7as de estilo.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>2.MBTiles de vetor (VectorTiles)<\/span><\/h3>\n\n\n\n\nConte\u00fado: dados vetoriais codificados no formato Mapbox Vector Tile (MVT, .pbf).<\/li>\n\n\n\n Uso: mapas din\u00e2micos, interativos e com v\u00e1rios estilos (OpenStreetMap, mapas personalizados).<\/li>\n\n\n\n Formato declarado: campo format = pbf na tabela de metadados.<\/li>\n\n\n\n Exibi\u00e7\u00e3o: requer uma biblioteca que suporte a renderiza\u00e7\u00e3o vetorial (MapLibre GL, Mapbox GL JS, etc.).<\/li>\n\n\n\n Vantagens:\n\nLeve: um \u00fanico arquivo pode conter v\u00e1rios estilos.<\/li>\n\n\n\n Muito r\u00e1pido para carregar com o mecanismo de renderiza\u00e7\u00e3o correto.<\/li>\n\n\n\n Interativo: as entidades podem ser interrogadas em tempo real.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Limita\u00e7\u00f5es:\n\nRequer um renderizador no lado do cliente ou um servidor como o tileserver-gl.<\/li>\n\n\n\n Gera\u00e7\u00e3o mais complexa.<\/li>\n\n\n\n Ainda n\u00e3o \u00e9 compat\u00edvel com todas as plataformas (o Leaflet, por exemplo, n\u00e3o \u00e9 compat\u00edvel diretamente com elas).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>Em poucas palavras<\/span><\/h4>\n\n\n\nRecursos<\/th> Raster<\/th> Vetorial<\/th><\/tr><\/thead> Formato de bloco<\/td> PNG, JPEG<\/td> PBF (MVT)<\/td><\/tr> Renderiza\u00e7\u00e3o<\/td> Pr\u00e9-renderizada, fixa<\/td> Din\u00e2mica, estiliz\u00e1vel<\/td><\/tr> Interatividade<\/td> N\u00e3o<\/td> Sim<\/td><\/tr> Compatibilidade<\/td> Muito ampla<\/td> Mais restrita<\/td><\/tr> Tamanho<\/td> Mais pesado<\/td> Mais leve em grande escala<\/td><\/tr> Necessidade de estilo<\/td> Nenhum (renderiza\u00e7\u00e3o inclu\u00edda)<\/td> Requer estilo JSON<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n \n\n\n\n<\/span>Gera\u00e7\u00e3o de arquivos MBTiles: ferramentas e fluxos de trabalho<\/span><\/h2>\n\n\n\n<\/span>MBTiles Raster (imagens)<\/span><\/h3>\n\n\n\nOs blocos rasterizados geralmente s\u00e3o gerados a partir de um mapa exibido em um software GIS ou em um mecanismo de renderiza\u00e7\u00e3o cartogr\u00e1fica. Aqui est\u00e3o as principais ferramentas:<\/p>\n\n\n\n ToolDescriptionTypeQGISPlugin \u201cExport as tiles\u201d (ou Processing \u2192 Generate XYZ tiles) Graphical interface GDALgdal2tiles.py with the –mbtiles option (since GDAL 3. 1) Linha de comando TileMill (antigo) Cria\u00e7\u00e3o de tiles PNG via Mapnik Interface gr\u00e1ficaMapTiler Desktop Interface completa para cria\u00e7\u00e3o de MBTiles (vers\u00e3o gratuita limitada) Interface gr\u00e1ficatippecanoe + rasteriza\u00e7\u00e3o Fluxo de trabalho h\u00edbrido: rasteriza\u00e7\u00e3o upstream, se necess\u00e1rio Linha de comandoMapProxy Gera dinamicamente e pode exportar para MBTiles Servidor\/cache<\/p>\n\n\n\n Outil<\/th> Description<\/th> Type<\/th><\/tr><\/thead> QGIS<\/strong><\/td> Plugin \u00ab Export as tiles \u00bb (ou Processing \u2192 Generate XYZ tiles<\/code>)<\/td> Graphical interface<\/td><\/tr> GDAL<\/strong><\/td> gdal2tiles.py<\/code> con option --mbtiles<\/code> (since GDAL 3.1)<\/td> Linha de comando<\/td><\/tr> TileMill<\/strong> (ancien)<\/td> Cria\u00e7\u00e3o de tiles PNG via Mapnik<\/td> Graphical interface<\/td><\/tr> MapTiler Desktop<\/strong><\/td> Interface completa para cria\u00e7\u00e3o de MBTiles (vers\u00e3o gratuita limitada)<\/td> Graphical interface<\/td><\/tr> tippecanoe + rasterize<\/strong><\/td> Fluxo de trabalho h\u00edbrido: rasteriza\u00e7\u00e3o upstream, se necess\u00e1rio<\/td> Linha de comando<\/td><\/tr> MapProxy<\/strong><\/td> Gera dinamicamente e pode exportar para MBTiles<\/td> Servidor\/cache<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nCaso de uso t\u00edpico: mapa tur\u00edstico, ortofoto, mapa digitalizado.<\/p>\n\n\n\n \n\n\n\n<\/span>2.Mosaicos vetoriais MBTiles<\/span><\/h3>\n\n\n\nOs blocos vetoriais exigem codifica\u00e7\u00e3o em PBF e corte em blocos de acordo com o padr\u00e3o MVT (Mapbox Vector Tile). Isso requer ferramentas especializadas:<\/p>\n\n\n\n <\/p>\n\n\n\n Tool<\/th> Description<\/th> Format MBTiles<\/th><\/tr><\/thead> tippecanoe<\/strong> (Mapbox)<\/td> Ferramenta de refer\u00eancia para converter GeoJSON em tiles PBF em um MBTiles<\/td> Sim<\/td><\/tr> tilemaker<\/strong><\/td> Gera tiles vetoriais diretamente de um OSM PBF<\/td> Sim<\/td><\/tr> PostGIS + ST_AsMVT<\/strong><\/td> Exporta tiles manualmente com scripts SQL \u2192 armazenamento em MBTiles via mb-ut<\/td> Con script<\/td><\/tr> OpenMapTiles<\/strong><\/td> Cadeia completa com Docker, baseada em PostgreSQL\/PostGIS + imposm3 + tippecanoe<\/td> Sim<\/td><\/tr> MapTiler Desktop<\/strong><\/td> Tamb\u00e9m permite a exporta\u00e7\u00e3o de vetores com estilos integrados (vers\u00e3o Pro)<\/td> Sim<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nCaso de uso t\u00edpico: mapa interativo da cidade, planos de fundo personaliz\u00e1veis, projetos altamente interativos.<\/p>\n\n\n\n <\/span>Estrutura interna de um arquivo MBTiles<\/span><\/h2>\n\n\n\nUm arquivo .mbtiles \u00e9 um banco de dados SQLite que cont\u00e9m blocos geogr\u00e1ficos organizados de acordo com um esquema padronizado, que varia ligeiramente entre os formatos raster e vetorial.<\/p>\n\n\n\n <\/span>Tabelas principais<\/span><\/h3>\n\n\n\n<\/span>tiles (ou mapa + imagens para vetores com v\u00e1rias partes)<\/span><\/h5>\n\n\n\nCampo<\/th> Tipo<\/th> descri\u00e7\u00e3o<\/th><\/tr><\/thead> zoom_level<\/code><\/td> INTEGER<\/td> N\u00edvel de zoom do bloco<\/td><\/tr> tile_column<\/code><\/td> INTEGER<\/td> Coluna (x) do bloco <\/td><\/tr> tile_row<\/code><\/td> INTEGER<\/td> Linha (y) do bloco (TMS invertido \u2194 XYZ)<\/td><\/tr> tile_data<\/code><\/td> BLOB<\/td> Dados de imagem bin\u00e1ria ou PBF<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nObserva\u00e7\u00e3o: no formato vetorial, algumas implementa\u00e7\u00f5es, como o tilemaker, separam os metadados da imagem (imagens) e as posi\u00e7\u00f5es (mapa). Nesse caso, \u00e9 criada uma visualiza\u00e7\u00e3o de blocos que os combina.<\/p>\n\n\n\n metadados<\/strong><\/p>\n\n\n\n Tabela de valores-chave (chave = texto, valor = texto) contendo informa\u00e7\u00f5es essenciais para a interpreta\u00e7\u00e3o do arquivo.<\/p>\n\n\n\n Chave <\/th> Exemplo de valor<\/th> Utilidade<\/th><\/tr><\/thead> name<\/code><\/td> \"Rodrigues Map\"<\/code><\/td> Nome leg\u00edvel <\/td><\/tr> format<\/code><\/td> \"png\"<\/code>, \"jpg\"<\/code>, \"pbf\"<\/code><\/td> Tipo de ladrilhos<\/td><\/tr> minzoom<\/code><\/td> 5<\/code><\/td> N\u00edvel m\u00ednimo de zoom <\/td><\/tr> maxzoom<\/code><\/td> 14<\/code><\/td> N\u00edvel m\u00e1ximo de zoom<\/td><\/tr> bounds<\/code><\/td> 63.35,-19.9,63.5,-19.7<\/code><\/td> BBox (WGS84)<\/td><\/tr> center<\/code><\/td> 63.42,-19.8,12<\/code><\/td> Centro do mapa (lon, lat, z )<\/td><\/tr> type<\/code><\/td> \"baselayer\"<\/code> ou \"overlay\"<\/code><\/td> Role of tileset<\/td><\/tr> json<\/code><\/td> JSON Mapbox (si vectorial)<\/td> Style, layers, fields<\/td><\/tr> attribution<\/code><\/td> Texto HTML<\/td> Source to display<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<\/span>(optional) grids<\/code>, grid_data<\/code>, keymap<\/code><\/span><\/h5>\n\n\n\nUsado para o formato UTFGrid, uma forma obsoleta de interatividade em planos de fundo raster.<\/p>\n\n\n\n \n\n\n\n<\/span>Observa\u00e7\u00f5es importantes<\/span><\/h3>\n\n\n\n\nAs coordenadas de tile_row geralmente s\u00e3o invertidas, dependendo do sistema de blocos:\n\nTMS (Tile Map Service): a origem \u00e9 o canto inferior esquerdo.<\/li>\n\n\n\n XYZ (padr\u00e3o da Web): a origem est\u00e1 no canto superior esquerdo.<\/li>\n\n\n\n A maioria dos servidores e visualizadores modernos usa XYZ.<\/li>\n<\/ul>\n<\/li>\n\n\n\n O campo tile_data cont\u00e9m :\n\nUma imagem compactada (png, jpg) para rasteriza\u00e7\u00e3o.<\/li>\n\n\n\n Um objeto PBF compactado com zlib para blocos vetoriais.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Para blocos de vetores, o campo json em metadados pode conter: \n\n{ \u201cvector_layers\u201d: [ { \u201cid\u201d: \u201cbuildings\u201d, \u201cdescription\u201d: \u201c\u201d, \u201cminzoom\u201d: 12, \u201cmaxzoom\u201d: 16, \u201cfields\u201d: { \u201cname\u201d: \u201cString\u201d, \u201cheight\u201d: \u201cNumber\u201d } } ] }<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>Uso do MBTiles com o Leaflet<\/span><\/h2>\n\n\n\nO Leaflet \u00e9 uma biblioteca JavaScript popular para a cria\u00e7\u00e3o de mapas interativos. Ela oferece suporte \u00e0 integra\u00e7\u00e3o de muitos tipos de fundo de mapa, incluindo MBTiles. Aqui est\u00e3o as etapas t\u00edpicas e os casos de uso para incorporar MBTiles em um mapa do Leaflet.<\/p>\n\n\n\n <\/span>1.Pr\u00e9-requisitos: um servidor de blocos<\/span><\/h3>\n\n\n\nAntes de usar os MBTiles com o Leaflet, voc\u00ea precisa configurar um servidor de blocos, pois o Leaflet n\u00e3o carrega diretamente os MBTiles locais. Esse servidor fornecer\u00e1 os blocos como imagens ou em formato vetorial, acess\u00edveis por meio de um URL.<\/p>\n\n\n\n H\u00e1 v\u00e1rias op\u00e7\u00f5es para hospedar MBTiles:<\/p>\n\n\n\n \nTileStache<\/a><\/strong><\/li>\n\n\n\n Tileserver-GL<\/a><\/strong><\/li>\n\n\n\n Flask + Flask<\/a>-tile<\/strong> (para uma instala\u00e7\u00e3o leve)<\/li>\n\n\n\n Tileserver-php<\/a><\/li>\n<\/ul>\n\n\n\nDepois que o servidor tiver sido configurado, ele poder\u00e1 distribuir os blocos via HTTP, que o Leaflet poder\u00e1 chamar para exibi-los no mapa.<\/p>\n\n\n\n<\/span>2.Integra\u00e7\u00e3o do MBTiles com o Leaflet<\/span><\/h3>\n\n\n\nVeja a seguir um exemplo simples de uso de um servidor de blocos com o Leaflet para exibir dados de um arquivo .mbtiles:<\/p>\n\n\n\n<\/span>Exemplo com blocos rasterizados<\/span><\/h4>\n\n\n\n<\/span>a) Inicie o servidor de blocos<\/span><\/h5>\n\n\n\nV\u00e1 para o diret\u00f3rio que cont\u00e9m os blocos rasterizados.<\/p>\n\n\n\n php.exe -S localhost:8081<\/em><\/strong><\/p>\n\n\n\n inicie o servidor de blocos<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nA p\u00e1gina html a seguir exibe o conte\u00fado dos blocos no arquivo countries.mbtiles localizado na subpasta tiles\/. No navegador, voc\u00ea precisa digitar o endere\u00e7o localhost:8081\/page_name.html<\/p>\n\n\n<\/div> <\/div><\/div><\/div><\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\" \/>\n <title>Carte Mondiale<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n <style>\n html, body, #map { height: 100%; margin: 0; }\n <\/style>\n<\/head>\n<body>\n<div id=\"map\"><\/div>\n<script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n<script>\n var map = L.map('map').setView([45, 2], 5);\n\n L.tileLayer('tileserver.php?file=tiles\/countries.mbtiles&z={z}&x={x}&y={y}', {\n tileSize: 256,\n minZoom: 0,\n maxZoom: 6,\n attribution: '© OpenStreetMap contributors'\n }).<\/mark>addTo(map);\n<\/script>\n<\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n<\/div><\/div>\n\n\n\n O resultado \u00e9 o seguinte:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/span>3.Ladrilhos vetoriais (MBTiles PBF)<\/span><\/h3>\n\n\n\nSe estiver usando um arquivo MBTiles vetorial (por exemplo, gerado pelo MapTiler ou Mapbox), ser\u00e1 necess\u00e1rio configurar o Leaflet com um plug-in que possa interpretar blocos vetoriais. O Leaflet.VectorGrid \u00e9 um dos plug-ins que podem manipular blocos vetoriais no Leaflet.<\/p>\n\n\n\n <\/span>Exemplo com blocos vetoriais (PBF)<\/span><\/h5>\n\n\n<\/div> <\/div><\/div><\/div><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Carte Vectorielle MBTiles avec Leaflet<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\n <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/leaflet.vectorgrid@1.1.0\/dist\/Leaflet.VectorGrid.js\"><\/script>\n<\/head>\n<body>\n <div id=\"map\" style=\"height: 600px;\"><\/div>\n\n <script>\n var map = L.map('map').setView([ -19.7, 63.35], 12); \/\/ Centr\u00e9 sur Rodrigues\n\n \/\/ Charger les tuiles vectorielles MBTiles\n L.vectorGrid.protobuf(\"http:\/\/localhost:8081\/tileserver.php?file=tiles\/map.mbtiles&z={z}&x={x}&y={y}\", {\n vectorTileLayerStyles: {\n \/\/ Styles pour les tuiles vectorielles\n building: {\n fillColor: 'blue',\n weight: 1,\n fillOpacity: 0.6\n },\n park: {\n fillColor: 'green',\n weight: 1,\n fillOpacity: 0.6\n }\n }\n }).addTo(map);\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n<\/div><\/div>\n\n\n\n Neste exemplo, o servidor Flask ou Tileserver-GL \u00e9 usado para fornecer os blocos de vetores, que o Leaflet renderiza como vetores usando L.vectorGrid.<\/p>\n\n\n\n No entanto, isso n\u00e3o \u00e9 t\u00e3o simples quanto com os blocos rasterizados.<\/p>\n\n\n\n <\/span>Simbologia<\/span><\/h5>\n\n\n\nA primeira diferen\u00e7a \u00e9 que os blocos vetoriais, ao contr\u00e1rio dos blocos rasterizados, n\u00e3o t\u00eam simbologia associada no n\u00edvel do servidor. Portanto, voc\u00ea \u00e9 obrigado a definir a simbologia no n\u00edvel do cliente html. Voc\u00ea pode ver isso no c\u00f3digo de exemplo acima:<\/p>\n\n\n <\/div> <\/div><\/div><\/div><\/p>\n\n\n\nvectorTileLayerStyles: {\n \/\/ Styles pour les tuiles vectorielles\n building: {\n fillColor: 'blue',\n weight: 1,\n fillOpacity: 0.6\n },\n park: {\n fillColor: 'green',\n weight: 1,\n fillOpacity: 0.6\n }\n }<\/code><\/pre>\n\n\n<\/div><\/div>\n\n\n\n O que voc\u00ea tamb\u00e9m precisa saber \u00e9 que n\u00e3o existe uma simbologia padr\u00e3o. Se uma camada n\u00e3o tiver uma defini\u00e7\u00e3o de simbologia em vectorTileLayerStyles, ela n\u00e3o ser\u00e1 exibida. Em nosso exemplo, apenas edif\u00edcios e parques ser\u00e3o exibidos, todas as outras camadas (estradas, etc.) ser\u00e3o ignoradas.<\/p>\n\n\n\n <\/span>Depend\u00eancias<\/span><\/h5>\n\n\n\nO Leaflet.VectorGrid tem v\u00e1rias depend\u00eancias que podem complicar a opera\u00e7\u00e3o 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\u00e7alhos ou codifica\u00e7\u00f5es corretos. Agora:<\/p>\n\n\n\n \nEsses blocos requerem pbf.js (que voc\u00ea pode adicionar: src=\u201chttps:\/\/unpkg.com\/pbf@3.2.1\/dist\/pbf.js\u201d)<\/li>\n\n\n\n Mas tamb\u00e9m @mapbox\/vector-tile para decodificar o conte\u00fado .pbf<\/li>\n<\/ul>\n\n\n\nO \u00faltimo n\u00e3o est\u00e1 dispon\u00edvel como um arquivo .js que pode ser usado diretamente em uma p\u00e1gina HTML: ele foi escrito para o Node.js ou para um empacotador moderno (Webpack, Vite etc.).<\/p>\n\n\n\n <\/span>Codifica\u00e7\u00e3o<\/span><\/h5>\n\n\n\nO c\u00f3digo PHP padr\u00e3o no tileserver.php est\u00e1 configurado para lidar com blocos rasterizados (imagens PNG), mas n\u00e3o com blocos vetoriais (.pbf).<\/p>\n\n\n\n Portanto, voc\u00ea precisar\u00e1 ajustar o arquivo tileserver.php para servir blocos vetoriais (PBF):<\/p>\n\n\n\n Modifica\u00e7\u00e3o do cabe\u00e7alho Content-Type:<\/strong> Para blocos de vetores, um cabe\u00e7alho Content-Type deve ser especificado: application\/x-protobuf, porque os blocos de vetores s\u00e3o arquivos no formato Protobuf (.pbf), e n\u00e3o imagens PNG.<\/p>\n\n\n\n <\/span>Exemplo de c\u00f3digo PHP modificado para servir blocos de vetores (PBF):<\/span><\/h5>\n\n\n<\/div> <\/div><\/div><\/div><\/p>\n\n\n\n<?php \/\/ Ouverture de la base de donn\u00e9es SQLite $db = new SQLite3($_GET['file']); \/\/ Extraction des coordonn\u00e9es de la tuile $z = (int) $_GET['z']; $x = (int) $_GET['x']; $y = (int) $_GET['y']; \/\/ Conversion du syst\u00e8me de coordonn\u00e9es TMS vers XYZ $y = (1 << $z) - 1 - $y; \/\/ TMS flip \/\/ Pr\u00e9paration de la requ\u00eate 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\u00e9e if ($row = $res->fetchArray()) { \/\/ D\u00e9finir l'en-t\u00eate appropri\u00e9 pour les tuiles vectorielles Protobuf header('Content-Type: application\/x-protobuf'); \/\/ Retourner les donn\u00e9es de la tuile echo $row['tile_data']; } else { \/\/ Si aucune tuile n'est trouv\u00e9e, renvoyer une erreur 404 http_response_code(404); } ?> <\/pre>\n\n\n<\/div><\/div>\n\n\n\n <\/span>4.Escalabilidade e outros usos<\/span><\/h3>\n\n\n\nOs MBTiles s\u00e3o particularmente \u00fateis em cen\u00e1rios em que :<\/p>\n\n\n\n \nO desempenho \u00e9 uma quest\u00e3o importante, pois os blocos podem ser distribu\u00eddos com efici\u00eancia usando um servidor de blocos otimizado.<\/li>\n\n\n\n Voc\u00ea deseja distribuir um grande n\u00famero de blocos off-line ou em um ambiente sem conex\u00e3o com a Internet (blocos pr\u00e9-gerados armazenados em um \u00fanico arquivo).<\/li>\n\n\n\n Os blocos s\u00e3o gerados a partir de dados que mudam com frequ\u00eancia, e voc\u00ea pode atualiz\u00e1-los ou substitu\u00ed-los com o m\u00ednimo de interrup\u00e7\u00e3o para os usu\u00e1rios finais.<\/li>\n<\/ul>\n\n\n\n \n\n\n\n<\/span>Conclus\u00e3o<\/span><\/h3>\n\n\n\nO formato MBTiles \u00e9 muito adequado para aplicativos Leaflet, pois oferece uma solu\u00e7\u00e3o simples e eficiente para servir blocos geoespaciais, sejam eles rasterizados ou vetoriais. Com uma instala\u00e7\u00e3o leve e um servidor de blocos bem configurado, \u00e9 f\u00e1cil exibir mapas de alto desempenho e gerenciar grandes quantidades de dados geoespaciais.<\/p>\n","protected":false},"excerpt":{"rendered":" Introdu\u00e7\u00e3o: O que \u00e9 o formato MBTiles? O formato MBTiles \u00e9 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…<\/p>\n","protected":false},"author":1,"featured_media":13826,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3021],"tags":[3140,2937,3142,3134,3136,3144,2895,3146,3148,3150,3138],"class_list":["post-13822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-pt","tag-flask-pt","tag-leaflet-pt","tag-mbtiles-pt","tag-raster-pt","tag-spatialite-pt","tag-sqlite-pt","tag-tiles-pt","tag-tileserver-gl-pt","tag-tileserver-php-pt","tag-tilestache-pt","tag-vector-pt"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/05\/image_mbtiles_leaflet-3.jpg?fit=1024%2C1024&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-3AW","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/comments?post=13822"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13822\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13826"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/span>1. As tabelas principais<\/span><\/h3>\n\n\n\nDe acordo com a especifica\u00e7\u00e3o oficial (https:\/\/github.com\/mapbox\/mbtiles-spec<\/a>), um arquivo .mbtiles cont\u00e9m pelo menos :<\/p>\n\n\n\n

<\/span>1. As tabelas principais<\/span><\/h3>\n\n\n\n
De acordo com a especifica\u00e7\u00e3o oficial (https:\/\/github.com\/mapbox\/mbtiles-spec<\/a>), um arquivo .mbtiles cont\u00e9m pelo menos :<\/p>\n\n\n\n