Forum OSM France

Georéférencement d'une carte via QGIS et visualisation des tuiles sous Leaflet

Bonsoir,

Je travaille sur un projet perso utilisant Django (framework web) / Leaflet et OSM. Dans le cadre de ce projet, je cherche à afficher d’anciennes cartes via leaflet dans un repère géographique.
Après quelques échecs en utilisant différentes méthodes, j’ai fini par tomber sur QGIS qui semble être capable de georéférencer une image afin de produire les données nécessaires pour être affichées via Leaflet.

TL DR: Je pense avoir correctement géoréférence mon image, mes tuiles générées semblent matcher certains layer OSM mais quand je tente d’intégrer ces tuiles via Leaflet , j’ai décalage sur mes tuiles sur le « facteur » Y. :zipper_mouth_face:

Pour les étapes qui vont suivre, je vais détailler mes actions car l’une d’elle est peut être dû à l’origine de mon problème.

J’ai donc commencé par charger une carte OpenStreetMap (Brower → XYZ Tiles → OpenStreetMap)
Puis j’ai ouvert l’outil de géoréférencement (Raster → Georeferencer) et j’ai sélectionné mon image.
L’image sélectionné correspond à un aéroport situé à Yogyakarta situé en Indonésie sur l’ile de Java.

J’ai modifié les « Transformation Settings » de base pour sélectionner Polynomial 1 comme Transformation Type. Le reste des paramètres ont été laissé par défaut.

Ensuite j’ai géolocalisé mes points en utilisant la piste de décolage / atterissage de cet aéroport.
Puis j’ai cliqué sur « Start georeferencing » et j’ai obtenu le résultat suivant. Voir plus bas.

Le résultat est plutôt correct sur les routes à l’ouest et à l’est. J’ai juste un léger décalage sur la route au situé au Nord
Je précise que sur ce screen je suis en CRS WGS 84 / Pseudo-Mercator EPSG-3857.

A partir de ce résultat, j’ai voulu transformer ce fichier .tif en « tuiles ».
J’ai donc utilisé l’outil « gda2tiles » présent dans QGIS.

J’ai laissé les paramètres par défaut puis lancé la génération des tuiles.
Tout s’est bien déroulé. J’ai des zooms de 13 à 17 qui sont générés et j’ai même des exemples associés (dont un leaflet!) pour vérifier que tout s’est bien passé.

Je teste les layers proposés en les superposant avec mon image et là encore tout semble ok (j’ai justes des difficultés avec OSM qui ne veut pas se charger à cause d’une erreur 403).

Mais concernant les layers Stamen Toner et CartoDB Positron, ça semble correct.

A partir de là, je me dit que j’arrive au bout et que mon périple touche à sa fin !
Il ne me reste plus qu’une dernière étape. Intégrer ces tuiles à Leaflet!

Le script Leaflet que j’utilise est assez simple. D’un côté un layer OSM et de l’autre un layer avec mes tuiles.
Sachant que l’index.html est au même niveau que les répertoires allant de 13 à 17…

L.tileLayer(’/{z}/{x}/{y}.png’, {
}).addTo(map);

L.tileLayer("./{z}/{x}/{y}.png", {
}).addTo(map);

Je sauvegarde le tout, ouvre ma page HTML et tente de localiser mon aéroport et là… rien.
La carte OSM s’affiche correctement mais aucune tuile n’apparaît sur ma carte.

J’ai regardé du côté de la console du web browser, les tuiles OSM sont correctement chargés par contre mon problème viendrait du chargement de mes tuiles et pour cause… le path Z/X/Y fait référence à un mauvais path.
Par exemple, une requêtes cherche à récupérer la tuile 17/105747/68380.png.
La tuile OSM est bien trouvé via ce path par contre en local j’ai bien un répertoire /17/105747 cependant dans celui ci les tuiles vont de 68680 à 68695. Je n’ai donc pas la tuile 68380.
Et le problème est sur toutes les tuiles, j’ai bien les répertoires Z/X par contre les fichiers Y sont systématiquement décalés.

Il semblerait donc que j’ai un décalage sur « l’axe » Y. J’ai supposé que ça venait du CRS. Je suis peut être dans un repère différent de celui utilisé par OSM ? Je suis un peu à cours d’idées et j’ai du mal formuler à mon problème (et donc à chercher une solution sur gis stack exchange par exemple…) je me tourne donc vers vous au cas où vous auriez des idées / pistes sur lesquelles m’aiguiller.

En vous remerciant de m’avoir lu, je vous souhaite une bonne journée!

Sylvain.

PS: J’aurai aimé pouvoir inclure plus d’images, mais mon compte ne me le permet pas encore pour le moment.

Plusieurs étapes, donc il faut trouver laquelle pose problème.

Je résume…

  • un TIFF non géoréférencé (pas de world file associée ? dommage !)
  • géoréférencement fait dans QGIS
  • tuilage depuis QGIS (qui utilise gdal2tiles)
  • affichage dans leaflet qui ne va pas

Comme ça semble correctement calé sur les copies d’écran (faites dans QGIS ? ça ressemble à du leaflet), çe semblerai plutôt venir du tuilage.
As-tu essayé de visualiser le résultat du tuilage dans QGIS ?

Merci pour ta réponse cquest.

  • Alors à la base, je compte partir d’images jpg / png donc effectivement je ne vais pas pouvoir m’appuyer sur un TIFF déjà géoréférencé.

  • Exact !
    Je vais en profiter pour répondre à ta dernière question. Après l’étape de géoréférencement, j’ai effectivement possibilité de regarder le résultat. Hier, je ne pouvais mettre qu’une seule image dans mon post. Voici un screen de QSIS après géoréférencement.

Le rendu sous QGIS est similaire à celui que j’observe suite au tuilage sous QGIS.

  • Exact pour le tuilage, je me suis à un moment demandé si je ne devais pas utiliser gdal2xyz à la place. Mais ça ne semble ne rien avoir en commun du tout avec le tuilage.

  • Oui. Je peux aussi rajouter un autre point étrange.

A la fin de l’étape de tuilage sous QGIS, j’ai des fichiers HTML qui sont générés. J’en fais référence quand je parle des layers Stamen Toner et CartoDB Positron.
Si j’affiche mes tuiles et le layer Stamen Toner, ils vont se superposer correctement. Par contre si je regarde les requêtes envoyées, je peux voir que mes tuiles finissent par 626xx alors que les tuiles Stamen Toner finissent par 683xx.

Tout me porte à croire que mes tuiles sont donc correctement générées.
J’y pense mais il n’existerait 2 voir plusieurs référentiels de tuiles ?

Je vais creuser de ce côté…

En tout cas merci ! :slight_smile:

J’ai poussés mes investigations et en regardant de plus près le fichier HTML généré par QGIS, je me suis aperçu qu’il y avait un paramètre « TMS » qui était utilisé lors de la déclaration du layer.
Ce paramètre a en effet nu impact sur l’axe « Y » ce qui explique donc le comportement que j’observais.
Je mets un lien vers la doc leaflet, au cas où quelqu’un tomberait sur mon problème: Leaflet WMS / TMS

Mon problème est donc résolu, merci pour votre aide ! :slight_smile: