Comment créer des cartes stylisées personnalisées à l'aide d'OpenStreetMap : 7 étapes (avec des images)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Dans ce instructable, je vais décrire un processus par lequel vous pouvez générer vos propres cartes stylisées sur mesure. Une carte stylisée est une carte où l'utilisateur peut spécifier quelles couches de données sont visualisées, ainsi que définir le style avec lequel chaque couche est visualisée. Je vais d'abord décrire le processus par lequel vous pouvez écrire un logiciel pour styliser des cartes, suivi d'un exemple du logiciel Python que j'ai écrit pour effectuer cette tâche.

La vidéo suivante montre comment je génère personnellement des cartes stylisées, mais continuez à lire pour les détails intimes. Je suis très excité de voir ce que la communauté crée!

Quelle est ma motivation derrière ce projet ?

Très franchement, j'ai commencé ce projet parce que je pensais que ce serait amusant à faire. Cette idée me trotte dans la tête depuis un an et j'ai enfin pris le temps qu'il fallait pour la concrétiser. Après une journée de prototypage avec quelques scripts de base, j'ai pu générer des résultats extrêmement prometteurs - si prometteurs que je savais que je devais formaliser mes scripts de manière à ce que d'autres puissent facilement créer leurs propres créations.

Ma motivation en écrivant cette instructable est due au fait que j'ai trouvé des informations très minimes sur la façon de créer vos propres cartes stylisées à partir de zéro. J'espère partager ce que j'ai appris avec la communauté.

Ressources/Liens:

• OpenStreetMap
• OpenStreetMap Mentions légales
• Dépôt Github

Fournitures

