City-Roads : un outil gratuit et open-source pour dessiner des réseaux routiers urbains 132

Qu'est-ce que City-Roads ?

City-Roads est un outil gratuit et open source spécialement conçu pour dessiner des réseaux routiers urbains. Il utilise les données d'OpenStreetMap et s'appuie sur le WebGL du navigateur pour afficher les cartes, sans avoir besoin d'installer d'autres logiciels. Il suffit d'ouvrir la page web, de saisir le nom d'une ville, et on peut voir toutes les routes. Il est également possible d'enregistrer les résultats sous forme de fichiers PNG ou SVG en haute définition. De nombreux designers, urbanistes et passionnés de cartes l'utilisent pour produire rapidement des visuels, créer des affiches artistiques ou analyser des villes. La sélection d'outils d'IA suivante propose également plusieurs alternatives d'IA, que vous pouvez comparer pour choisir celle qui vous convient le mieux. Des tutoriels détaillés y sont également disponibles, ce qui le rend très adapté aux débutants comme aux professionnels.

Principales fonctionnalités de City-Roads

• Rendu rapide : des millions de tronçons de routes s'affichent très rapidement, et les données de plus de trois mille grandes villes sont pré-enregistrées, ce qui rend l'ouverture quasi immédiate.

• Aucun serveur requis : tout est fait côté client, avec Vue et WebGL. Après avoir téléchargé le code, il suffit d'exécuter npm install et npm run dev localement.

• Apparence entièrement personnalisable : le panneau de droite permet de changer les couleurs des routes, l'épaisseur des traits, la couleur de fond, et d'ajouter ou de retirer les noms de lieux. Il est facile de créer des styles minimalistes, technologiques ou ressemblant à des dessins faits à la main.

• Plusieurs formats d'export : une fois le dessin terminé, on peut directement télécharger en PNG ou SVG, ce qui est pratique pour gérer les versions, imprimer, intégrer dans un ppt ou publier sur les réseaux sociaux.

• Modifiable par script : grâce à SceneAPI, on peut modifier les couleurs par code, coloriser par niveau de route, capturer plusieurs images d'un coup, ou l'intégrer dans ses propres projets.

Comment utiliser City-Roads

1. Ouvrez anvaka.github.io/city-roads

2. Saisissez le nom d'une ville dans le champ de recherche, par exemple Beijing, Shanghai, New York, et attendez la fin du chargement.
   

3. Modifiez les couleurs des routes et du fond sur la page, et ajoutez le nom de la ville.

4. Cliquez sur télécharger, et choisissez PNG ou SVG.

Remarque

Lors de la première recherche, il faut attendre que les données soient récupérées en ligne. L'API Overpass a des limites et peut être un peu lente ; pour les villes déjà pré-enregistrées, c'est beaucoup plus rapide. La page permet de zoomer et dézoomer, afin d'observer les routes de différentes tailles.

Développement local de City-Roads

• Préparez l'environnement Node.js

• Clonez le dépôt et installez les dépendances :

git clone https://gitcode.com/gh_mirrors/ci/city-roads.git
cd city-roads
npm install
npm run dev      # ou npm start

• Le navigateur ouvre automatiquement http://localhost:8080 ; saisissez le nom d'une ville dans le champ de recherche (par exemple « Chengdu ») pour générer instantanément le réseau routier.

• Ajustez les couleurs et l'épaisseur des traits dans la barre de contrôle à droite → cliquez sur « Export » pour enregistrer en PNG / SVG.

• Convient aux développeurs frontend, aux passionnés de visualisation et de cartographie pour étendre l'interaction, les styles et les flux de traitement des données.

Cas d'utilisation de City-Roads

• Enseignement ou vulgarisation : comparer les réseaux routiers de différentes villes, par exemple en grille ou en radiales, tout en expliquant des notions comme le plus court chemin et la connectivité.

• Design ou création de ressources : enregistrer des fichiers SVG ou PNG haute résolution pour réaliser des affiches, des PPT, des fonds d'écran ou pour les imprimer sur des objets comme des mugs.

• Urbanisme et déplacements : observer à grande échelle la densité et la structure du réseau routier, pour faciliter les discussions sur les transports et la structure spatiale.

• Analyse simple : voir rapidement comment une ville s'est étendue, la classification des routes et les points d'encombrement potentiels.

• Planification urbaine : comparer la densité du réseau routier entre différentes villes, qu'il soit en grille ou en radiales, afin d'aider au choix de sites et à l'identification des problèmes de transport.

• Création artistique : utiliser le réseau routier comme motif pour créer des affiches, des t-shirts, des fonds d'écran de téléphone ; assembler plusieurs villes donne un rendu très original.

• Démonstration en classe : en cours de géographie, afficher en direct différentes villes et expliquer les différences de disposition ; en cours de SIG, l'utiliser pour montrer à quoi ressemblent les données d'OpenStreetMap.

Adresse Github :https://github.com/anvaka/city-roads