[React] QGIS, D3.js를 이용해서 서울시 지도 그리기 - 1. 지도 데이터 받기

1. 들어가기 전에

 

  2차 프로젝트를 진행할 때 서울시 지도를 그려서 구별로 다른 정보를 표시하도록 구현을 하고자 했습니다. 처음에는 서울시 지도 이미지를 넣고 좌표 값마다 링크를 다르게 주는 방식으로 구현을 하고자 했으나 현업에서 일하고 있는 친구가 D3.js를 추천해 주었고 직접 구현을 해보니 너무 만족스러웠습니다. 3D 디자인은 프론트엔드 하시는 다른 팀원분께서 지도를 여러 번 겹쳐서 만들어주셔서 멋진 지도를 구현할 수 있었습니다. 앞으로 위 이미지와 같이 QGIS와 D3.js를 이용해서 서울시 지도를 구현하는 방법을 설명드리겠습니다.

---

2. 통계지리정보서비스 홈페이지에서 지도 데이터 다운 받기

 

  먼저 통계지리정보서비스 홈페이지(링크)에 접속한 후에 회원가입을 합니다. 회원가입 완료 후 자료제공 → 자료 신청 메뉴로 들어가 주세요.

 

  기본 정보에 소속과 연락처, 메일주소, 요청 목적, 활용 목적, 수행과제를 적습니다. 저는 소속은 민간, 요청목적은 지도 작성을 선택했습니다. 활용 목적과 수행과제는 대충 적으면 됩니다. 어차피 자동 승인되기 때문에 대충 적어도 승인이 됩니다. 제출 동의 및 자료제공기간에 동의를 하고 자료 선택에서는 통계지역경계, 자료대상은 센서스용 행정구역경계(시군구)를 선택해 주세요. 경계년도는 가장 최신 것을 선택하고 시도/시군구는 서울, 전체를 선택한 후 추가 버튼을 눌러주세요. 추가가 끝났으면 신청 완료를 눌러주세요.

 

  10분 정도 기다린 후 신청 내역을 보면 진행상태가 승인으로 바뀝니다. 신청자료 다운로드 메뉴로 가서 다운로드를 눌러주세요. 다운로드가 완료되면 압축을 풀어줍니다. QGIS를 설치하고 다운로드한 지도 데이터를 불러오는 방법은 다음 글에서 설명드리겠습니다.