• Une distribution Python (j'ai utilisé Anaconda & Python 3.6)
• PyQt5 (pour les dépendances GUI)

Étape 1: Définir le processus I: Télécharger le fichier OSM

Lorsque j'ai commencé ce projet pour la première fois, la question la plus flagrante était « où puis-je obtenir des données cartographiques ». Naturellement, comme vous vous en doutez, j'ai immédiatement pensé à Google Maps. Après des recherches approfondies, j'ai découvert que Google ne veut vraiment pas que les gens jouent avec leurs données, dans un sens créatif ou autre. En fait, ils interdisent explicitement le grattage Web à partir de Google Maps.

Heureusement, mon désespoir fut de courte durée lors de ma découverte d'OpenStreetMap (OSM). OSM est un projet collaboratif impliquant des personnes du monde entier qui fournissent des données. OSM autorise explicitement l'utilisation illimitée de leurs données au nom d'un logiciel Open Source. En tant que tel, la visite de la page Web de l'OSM est le point de départ du voyage de stylisation de la carte.

Une fois arrivé sur le site Web de l'OSM, cliquez sur l'onglet « Exporter » pour afficher les outils d'exportation de carte. Maintenant, effectuez un zoom avant pour afficher la région avec laquelle vous souhaitez collecter des données cartographiques. Sélectionnez le lien « Sélectionnez manuellement une autre zone », qui fera apparaître une boîte sur votre écran. Façonnez et placez cette boîte sur la région d'intérêt. Une fois satisfait, cliquez sur le bouton "Exporter" pour télécharger votre fichier de données OSM.

Remarque #1: Si votre région sélectionnée contient trop de données, vous obtiendrez une erreur indiquant que vous avez sélectionné trop de nœuds. Si cela vous arrive, cliquez sur le bouton "Overpass API" pour télécharger votre fichier plus volumineux.

Remarque #2: Si votre fichier OSM téléchargé est supérieur à 30 Mo, le programme Python que j'ai écrit ralentira sensiblement. Si vous êtes déterminé à utiliser une grande région, envisagez d'écrire un script pour éliminer les données superflues que vous n'avez pas l'intention de dessiner.

Étape 2: Définir le processus II: Comprendre les données

"J'ai les données… et maintenant ?"

Commencez par ouvrir votre fichier OSM téléchargé dans votre logiciel d'édition de texte préféré. Vous remarquerez d'abord qu'il s'agit d'un fichier XML, ce qui est génial ! XML est assez facile à analyser. Le début de votre fichier devrait être presque identique à la première image de cette étape - certaines métadonnées de base et limites géographiques seront répertoriées.

Lorsque vous faites défiler le fichier, vous remarquerez trois éléments de données utilisés tout au long:

1. Nœuds
2. Façons
3. Rapports

L'élément de données le plus basique, un nœud a simplement un identifiant unique, une latitude et une longitude qui lui sont associés. Bien sûr, il existe des métadonnées supplémentaires, mais nous pouvons les supprimer en toute sécurité.

Les chemins sont des collections de nœuds. Un chemin peut être rendu sous la forme d'une forme fermée ou d'une ligne ouverte. Les chemins consistent en une collection de nœuds identifiés par leur identifiant unique. Ils sont étiquetés avec des clés qui définissent le groupe de données auquel ils appartiennent. Par exemple, la manière illustrée dans la troisième image ci-dessus appartient au groupe de données « lieu » et à son sous-groupe « île ». En d'autres termes, ce chemin particulier appartient à la couche "île" sous le groupe "lieu". Les chemins ont également des identifiants uniques.

Enfin, les relations sont des ensembles de voies. Une relation peut représenter une forme complexe avec des trous ou avec plusieurs régions. Les relations auront également un identifiant unique et seront étiquetées de la même manière.

Vous pouvez en savoir plus sur ces éléments de données sur le wiki OSM:

• Nœuds
• Façons
• Rapports

Étape 3: Définir le processus III: Digérer les données

Maintenant, vous devriez avoir au moins une compréhension superficielle des éléments de données qui composent un fichier OSM. À ce stade, nous souhaitons lire les données OSM dans la langue de votre choix. Bien que cette étape soit centrée sur Python, si vous ne souhaitez pas utiliser Python, vous devriez toujours lire cette partie car elle contient quelques trucs et astuces.

Le package xml est inclus par défaut avec la plupart des distributions Python standard. Nous allons utiliser ce package pour analyser très facilement notre fichier OSM comme indiqué dans la première image. Dans une seule boucle for, vous pouvez traiter le traitement des données OSM pour chaque élément de données particulier.

Sur la dernière ligne de l'image, vous remarquerez que je vérifie la balise 'bounds'. Cette étape est d'une importance vitale pour traduire les valeurs de latitude et de longitude en pixels sur l'écran. Je recommande fortement d'exécuter cette conversion au moment où vous chargez le fichier OSM, car la conversion de masse des données est intensive en processus.

En parlant de convertir les latitudes et les longitudes en coordonnées d'écran, voici un lien vers la fonction de calcul que j'ai écrite. Vous remarquerez probablement quelque chose d'un peu étrange dans la conversion de la latitude en coordonnées d'écran. Il y a une étape supplémentaire par rapport à la longitude ! Il s'avère que les données OSM sont modélisées à l'aide de la méthode de projection Pseudo-Mercator. Heureusement, OSM a une documentation fantastique sur ce sujet ici, et ils fournissent les fonctions de conversion de latitude pour un nombre important de langues. Impressionnant!

Remarque: Dans mon code, la coordonnée de l'écran (0, 0) correspond au coin supérieur gauche de l'écran.

Étape 4: Implémentation de Python Map Stylizer

Jusqu'à présent, j'ai discuté du fichier de données OSM - ce que c'est, comment le lire et quoi en faire. Je vais maintenant discuter du logiciel que j'ai écrit pour aborder la visualisation de carte stylistique (repo GitHub fourni dans l'introduction).

Mon implémentation spécifique se concentre sur le contrôle utilisateur du pipeline de rendu. Plus précisément, je permets à l'utilisateur de sélectionner les couches qu'il souhaite voir et comment il souhaite que cette couche soit visualisée. Comme je l'ai brièvement mentionné précédemment, il existe deux classes d'éléments rendus: les éléments de remplissage et les éléments de ligne. Les remplissages sont définis uniquement par une couleur, tandis que les lignes sont définies par la couleur, l'épaisseur de ligne, le style de ligne, le style de fin de ligne et le style de jointure de ligne.

Au fur et à mesure que l'utilisateur modifie les styles et la visibilité des couches, les modifications sont reflétées dans le widget de carte à droite. Une fois qu'un utilisateur a modifié l'apparence de la carte à sa satisfaction, il peut ajuster la dimension maximale de la carte et enregistrer la carte sous forme d'image sur son ordinateur. Lors de l'enregistrement d'une image, un fichier de configuration utilisateur sera également enregistré. Cela garantit qu'un utilisateur peut rappeler et réutiliser la configuration qu'il a utilisée pour générer une image particulière à tout moment.

Étape 5: Implémentation Inconvénient + Solution

Lorsque j'ai commencé à styliser une carte manuellement, j'ai appris que c'était un processus plutôt fastidieux. Offrir à l'utilisateur un contrôle maximal peut être tout simplement écrasant en raison du grand nombre de « boutons » disponibles. Cependant, il existe une solution simple, qui implique un petit script supplémentaire.

J'ai commencé par identifier les couches qui m'intéressent particulièrement. Aux fins de cette instructable, disons que je suis plus intéressé par les bâtiments (tous), les rivières, les autoroutes principales et les rues de surface. J'écrirais un script dans lequel je créerais une instance de Configuration, basculerais les états de calque de manière appropriée à l'aide de la fonction setItemState () et des constantes définies, et définirais les couleurs en fonction de la façon dont je souhaite que mes calques apparaissent à l'aide de setValue (). Le fichier de configuration résultant qui est enregistré peut être copié dans le dossier configs et chargé par l'utilisateur.

Un exemple de script est dans l'image ci-dessus. La deuxième image est un exemple de ce à quoi ressembleraient les fonctions d'assistance, et comme elles sont fondamentalement toutes identiques, avec juste des constantes variables, je n'ai inclus qu'une image d'un exemple.

Étape 6: Domaines à améliorer

Après avoir réfléchi à l'implémentation de mon logiciel, j'ai identifié plusieurs domaines qui seraient des améliorations utiles pour les utilisateurs expérimentés.

1. Rendu de couche dynamique. Actuellement, j'ai une liste prédéfinie de calques qui seront rendus, c'est tout. Une partie de la justification était la difficulté de déterminer si un calque devait être une ligne ou un remplissage. En conséquence, avec presque tous les fichiers OSM que vous ouvrez, vous serez accueilli avec une multitude d'avertissements concernant les calques qui ne seront pas rendus. Souvent, ceux-ci sont si minimes que ce n'est pas un problème, mais il manque forcément des couches critiques. Le rendu dynamique des couches éliminerait ces problèmes.
2. Affectation dynamique des couches. Cela va de pair avec #1; si vous voulez un rendu de calque dynamique, vous avez besoin d'une affectation de calque dynamique (c'est-à-dire d'identifier un calque de remplissage par rapport à un calque de ligne). Cela pourrait raisonnablement être accompli, comme je l'ai appris, car les chemins dont le premier et le dernier nœud sont les mêmes seront des chemins fermés et donc remplis.
3. Groupes de couleurs. Une carte stylisée a souvent plusieurs couches qui ont le même style, et permettre à l'utilisateur de modifier le style d'un groupe en même temps réduirait considérablement le temps passé par l'utilisateur à éditer les couches une par une.

Étape 7: Réflexions finales

Merci à tous d'avoir pris le temps de lire mon Instructable. Ce projet représente l'aboutissement de nombreuses heures de recherche, de conception, de programmation et de débogage. J'espère avoir été en mesure de fournir une rampe de lancement à partir de laquelle vous pouvez construire votre propre projet ou construire sur ce que j'ai déjà écrit. J'espère également que mes lacunes et mes conseils fourniront de nombreux points à prendre en compte dans votre conception. Si vous êtes moins enclin à programmer et plus enclin à créer des œuvres d'art, j'aimerais bien voir ce que vous faites dans les commentaires ! Les possibilités sont infinies!

Remerciements particuliers aux contributeurs d'OpenStreetMap ! Des projets comme celui-ci ne seraient pas possibles sans leurs efforts considérables.

S'il vous plaît laissez-moi savoir si vous avez des questions dans les commentaires!

Finaliste du défi des cartes