Tuilage des données OSM avec Leaflet

Carte d’occupation du sol (Landuse d’OSM)

osm landuse diouck
Principe du tuilage:
Le tuilage est le re-découpage d’un raster en petite images à des échelles prédéfinies pour être utilisé par des outils web.
Le tuilage va donc découper le raster sur plusieurs échelles (pyramidage) en autant de petites images (tuilage), dont le nom du dossier et celui de l’images sont les coordonnées x et y dans le système de projection mercator.
diouck pyramides
1/- Données: Pays de la Loire à télécharger depuis ce lien
2/- Analyse thématique uniquement sur la donnée « landuse »  avec Qgis et génération d’un fichier  au format png que vous pouvez télécharger  là :  OSM Landuse.
3/- Création de mosaïques d’images tuilées avec gdal2tiles.
Comme les autres outils de GDAL , il est assez facile à utiliser. Ci-dessous est un exemple de commande pour créer des tuiles de notre image.
gdal2tiles.py -z -v 7-13 "OSM Landuse.png" "OSM Landuse"
Pour faire simple nous allons créer une pyramide avec les niveaux de zoom allant de 7 à 13 dans le dossier OSM Landuse. La derniere version de gdal vous crée automatiquement un dossier pour chaque niveau de zoom.
4/- Intégration des tuile dans une application.
Je ne vais pas rentrer dans les détails de créations de cartes mais juste juste vous monter comment intégrer notre pyramide tuilée dans une application. Vous avez simplement à rajouter cette ligne:
var mytile =L.tileLayer(‘landuse/{z}/{x}/{y}.png’,{tms: ‘true’}).addTo(map);
La carte est accessible depuis ce lien

10 commentaires Ajouter un commentaire

  1. Frasan dit :

    Bonjour,
    merci pour les explications, une question : vous utilisez quel serveur de tuiles pour la diffusion ?
    merci

    1. ABDOU DIOUCK dit :

      Bonjour
      En faite n avez pas besoin de server pour les tuiles générées par gdal ou qgis vous pouvez les mettre a la racine de votre application. Sinon vous pouvez aussi par exemple importer les tuiles dans geoserver avec image pyramide pour faciliter l accès

  2. Geo-x dit :

    Bonjour et merci pour ce Tuto fort intéressant.
    Vous utilisez quelle méthode pour transformer vos vecteurs en PNG depuis QGis ?

    1. ABDOU DIOUCK dit :

      Bjr
      Pour exporter votre vecteur au format PNG, allez dans QGIS, puis au niveau du menu, cliquez sur « Projet »/ »Enregistrer comme image » et choisissez « PNG » .
      Ou bien créez un composeur et exporter le au format PNG

      1. Geo-x dit :

        Merci beaucoup pour votre réponse.

  3. Geo-x dit :

    Est-il possible d’appliquer des images différentes selon l’échelle voulue ?

  4. ABDOU DIOUCK dit :

    Vous pouvez rajouter autant d’images que vous voulez
    et gérer également les échelles gdal2tiles.py -z -v 7-13 ici de 7 à 13 sachant que les echelles de google ou OSM sont de 0 à 22

    1. Geo-x dit :

      Si je comprend bien, par exemple on pourrait très bien faire avec une image : « gdal2tiles.py -z -v 7-13′ suivi de, avec une autre image « gdal2tiles.py -z -v 13-22 », c’est bien ça ?

  5. ABDOU DIOUCK dit :

    Oui c’est ça
    Exemple
    gdal2tiles.py -z -v 7-13 « image1.png » « image2 »
    gdal2tiles.py -z -v 7-22 « image2.png » « image2 »
    et tu auras 2 dossiers séparés avec les différents niveau de zoom
    Mais attention au niveau 14 tu ne verras plus image1 a cause du max zoom limité à 13
    et dans leaflet
    var image1=L.tileLayer(‘image1/{z}/{x}/{y}.png’,{tms: ‘true’}).addTo(map);
    var image2=L.tileLayer(‘image2/{z}/{x}/{y}.png’,{tms: ‘true’}).addTo(map);

    1. Geo-x dit :

      Merci pour toutes ces précieuses précisions et bravo pour votre blog, très belles carte et tutos épurés

Répondre à Geo-x Annuler la réponse.