City-Roads: una herramienta gratuita y de código abierto para dibujar redes de carreteras urbanas 133

¿Qué es City-Roads?

City-Roads es una herramienta gratuita y de código abierto diseñada específicamente para dibujar redes de carreteras urbanas. Utiliza datos de OpenStreetMap y renderiza mediante WebGL del navegador, sin necesidad de instalar software adicional. Basta con abrir la página web, introducir el nombre de una ciudad y ver todas sus carreteras, además de poder guardar la imagen en alta resolución como PNG o SVG. Muchos diseñadores, urbanistas y aficionados a los mapas la utilizan para generar imágenes rápidamente, crear pósters artísticos o analizar ciudades.

Características principales de City-Roads

• Renderizado rápido: millones de tramos de carretera se muestran rápidamente; los datos de más de tres mil grandes ciudades están prealmacenados, por lo que se abren al instante.

• Sin servidor: todo se hace en el frontend, con Vue y WebGL. Tras obtener el código, ejecute npm install y npm run dev localmente.

• Estilo personalizable: el panel derecho permite cambiar el color de las carreteras, el grosor, el color de fondo, así como añadir o quitar nombres de lugares, lo que facilita crear estilos sencillos, tecnológicos o dibujados a mano.

• Múltiples formatos de exportación: tras dibujar, puedes descargar directamente como PNG o SVG, lo que resulta útil para organizar versiones, imprimir, colocar en ppt o compartir en redes sociales.

• Modificable mediante scripts: cuenta con SceneAPI, que permite cambiar colores con código, colorear según el nivel de la carretera, capturar múltiples imágenes a la vez e integrarlo en tus propios proyectos.

Cómo usar City-Roads

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

2. Escribe el nombre de una ciudad en el cuadro de búsqueda, por ejemplo, Beijing, Shanghai, New York, y espera a que termine de cargar.
   

3. Modifica los colores de las carreteras y del fondo en la página, y añade el nombre de la ciudad.

4. Haz clic en descargar y elige PNG o SVG.

Nota

La primera búsqueda requiere esperar a que se obtengan los datos de la red; la API OverPass tiene limitaciones y a veces puede ser un poco lenta; las ciudades ya almacenadas son mucho más rápidas. La página permite ampliar y reducir, lo que facilita ver carreteras de diferentes tamaños.

Desarrollo local de City-Roads

• Prepara el entorno de Node.js

• Clona el repositorio e instala las dependencias:

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

• El navegador abre automáticamente http://localhost:8080; introduce una ciudad en el cuadro de búsqueda (por ejemplo, "Chengdu") y genera la red de carreteras al instante.

• Ajusta el color y el grosor de las líneas en la barra de control de la derecha → haz clic en "Export" para guardar como PNG / SVG.

• Adecuado para aficionados al frontend, la visualización y los mapas, que pueden ampliar las interacciones, estilos y procesos de manejo de datos sobre esta base.

Casos de uso de City-Roads

• Enseñanza o divulgación: comparar las redes de carreteras de distintas ciudades, por ejemplo, en cuadrícula o radiales, y de paso explicar conceptos como el camino más corto y la conectividad.

• Diseño o material: guardar SVG o PNG en alta resolución para crear pósters, PPT, fondos de pantalla o imprimirlos en objetos como tazas.

• Planificación y movilidad: ver de un vistazo la densidad y la estructura de las carreteras, lo que ayuda a hablar sobre tráfico y estructura espacial.

• Análisis sencillo: observar rápidamente cómo se expande una ciudad, los niveles de las vías y dónde se concentran los atascos.

• Urbanismo: comparar la densidad y el patrón (cuadrícula o radial) de las redes de carreteras de diferentes ciudades, ayudando a elegir ubicaciones e identificar problemas de tráfico.

• Creación artística: usar la red de carreteras como patrón para pósters, camisetas, fondos de móvil; combinar varias ciudades da como resultado imágenes muy singulares.

• Demostraciones en clase: mostrar en directo distintas ciudades en una clase de geografía para explicar las diferencias de trazado; en una clase de GIS, sirve para mostrar cómo son los datos de OpenStreetMap.

Dirección de Github:https://github.com/anvaka/city-roads