anvaka/city-roads

어떤 프로젝트인가요?

핵심 기능

• 01OpenStreetMap 데이터를 사용해 도시의 모든 도로를 하나의 시각화로 렌더링
• 02데이터 로딩 속도를 높이기 위해 대도시 약 3,000곳을 캐시
• 03Nominatim 검색을 통해 도시 이름 조회
• 04사용자 지정 렌더링을 스크립팅할 수 있는 scene API 제공

활용 사례

• 추상적인 도시 지도 포스터나 벽 장식 제작
• 도시의 도로 배치를 시각적으로 살펴보기
• scene API를 활용해 사용자 지정 지도 시각화 만들기

빠른 시작

1. 1

   종속 항목 설치

   npm install
2. 2

   핫 리로드가 적용되는 로컬 개발 서버 시작

   npm run dev

사용 전 알아둘 점

• !매우 넓은 영역을 렌더링하면 메모리와 GPU 사용량에 따라 브라우저가 충돌하거나 성능이 낮은 기기에서 느려질 수 있습니다.
• !미국의 주 전체처럼 도로가 수백만 개 있는 지역을 선택하면 페이지가 충돌할 수 있습니다.

토픽

자주 묻는 질문

city-roads은(는) 무엇인가요?

브라우저에서 OpenStreetMap 데이터를 사용해 선택한 도시의 모든 도로를 지도처럼 한 번에 시각화합니다. city-roads는 도시의 모든 도로를 하나의 캔버스에 그립니다. 도시 이름을 입력하면 OpenStreetMap에서 Overpass API를 통해 도로 구간을 가져온 뒤, 스타일을 지정하고 작품으로 내보낼 수 있는 촘촘한 선화로 렌더링합니다.

city-roads은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

city-roads은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

city-roads은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. city-roads의 마지막 커밋은 2026년 10월 10일입니다.

city-roads은(는) 어디에 사용할 수 있나요?

추상적인 도시 지도 포스터나 벽 장식 제작 도시의 도로 배치를 시각적으로 살펴보기 scene API를 활용해 사용자 지정 지도 시각화 만들기

city-roads는 어떻게 설치하나요?

종속 항목 설치: npm install 핫 리로드가 적용되는 로컬 개발 서버 시작: npm run dev

city-roads은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/anvaka/city-roads