대본 기획 도우미▸ 
AI 앱 
AI 뉴스 
City-Roads: 도시 도로망을 그리기 위한 무료 오픈소스 도구
City-Roads: 도시 도로망을 그리기 위한 무료 오픈소스 도구소개
City-Roads란 무엇인가요?
City-Roads는 도시 도로망을 그리는 데 특화된 무료 오픈소스 도구입니다. OpenStreetMap의 데이터를 활용하고 브라우저의 WebGL로 렌더링하므로 별도의 소프트웨어 설치가 필요 없으며, 웹페이지를 열고 도시 이름을 입력하기만 하면 모든 도로를 볼 수 있고 PNG 또는 SVG 형식의 고해상도 이미지로 저장할 수도 있습니다. 많은 디자이너, 기획 담당자, 지도 애호가들이 빠른 이미지 제작, 예술 포스터 제작, 도시 분석에 사용합니다.
City-Roads의 주요 특징
빠른 렌더링: 수백만 개의 도로 구간도 빠르게 표시되며, 3,000개 이상의 대도시 데이터는 미리 저장되어 있어 열자마자 빠르게 작동합니다.
서버 불필요: 모두 프런트엔드에서 처리되며 Vue와 WebGL을 사용하고, 코드를 다운로드한 후 로컬에서 npm install과 npm run dev를 실행하면 됩니다.
자유로운 스타일 변경: 오른쪽 패널에서 도로 색상, 굵기, 배경색을 변경할 수 있으며,地名(지명)을 추가하거나 제거할 수도 있어 심플하고 테크 감성 또는 손그림 스타일을 쉽게 구현할 수 있습니다.
다양한 형식으로 저장 가능: 그리기를 마친 후 바로 PNG 또는 SVG로 다운로드할 수 있어 인쇄용 버전, ppt 사용, 소셜 미디어 공유에 편리합니다.
스크립트로 수정 가능: SceneAPI를 통해 코드로 색상을 변경하고, 도로 등급별로 색을 칠하며, 여러 장의 이미지를 한 번에 캡처할 수 있고, 자신의 프로젝트에 임베드하여 사용할 수도 있습니다.
City-Roads 사용 방법
anvaka.github.io/city-roads를 엽니다
검색창에 도시 이름을 입력합니다. 예를 들어 베이징(北京), 상하이(上海), New York 등. 로딩이 완료될 때까지 기다립니다.
페이지에서 도로와 배경 색상을 변경하고 도시 이름을 추가합니다.
다운로드를 클릭하고 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로 저장하여 포스터, PPT, 배경화면 제작 또는 컵 같은 제품에 인쇄하는 데 사용합니다.
기획 및 이동 분석: 큰 그림에서 도로 밀도와 구조를 파악하여 교통 및 공간 구조 논의에 활용합니다.
간단한 분석: 도시 확장 방식, 도로 등급, 정체 구역의 모습을 빠르게 파악할 수 있습니다.
도시 계획: 서로 다른 도시의 도로 밀도, 격자형인지 방사형인지 비교하여 입지 선정 및 교통 문제 파악에 활용합니다.
예술 작품 제작: 도로망을 패턴으로 활용하여 포스터, 티셔츠, 모바일 배경화면을 제작하고, 여러 도시를 하나로 합치면 매우 독특한 느낌을 줍니다.
수업 시연: 지리 수업에서 실시간으로 서로 다른 도시를 띄워 배치 차이를 설명하고, GIS 수업에서는 OpenStreetMap 데이터의 모습을 보여주는 데 사용합니다.
Github 주소:https://github.com/anvaka/city-roads
