Le format MBTiles<\/strong> est un format de fichier permettant de stocker des tuiles cartographiques (raster ou vectorielles) dans une base de donn\u00e9es SQLite<\/strong>, un moteur de base de donn\u00e9es l\u00e9ger et autonome.<\/p>\n\n\n\n

Con\u00e7u initialement par Mapbox, ce format a \u00e9t\u00e9 largement adopt\u00e9 dans les communaut\u00e9s SIG, cartographiques et web mapping pour sa portabilit\u00e9<\/strong>, sa simplicit\u00e9 d\u2019utilisation<\/strong> et sa compatibilit\u00e9 avec de nombreux outils<\/strong>.<\/p>\n\n\n\n

\n
\n
Contenu <\/p>\nToggle<\/span>
Introduction : Qu\u2019est-ce que le format MBTiles ?<\/a><\/li>
Structure interne d\u2019un fichier MBTiles<\/a>
1. Les tables principales<\/a>
a) tiles<\/a><\/li>
b) metadata<\/a><\/li><\/ul><\/li>
2. Indexation<\/a><\/li>
3. Autres vues et variantes<\/a><\/li><\/ul><\/li>
Raster vs Vector : Deux types de tuiles dans les fichiers MBTiles<\/a>
1. MBTiles Raster<\/a><\/li>
2. MBTiles Vectoriels (VectorTiles)<\/a>
En r\u00e9sum\u00e9<\/a><\/li><\/ul><\/li><\/ul><\/li>
G\u00e9n\u00e9rer des fichiers MBTiles : outils et workflows<\/a>
1. MBTiles Raster (images)<\/a><\/li>
2. MBTiles Vectoriels (Vector Tiles)<\/a><\/li><\/ul><\/li>
Structure interne d\u2019un fichier MBTiles<\/a>
1. Tables principales<\/a>
tiles (ou map + images pour vectoriels multi-part)<\/a><\/li>
metadata<\/a><\/li>
(optionnel) grids, grid_data, keymap<\/a><\/li><\/ul><\/li><\/ul><\/li>
Remarques importantes<\/a><\/li><\/ul><\/li>
Utilisation des fichiers MBTiles avec Leaflet<\/a>
1. Pr\u00e9requis : Un serveur de tuiles<\/a><\/li>
2. Int\u00e9gration de MBTiles avec Leaflet<\/a>
Exemple avec tuiles raster<\/a>
a)Lancer le serveur de tuiles<\/a><\/li><\/ul><\/li><\/ul><\/li>
3. Tuiles vectorielles (MBTiles PBF)<\/a>
Exemple avec tuiles vectorielles (PBF)<\/a><\/li>
Symbologie<\/a><\/li>
D\u00e9pendances<\/a><\/li>
Encodage<\/a><\/li>
Exemple de Code PHP modifi\u00e9 pour servir des tuiles vectorielles (PBF) :<\/a><\/li><\/ul><\/li><\/ul><\/li>
4. Scalabilit\u00e9 et autres utilisations<\/a><\/li>
Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n\n
<\/p>\n\n\n\n
Concr\u00e8tement, un fichier .mbtiles<\/code> est une base de donn\u00e9es unique qui peut contenir des milliers, voire des millions de tuiles g\u00e9ographiques organis\u00e9es par niveaux de zoom<\/strong>, colonnes<\/strong> et lignes<\/strong>. Il \u00e9vite ainsi d\u2019avoir une arborescence complexe de fichiers sur le disque, tout en facilitant la distribution (sur le web, via USB, ou en mode d\u00e9connect\u00e9).<\/p>\n\n\n\n
Le format MBTiles peut contenir :<\/p>\n\n\n\n
\nDes tuiles raster<\/strong> (g\u00e9n\u00e9ralement PNG ou JPEG),<\/li>\n\n\n\n Ou des tuiles vectorielles<\/strong> (au format MVT \u2013 Mapbox Vector Tiles),<\/li>\n\n\n\n
Et des m\u00e9tadonn\u00e9es<\/strong> (description, attribution, format, etc.).<\/li>\n<\/ul>\n\n\n\n
Gr\u00e2ce \u00e0 son format SQLite, MBTiles peut \u00eatre facilement lu avec des outils comme sqlite3<\/code>, DB Browser for SQLite<\/code>, ou exploit\u00e9 via des serveurs l\u00e9gers (comme Flask ou TileServer-PHP), ce qui le rend tr\u00e8s adapt\u00e9 \u00e0 la formation<\/strong>, aux d\u00e9monstrations<\/strong>, ou \u00e0 des usages hors-ligne<\/strong>.<\/p>\n\n\n\n
\n\n\n\n<\/span>Structure interne d\u2019un fichier MBTiles<\/span><\/h2>\n\n\n\n
Un fichier MBTiles<\/strong> est une base de donn\u00e9es SQLite structur\u00e9e selon un sch\u00e9ma simple et normalis\u00e9, qui permet de stocker efficacement des tuiles cartographiques sous forme raster (PNG, JPEG) ou vectorielle (PBF).<\/p>\n\n\n\n
<\/span>1. Les tables principales<\/span><\/h3>\n\n\n\nSelon la sp\u00e9cification officielle (https:\/\/github.com\/mapbox\/mbtiles-spec<\/a>), un fichier .mbtiles<\/code> contient au minimum :<\/p>\n\n\n\n
<\/span>a) tiles<\/code><\/span><\/h4>\n\n\n\nC\u2019est la table centrale. Elle contient les tuiles encod\u00e9es, chacune identifi\u00e9e par ses coordonn\u00e9es de zoom, colonne (x), et ligne (y) :<\/p>\n\n\n<\/div> <\/div><\/div><\/div><\/p>\n\n\n\nCREATE TABLE tiles ( zoom_level INTEGER, tile_column INTEGER, tile_row INTEGER, tile_data BLOB ); <\/p>\n\n\n <\/div><\/div>\n\n\n\nNote :<\/strong> Les tuiles MBTiles utilisent le syst\u00e8me de coordonn\u00e9es TMS (Tile Map Service), ce qui signifie que l’axe vertical (Y) est invers\u00e9 par rapport au sch\u00e9ma XYZ utilis\u00e9 par Leaflet<\/a>. Certains serveurs ou viewers le corrigent automatiquement.<\/p>\n\n\n\n <\/span>b) metadata<\/code><\/span><\/h4>\n\n\n\nCette table contient des informations g\u00e9n\u00e9rales sur le fichier et les tuiles qu\u2019il contient, par exemple :<\/p>\n\n\n <\/div> <\/div><\/div><\/div><\/p>\n\n\n\nCREATE TABLE metadata (\n name TEXT,\n value TEXT\n);\n<\/code><\/pre>\n\n\n<\/div><\/div>\n\n\n\n Quelques champs communs :<\/p>\n\n\n\n \nname<\/code> : nom du jeu de tuiles ;<\/li>\n\n\n\n format<\/code> : format des tuiles (png<\/code>, jpg<\/code>, pbf<\/code>) ;<\/li>\n\n\n\n minzoom<\/code>, maxzoom<\/code> : niveaux de zoom disponibles ;<\/li>\n\n\n\n bounds<\/code> : \u00e9tendue g\u00e9ographique (minlon,minlat,maxlon,maxlat<\/code>) ;<\/li>\n\n\n\n center<\/code> : coordonn\u00e9es du centre de la carte (lon,lat,zoom<\/code>) ;<\/li>\n\n\n\n type<\/code> : type de carte (baselayer<\/code>, overlay<\/code>) ;<\/li>\n\n\n\n description<\/code> : texte explicatif.<\/li>\n<\/ul>\n\n\n\n<\/span>2. Indexation<\/span><\/h3>\n\n\n\nLes fichiers MBTiles peuvent comporter des index pour acc\u00e9l\u00e9rer l\u2019acc\u00e8s aux tuiles, mais ce n\u2019est pas obligatoire.<\/p>\n\n\n\n <\/span>3. Autres vues et variantes<\/span><\/h3>\n\n\n\nCertains outils (comme MapTiler ou TileMill) g\u00e9n\u00e8rent des vues suppl\u00e9mentaires ou des sch\u00e9mas alternatifs, comme la vue map<\/code> associ\u00e9e \u00e0 une table images<\/code> dans un format optimis\u00e9 (d\u00e9duplication des tuiles).<\/p>\n\n\n\n Exemple :<\/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 Cela permet de stocker chaque image une seule fois, m\u00eame si elle est utilis\u00e9e \u00e0 plusieurs coordonn\u00e9es.<\/p>\n\n\n\n Voici une section comparative claire entre les deux types de contenus que peut stocker le format MBTiles :<\/p>\n\n\n\n \n\n\n\n<\/span>Raster vs Vector : Deux types de tuiles dans les fichiers MBTiles<\/span><\/h2>\n\n\n\nLe format MBTiles est polyvalent : il peut contenir des tuiles raster<\/strong> (images) ou vectorielles<\/strong> (donn\u00e9es g\u00e9ographiques encod\u00e9es). Chaque approche a ses avantages et convient \u00e0 des cas d\u2019usage diff\u00e9rents.<\/p>\n\n\n\n <\/span>1. MBTiles Raster<\/span><\/h3>\n\n\n\n\nContenu<\/strong> : images en PNG ou JPEG (rarement WebP).<\/li>\n\n\n\n Utilisation<\/strong> : fonds de carte pr\u00e9-rendus, cartes statiques, cartes historiques, orthophotos, etc.<\/li>\n\n\n\n Format d\u00e9clar\u00e9<\/strong> : champ format<\/code> = png<\/code> ou jpg<\/code> dans la table metadata<\/code>.<\/li>\n\n\n\n Affichage<\/strong> : directement compatible avec la plupart des biblioth\u00e8ques comme Leaflet, OpenLayers ou MapLibre, via un serveur de tuiles (local ou distant).<\/li>\n\n\n\n Avantages<\/strong> :\n\nTr\u00e8s simple \u00e0 mettre en \u0153uvre.<\/li>\n\n\n\n Rendu coh\u00e9rent sur toutes les plateformes.<\/li>\n\n\n\n Aucun traitement c\u00f4t\u00e9 client.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Limites<\/strong> :\n\nPas d\u2019interactivit\u00e9 native (pas de clic sur entit\u00e9).<\/li>\n\n\n\n Poids plus \u00e9lev\u00e9 : une image par tuile.<\/li>\n\n\n\n Moins flexible en cas de changement de style.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>2. MBTiles Vectoriels (VectorTiles)<\/span><\/h3>\n\n\n\n\nContenu<\/strong> : donn\u00e9es vectorielles encod\u00e9es au format Mapbox Vector Tile<\/strong> (MVT, .pbf<\/code>).<\/li>\n\n\n\n Utilisation<\/strong> : cartes dynamiques, interactives, multi-styles (OpenStreetMap, plans personnalis\u00e9s).<\/li>\n\n\n\n Format d\u00e9clar\u00e9<\/strong> : champ format<\/code> = pbf<\/code> dans la table metadata<\/code>.<\/li>\n\n\n\n Affichage<\/strong> : n\u00e9cessite une biblioth\u00e8que supportant le rendu vectoriel (MapLibre GL, Mapbox GL JS, etc.).<\/li>\n\n\n\n Avantages<\/strong> :\n\nL\u00e9ger : un seul fichier peut contenir plusieurs styles.<\/li>\n\n\n\n Tr\u00e8s rapide \u00e0 charger avec le bon moteur de rendu.<\/li>\n\n\n\n Interactif : on peut interroger les entit\u00e9s \u00e0 la vol\u00e9e.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Limites<\/strong> :\n\nN\u00e9cessite un moteur de rendu c\u00f4t\u00e9 client ou un serveur comme tileserver-gl<\/code>.<\/li>\n\n\n\n Plus complexe \u00e0 g\u00e9n\u00e9rer.<\/li>\n\n\n\n Pas encore support\u00e9 par toutes les plateformes (par exemple Leaflet ne les supporte pas directement).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<\/span>En r\u00e9sum\u00e9<\/span><\/h4>\n\n\n\nCaract\u00e9ristique<\/th> Raster<\/th> Vectoriel<\/th><\/tr><\/thead> Format des tuiles<\/td> PNG, JPEG<\/td> PBF (MVT)<\/td><\/tr> Rendu<\/td> Pr\u00e9-rendu, fixe<\/td> Dynamique, stylable<\/td><\/tr> Interactivit\u00e9<\/td> Non<\/td> Oui<\/td><\/tr> Compatibilit\u00e9<\/td> Tr\u00e8s large<\/td> Plus restreinte<\/td><\/tr> Taille<\/td> Plus lourd<\/td> Plus l\u00e9ger \u00e0 grande \u00e9chelle<\/td><\/tr> Besoin de style<\/td> Aucun (rendu inclus)<\/td> N\u00e9cessite un style JSON<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n \n\n\n\n<\/span>G\u00e9n\u00e9rer des fichiers MBTiles : outils et workflows<\/span><\/h2>\n\n\n\n<\/span>1. MBTiles Raster (images)<\/span><\/h3>\n\n\n\nLes tuiles raster sont g\u00e9n\u00e9ralement g\u00e9n\u00e9r\u00e9es \u00e0 partir d\u2019une carte affich\u00e9e dans un logiciel SIG ou un moteur de rendu cartographique. Voici les principaux outils :<\/p>\n\n\n\n Outil<\/th> Description<\/th> Type<\/th><\/tr><\/thead> QGIS<\/strong><\/td> Plugin \u00ab Exporter en tuiles \u00bb (ou Processing \u2192 Generate XYZ tiles<\/code>)<\/td> Interface graphique<\/td><\/tr> GDAL<\/strong><\/td> gdal2tiles.py<\/code> avec l\u2019option --mbtiles<\/code> (depuis GDAL 3.1)<\/td> Ligne de commande<\/td><\/tr> TileMill<\/strong> (ancien)<\/td> Cr\u00e9ation de tuiles PNG via Mapnik<\/td> Interface graphique<\/td><\/tr> MapTiler Desktop<\/strong><\/td> Interface compl\u00e8te pour cr\u00e9er des MBTiles (version gratuite limit\u00e9e)<\/td> Interface graphique<\/td><\/tr> tippecanoe + rasterize<\/strong><\/td> Workflow hybride : rasteriser en amont si besoin<\/td> Ligne de commande<\/td><\/tr> MapProxy<\/strong><\/td> G\u00e9n\u00e8re dynamiquement et peut exporter vers MBTiles<\/td> Serveur\/cache<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nCas d\u2019usage typique<\/strong> : carte touristique, orthophoto, carte scann\u00e9e.<\/p>\n\n\n\n \n\n\n\n<\/span> 2. MBTiles Vectoriels (Vector Tiles)<\/span><\/h3>\n\n\n\nLes tuiles vectorielles demandent un encodage en PBF et un d\u00e9coupage en tuiles selon la norme MVT (Mapbox Vector Tile). Cela n\u00e9cessite des outils sp\u00e9cialis\u00e9s :<\/p>\n\n\n\n Outil<\/th> Description<\/th> Format MBTiles<\/th><\/tr><\/thead> tippecanoe<\/strong> (Mapbox)<\/td> Outil de r\u00e9f\u00e9rence pour convertir GeoJSON en tuiles PBF dans un MBTiles<\/td> Oui<\/td><\/tr> tilemaker<\/strong><\/td> G\u00e9n\u00e8re directement des tuiles vectorielles depuis un extrait OSM PBF<\/td> Oui<\/td><\/tr> PostGIS<\/a> + ST_AsMVT<\/strong><\/td> Export manuel de tuiles avec scripts SQL \u2192 stockage dans MBTiles via mb-util<\/code><\/td> Avec script<\/td><\/tr> OpenMapTiles<\/strong><\/td> Cha\u00eene compl\u00e8te avec Docker, fond\u00e9e sur PostgreSQL\/PostGIS + imposm3 + tippecanoe<\/td> Oui<\/td><\/tr> MapTiler Desktop<\/strong><\/td> Permet aussi l\u2019export vectoriel avec styles int\u00e9gr\u00e9s (version Pro)<\/td> Oui<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nCas d\u2019usage typique<\/strong> : carte de ville interactive, fonds personnalisables, projets \u00e0 forte interactivit\u00e9.<\/p>\n\n\n\n <\/span>Structure interne d\u2019un fichier MBTiles<\/span><\/h2>\n\n\n\nUn fichier .mbtiles<\/code> est une base SQLite<\/strong> contenant des tuiles g\u00e9ographiques organis\u00e9es selon un sch\u00e9ma standardis\u00e9, qui varie l\u00e9g\u00e8rement entre les formats raster<\/strong> et vectoriel<\/strong>.<\/p>\n\n\n\n <\/span>1. Tables principales<\/span><\/h3>\n\n\n\n<\/span>tiles<\/code> (ou map<\/code> + images<\/code> pour vectoriels multi-part)<\/span><\/h5>\n\n\n\nChamp<\/th> Type<\/th> Description<\/th><\/tr><\/thead> zoom_level<\/code><\/td> INTEGER<\/td> Niveau de zoom de la tuile<\/td><\/tr> tile_column<\/code><\/td> INTEGER<\/td> Colonne (x) de la tuile<\/td><\/tr> tile_row<\/code><\/td> INTEGER<\/td> Ligne (y) de la tuile (invers\u00e9e TMS \u2194 XYZ)<\/td><\/tr> tile_data<\/code><\/td> BLOB<\/td> Donn\u00e9es binaires de l\u2019image ou PBF<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n\nRemarque<\/strong> : en format vectoriel<\/em>, certaines impl\u00e9mentations comme tilemaker<\/code> s\u00e9parent les m\u00e9tadonn\u00e9es d\u2019image (images<\/code>) et les positions (map<\/code>). On cr\u00e9e alors une vue<\/strong> tiles<\/code> qui les combine.<\/p>\n<\/blockquote>\n\n\n\n <\/span>metadata<\/code><\/span><\/h5>\n\n\n\nTable cl\u00e9-valeur (cl\u00e9 = texte, valeur = texte) qui contient des informations essentielles pour l\u2019interpr\u00e9tation du fichier.<\/p>\n\n\n\n Cl\u00e9<\/th> Exemple de valeur<\/th> Utilit\u00e9<\/th><\/tr><\/thead> name<\/code><\/td> \"Rodrigues Map\"<\/code><\/td> Nom lisible<\/td><\/tr> format<\/code><\/td> \"png\"<\/code>, \"jpg\"<\/code>, \"pbf\"<\/code><\/td> Type de tuiles<\/td><\/tr> minzoom<\/code><\/td> 5<\/code><\/td> Niveau de zoom minimal<\/td><\/tr> maxzoom<\/code><\/td> 14<\/code><\/td> Niveau de zoom maximal<\/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> Centre de la carte (lon, lat, z)<\/td><\/tr> type<\/code><\/td> \"baselayer\"<\/code> ou \"overlay\"<\/code><\/td> R\u00f4le du jeu de tuiles<\/td><\/tr> json<\/code><\/td> JSON Mapbox (si vectoriel)<\/td> Style, couches, champs<\/td><\/tr> attribution<\/code><\/td> Texte HTML<\/td> Source \u00e0 afficher<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<\/span>(optionnel) grids<\/code>, grid_data<\/code>, keymap<\/code><\/span><\/h5>\n\n\n\nUtilis\u00e9es pour le format UTFGrid<\/strong>, une forme obsol\u00e8te d’interactivit\u00e9 dans les fonds raster.<\/p>\n\n\n\n \n\n\n\n<\/span>Remarques importantes<\/span><\/h3>\n\n\n\n\nLes coordonn\u00e9es tile_row<\/code> sont souvent invers\u00e9es selon le syst\u00e8me de tuile :\n\nTMS (Tile Map Service)<\/strong> : l’origine est en bas \u00e0 gauche<\/strong>.<\/li>\n\n\n\n XYZ (Web standard)<\/strong> : l’origine est en haut \u00e0 gauche<\/strong>.<\/li>\n\n\n\n La plupart des serveurs et viewers modernes utilisent XYZ<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Le champ tile_data<\/code> contient :\n\nUne image compress\u00e9e (png<\/code>, jpg<\/code>) pour raster<\/strong>.<\/li>\n\n\n\n Un objet PBF zlib-compress\u00e9<\/strong> pour vectoriel<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Pour les tuiles vectorielles, le champ json<\/code> dans metadata<\/code> peut contenir : { \"vector_layers\": [ { \"id\": \"buildings\", \"description\": \"\", \"minzoom\": 12, \"maxzoom\": 16, \"fields\": { \"name\": \"String\", \"height\": \"Number\" } } ] }<\/code><\/li>\n<\/ul>\n\n\n\n<\/span>Utilisation des fichiers MBTiles avec Leaflet<\/span><\/h2>\n\n\n\nLeaflet est une biblioth\u00e8que JavaScript populaire pour la cr\u00e9ation de cartes interactives. Elle prend en charge l’int\u00e9gration de nombreux types de fonds de carte, y compris les fichiers MBTiles. Voici les \u00e9tapes typiques et les cas d’usage pour int\u00e9grer des fichiers MBTiles dans une carte Leaflet.<\/p>\n\n\n\n <\/span>1. Pr\u00e9requis : Un serveur de tuiles<\/strong><\/span><\/h3>\n\n\n\nAvant d’utiliser des fichiers MBTiles avec Leaflet, il est n\u00e9cessaire de mettre en place un serveur de tuiles, car Leaflet ne charge pas directement des fichiers MBTiles locaux. Ce serveur va servir les tuiles en tant qu’images ou en format vectoriel, accessibles via une URL.<\/p>\n\n\n\n Les options pour h\u00e9berger les MBTiles sont vari\u00e9es :<\/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> (pour une installation l\u00e9g\u00e8re)<\/li>\n\n\n\n Tileserver-php<\/a><\/li>\n<\/ul>\n\n\n\nUne fois le serveur configur\u00e9, il peut diffuser les tuiles via HTTP, que Leaflet peut appeler pour les afficher sur la carte.<\/p>\n\n\n\n<\/span>2. Int\u00e9gration de MBTiles avec Leaflet<\/strong><\/span><\/h3>\n\n\n\nVoici un exemple simple d\u2019utilisation d’un serveur de tuiles avec Leaflet pour afficher des donn\u00e9es provenant d\u2019un fichier .mbtiles<\/code> :<\/p>\n\n\n\n<\/span>Exemple avec tuiles raster<\/span><\/h4>\n\n\n\n<\/span>a)Lancer le serveur de tuiles<\/span><\/h5>\n\n\n\nPositionnez-vous dans le r\u00e9pertoire contenant les tuiles raster.<\/p>\n\n\n\n php.exe -S localhost:8081<\/em><\/strong><\/p>\n\n\n\n lancez le seveur de tuiles<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nLa page html suivante affiche le contenu des tuiles du fichier countries.mbtiles situ\u00e9 dans le sous_dossier tiles\/. Dans le navigateur vous devez rentrer l’adresse localhost:8081\/nom_de_la_page.html<\/em><\/strong><\/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 Le r\u00e9sultat est le suivant:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/span>3. Tuiles vectorielles (MBTiles PBF)<\/strong><\/span><\/h3>\n\n\n\nSi vous utilisez un fichier MBTiles vectoriel (par exemple, g\u00e9n\u00e9r\u00e9 par MapTiler ou Mapbox), vous devrez configurer Leaflet avec un plugin qui peut interpr\u00e9ter les tuiles vectorielles. Leaflet.VectorGrid<\/strong> est l’un des plugins qui permet de g\u00e9rer les tuiles vectorielles dans Leaflet.<\/p>\n\n\n\n <\/span>Exemple avec tuiles vectorielles (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 Dans cet exemple, le serveur Flask ou Tileserver-GL est utilis\u00e9 pour fournir les tuiles vectorielles, que Leaflet rend sous forme de vecteurs \u00e0 l’aide de L.vectorGrid<\/code>.<\/p>\n\n\n\n Mais, attention, ce n’est pas aussi simple qu’avec les tuiles raster. <\/p>\n\n\n\n <\/span>Symbologie<\/span><\/h5>\n\n\n\nLa premi\u00e8re diff\u00e9rence r\u00e9side sur le fait que les tuiles vectorielles, contrairement aux tuiles raster, n’ont pas de symbologie associ\u00e9e au niveau du serveur. Vosu \u00eates alors oblig\u00e9s de d\u00e9finir la symbologie au niveau du client html. Vous pouvez le constater dans le code exemple ci-dessus:<\/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 Ce qu’il faut aussi savoir c’est qu’il n’y a pas de symbologie par d\u00e9faut. Si une couche n’a pas de d\u00e9finition de symbologie au niveau du vectorTileLayerStyles, elle ne sera pas affih\u00e9e. Dans notre exemple, seuls les b\u00e2timents et les parcs seront affich\u00e9s, toutes les autres couches (routes, etc.) seront ignor\u00e9es.<\/p>\n\n\n\n <\/span>D\u00e9pendances<\/span><\/h5>\n\n\n\nLeaflet.VectorGrid<\/strong> poss\u00e8de plusieurs d\u00e9pendance qui peuvent compliquer le fonctionnement du serveur de tuiles local. Quand on affiche un fichier .mbtiles<\/code> converti en .pbf<\/code> via tileserver.php<\/code><\/strong> (par exemple), on fait appel \u00e0 des tuiles vectorielles brutes<\/strong> depuis un serveur PHP local, sans les bons headers ou encodages. Or :<\/p>\n\n\n\n \nCes tuiles n\u00e9cessitent pbf.js<\/code> (ce qu’on peut ajouter: <\/strong>src=\u00a0\u00bbhttps:\/\/unpkg.com\/pbf@3.2.1\/dist\/pbf.js\u00a0\u00bb)<\/strong><\/li>\n\n\n\n Mais aussi @mapbox\/vector-tile<\/code><\/strong> pour d\u00e9coder les contenus .pbf<\/code><\/li>\n<\/ul>\n\n\n\nOr, cette derni\u00e8re n\u2019est pas disponible sous forme de fichier .js<\/code> utilisable directement dans une page HTML<\/strong> : elle est \u00e9crite pour Node.js ou pour un bundler moderne (Webpack, Vite, etc.).<\/p>\n\n\n\n <\/span>Encodage<\/span><\/h5>\n\n\n\nLe code PHP de tileserver.php<\/code> par d\u00e9faut est configur\u00e9 pour g\u00e9rer des tuiles raster (image PNG), mais pas des tuiles vectorielles (.pbf<\/code>).<\/p>\n\n\n\n Il faudra donc ajuster le fichier tileserver.php pour servir des tuiles vectorielles (PBF):<\/p>\n\n\n\n Modification de l’en-t\u00eate Content-Type<\/code><\/strong>: Pour des tuiles vectorielles, il faut sp\u00e9cifier un en-t\u00eate Content-Type: application\/x-protobuf<\/code>, car les tuiles vectorielles sont des fichiers au format Protobuf (.pbf<\/code>), et non des images PNG.<\/p>\n\n\n\n <\/span>Exemple de Code PHP modifi\u00e9 pour servir des tuiles vectorielles (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. Scalabilit\u00e9 et autres utilisations<\/strong><\/span><\/h3>\n\n\n\nLes fichiers MBTiles sont particuli\u00e8rement pratiques dans les sc\u00e9narios o\u00f9 :<\/p>\n\n\n\n \nLa performance est un enjeu important, car les tuiles peuvent \u00eatre diffus\u00e9es efficacement gr\u00e2ce \u00e0 un serveur de tuiles optimis\u00e9.<\/li>\n\n\n\n Vous souhaitez distribuer un grand nombre de tuiles hors ligne ou dans un environnement sans connexion \u00e0 Internet (tuiles pr\u00e9-g\u00e9n\u00e9r\u00e9es et stock\u00e9es dans un seul fichier).<\/li>\n\n\n\n Les tuiles sont g\u00e9n\u00e9r\u00e9es \u00e0 partir de donn\u00e9es qui \u00e9voluent fr\u00e9quemment, et vous avez la possibilit\u00e9 de les mettre \u00e0 jour ou de les remplacer avec un minimum de perturbation pour les utilisateurs finaux.<\/li>\n<\/ul>\n\n\n\n \n\n\n\n<\/span>Conclusion<\/span><\/h3>\n\n\n\nLe format MBTiles est tr\u00e8s bien adapt\u00e9 aux applications Leaflet, car il offre une solution simple et efficace pour servir des tuiles g\u00e9ospatiales, qu’elles soient raster ou vectorielles. Avec une installation l\u00e9g\u00e8re et un serveur de tuiles bien configur\u00e9, il devient facile d’afficher des cartes de mani\u00e8re performante et de g\u00e9rer une grande quantit\u00e9 de donn\u00e9es g\u00e9ospatiales.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Introduction : Qu\u2019est-ce que le format MBTiles ? Le format MBTiles est un format de fichier permettant de stocker des tuiles cartographiques (raster ou vectorielles) dans une base de donn\u00e9es SQLite, un moteur de base de…<\/p>\n","protected":false},"author":1,"featured_media":13823,"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":[1636,2929],"tags":[3056,412,3052,17,199,3054,3060,3058,3062,1303,21],"class_list":["post-13712","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spatialite","category-webmapping","tag-flask","tag-leaflet","tag-mbtiles","tag-raster","tag-spatialite","tag-sqlite","tag-tileserver-gl","tag-tileserver-php","tag-tilestache","tag-tuiles","tag-vecteur"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/05\/image_mbtiles_leaflet.jpg?fit=1024%2C1024&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-3za","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13712","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=13712"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13712\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13823"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/span>a) tiles<\/code><\/span><\/h4>\n\n\n\nC\u2019est la table centrale. Elle contient les tuiles encod\u00e9es, chacune identifi\u00e9e par ses coordonn\u00e9es de zoom, colonne (x), et ligne (y) :<\/p>\n\n\n<\/div>