Drehbuch-Assistent▸ 
AI Apps 
AI Nachrichten 
City-Roads: ein kostenloses Open-Source-Tool zum Zeichnen städtischer Straßennetze
City-Roads: ein kostenloses Open-Source-Tool zum Zeichnen städtischer StraßennetzeEinführung
Was ist City-Roads?
City-Roads ist ein kostenloses Open-Source-Werkzeug, das speziell zum Zeichnen städtischer Straßennetze entwickelt wurde. Es nutzt Daten von OpenStreetMap und rendert die Karten über WebGL direkt im Browser – ohne Installation zusätzlicher Software. Einfach die Webseite öffnen, einen Stadtnamen eingeben und schon sieht man das gesamte Straßennetz, das sich als hochauflösendes PNG oder SVG speichern lässt. Viele Designer, Planer und Kartenbegeisterte nutzen es, um schnell Grafiken zu erstellen, Kunstposter zu gestalten oder Städte zu analysieren.
Hauptfunktionen von City-Roads
Schnelles Rendering: Millionen von Straßenabschnitten werden zügig angezeigt; die Daten von über dreitausend Großstädten sind bereits vorgeladen und sofort verfügbar.
Kein Server nötig: Alles läuft im Frontend, basierend auf Vue und WebGL. Nach dem Herunterladen des Codes einfach lokal npm install und npm run dev ausführen.
Stil frei anpassbar: Im rechten Bedienfeld können Farbe, Strichstärke und Hintergrundfarbe der Wege geändert sowie Städtenamen ein- oder ausgeblendet werden – so lassen sich einfach minimalistische, technologische oder handgezeichnet wirkende Stile erzeugen.
Mehrere Exportformate: Nach dem Rendern können PNG oder SVG direkt heruntergeladen werden – praktisch für Versionierung, Druck, die Verwendung in ppt oder zum Teilen in sozialen Netzwerken.
Skriptbasierte Anpassung: Mit der SceneAPI lassen sich Farben per Code ändern, Straßen nach Klassifizierung einfärben, mehrere Screenshots auf einmal erzeugen oder in eigene Projekte einbinden.
So verwendest du City-Roads
Öffne anvaka.github.io/city-roads
Gib einen Stadtnamen in das Suchfeld ein, z. B. Berlin, München, New York, und warte, bis die Daten geladen sind.
Passe auf der Seite die Farben von Straßen und Hintergrund an und füge den Städtenamen hinzu.
Klicke auf den Download-Button und wähle PNG oder SVG.
Hinweis
Bei der ersten Suche müssen die Daten erst aus dem Netz geladen werden; die Overpass API hat Beschränkungen und kann manchmal etwas langsamer sein. Bereits gespeicherte Städte laden dagegen deutlich schneller. Die Seite lässt sich vergrößern und verkleinern, um Straßen unterschiedlicher Größe zu betrachten.
Lokale Entwicklung mit City-Roads
Node.js-Umgebung vorbereiten
Repository klonen und Abhängigkeiten installieren:
git clone https://gitcode.com/gh_mirrors/ci/city-roads.git cd city-roads npm install npm run dev # oder npm start
Der Browser öffnet automatisch http://localhost:8080. Gib im Suchfeld eine Stadt ein (z. B. „Chengdu“), und das Straßennetz wird sofort erzeugt.
Im rechten Steuerungsbereich Farben und Linienbreite anpassen → auf „Export“ klicken, um PNG/SVG zu speichern.
Ideal für Frontend-, Visualisierungs- und Karten-Enthusiasten, die auf dieser Basis Interaktionen, Stile und Datenverarbeitungsprozesse erweitern möchten
Anwendungsbereiche von City-Roads
Lehre und Wissenschaft: Vergleich der Straßennetze verschiedener Städte, z. B. Raster- versus Radialstruktur, mit Erläuterung von Konzepten wie kürzesten Wegen und Zusammenhang.
Design und Materialerstellung: Speichern in hochauflösendem SVG oder PNG zur Verwendung für Poster, PPT, Hintergrundbilder oder zum Bedrucken von Gegenständen wie Tassen.
Planung und Verkehrsanalyse: Aus der Vogelperspektive beurteilen, wie dicht das Straßennetz ist und wie dessen Grundgerüst aussieht – hilfreich bei Diskussionen über Verkehr und Raumstruktur.
Einfache Analyse: Schnell erkennen, wie sich eine Stadt ausgedehnt hat, welche Straßenklassifizierungen bestehen und wo sich Stauungen häufen.
Stadtplanung: Dichte und Struktur (Raster oder radial) verschiedener Städte vergleichen, um Standorte auszuwählen und Verkehrsprobleme zu identifizieren.
Kunst und Kreatives: Das Straßennetz als Muster verwenden, um Poster, T-Shirts oder Handy-Hintergrundbilder zu gestalten; mehrere Städte kombiniert ergeben einen besonders auffälligen Look.
Unterrichtsdemonstration: Im Geographieunterricht live verschiedene Städte aufrufen und Layoutunterschiede aufzeigen; im GIS-Unterricht lassen sich damit Datenstrukturen aus OpenStreetMap demonstrieren.
GitHub-Adresse:https://github.com/anvaka/city-roads
