City-Roads: бесплатный инструмент с открытым исходным кодом для отрисовки городских дорожных сетей 131

Что такое City-Roads?

City-Roads — это бесплатный инструмент с открытым исходным кодом, специально предназначенный для визуализации сети городских дорог. Он использует данные OpenStreetMap и отрисовывает карту с помощью WebGL в браузере, не требуя установки дополнительного ПО. Достаточно открыть веб-страницу, ввести название города, и вы увидите все дороги; также можно сохранить результат в высоком разрешении в формате PNG или SVG. Многие дизайнеры, специалисты по планированию и любители карт используют его для быстрого создания изображений, художественных постеров или анализа городов.

Основные особенности City-Roads

• Быстрая отрисовка: миллионы участков дорог отображаются очень быстро; данные более чем трёх тысяч крупных городов предварительно загружены, поэтому страница открывается мгновенно.

• Не нужен сервер: всё работает на стороне клиента, используется Vue и WebGL; после скачивания кода достаточно запустить на своём компьютере npm install и npm run dev.

• Гибкая настройка внешнего вида: на правой панели можно менять цвет и толщину дорог, цвет фона, а также добавлять или убирать подписи, что позволяет легко получить минималистичный, футуристичный или «нарисованный от руки» стиль.

• Сохранение в разных форматах: готовый результат можно сразу загрузить в виде PNG или SVG — удобно для верстки, печати, вставки в ppt или публикации в соцсетях.

• Возможность изменения с помощью скриптов: имеется SceneAPI, позволяющий менять цвета кодом, раскрашивать по уровню дорог, делать серию снимков сразу, а также встраивать инструмент в собственные проекты.

Как пользоваться City-Roads

1. Откройте anvaka.github.io/city-roads

2. Введите название города в строке поиска, например Москва, Санкт-Петербург, New York, и дождитесь загрузки.
   

3. На странице измените цвета дорог и фона, добавьте название города.

4. Нажмите «Скачать» и выберите PNG или SVG.

Примечание

При первом поиске приходится ждать загрузку данных из сети; у Overpass API есть ограничения, иногда работает медленнее; для уже сохранённых городов всё происходит значительно быстрее. Страницу можно увеличивать и уменьшать, чтобы рассмотреть дороги разного размера.

Локальная разработка City-Roads

• Подготовьте среду Node.js

• Клонируйте репозиторий и установите зависимости:

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

• Браузер автоматически откроет http://localhost:8080; введите название города в строку поиска (например, «Chengdu»), и сеть дорог сгенерируется мгновенно.

• На правой панели настройте цвета и толщину линий → нажмите «Export», чтобы сохранить PNG / SVG.

• Подходит для фронтенд-разработчиков, специалистов по визуализации и любителей карт: можно расширять интерактивность, стили и обработку данных.

Сценарии использования City-Roads

• Преподавание и просвещение: сравнение дорожных сетей разных городов, например решётчатой и радиальной, с объяснением понятий кратчайшего пути и связности.

• Дизайн и создание материалов: сохранение изображений SVG или PNG в высоком разрешении для постеров, презентаций, обоев или нанесения на кружки и подобные предметы.

• Градостроительство и транспорт: взгляд с высоты на плотность дорог и их структуру, помогает обсуждать транспортные вопросы и пространственную организацию.

• Простой анализ: позволяет быстро увидеть, как расширялся город, каковы уровни дорог и где образуются заторы.

• Городское планирование: сравнение плотности дорог в разных городах, определение решётчатой или радиальной структуры — помогает выбирать места и выявлять транспортные проблемы.

• Создание произведений искусства: использование дорожной сети в качестве узора для постеров, футболок, обоев для телефонов; соединение нескольких городов даёт очень необычный эффект.

• Демонстрация на уроках: на уроке географии в реальном времени открывать разные города и объяснять различия в планировке; на занятиях по ГИС показывать, как выглядят данные OpenStreetMap.

Адрес на Github:https://github.com/anvaka/city-roads