본문 바로가기

JAVASCRIPT

HIGH MAP을 이용한 BUBBLE 올리기 -1

다른 동료의 부탁으로

High Map을 이용해서 Bubble을 올려보기로 했습니다.

 

High charts는 여러가지가

있는데요 Map과 Stock 정도가 있습니다. 나머지는 당연히 chart이구요.

요즘 GIS 위에다가 각종 정보들을 매쉬업해서 사용자들에게 표출해주는 것이 많이 요구되는 실정인데요. 그러다보니 d3라든지 high map이라든지 GIS에 시각적으로 다양한 정보들을 표출해 줄 수 있는 라이브러리가 많이 사용되고 있습니다.

 

하지만, High Chart는 라이센스비가 조금 비쌉니다.

http://www.highcharts.com/maps/demo

는 High Map 사이트이구요. 여러가지 demo를 볼 수 있어요.

 

그러면 High Map에 우리나라 대전 행정구역 폴리곤을 올리는 방법과 어디서 받는지 그걸high에 어떻게 쓸건지 적어둘려구요.

순서는 이렇습니다.

1. 폴리곤(행정구역)을 구해야합니다.

폴리곤은 좌표로된 점과 점을 이어 다각형을 만듭니다. 이걸 사용해서 다양한 모양의 도형을 지도 위에 올릴 수 있어요. 이걸 통해서 행정구역을 표시하는 겁니다.

http://sgis.kostat.go.kr/

GIS 통계 지리정보(SGIS)에 가시면 각종 통계 수치를 지도상 보기 쉽게 표시해두었어요. 중간 아래 보시면 '행정구역 경계지도'라는 메뉴가 있는데 그걸 통해서 들어갑니다.




우리 나라 지도가 뜨고 왼쪽에 경계를 '시도, 시군구, 읍면동'으로 설정할 수 있구요. 지역을 세부적으로 설정할 수 있어요. 전 대전을 할거라서 읍면동에 대전광역시>전체>전체로 설정해서 SHP원데이터를 다운받았습니다.

국가마다 혹은 시대별로 기준이 되는 좌표계가 다 다릅니다.

여기서 다운받으면 그 좌표는 TM_M 좌표라고 하는군요.


2. SHP 파일 GEOJSON 변환하기

폴리곤을 그리기위해서는 라이브러리에서 인식가능한 geoJson 형태로 저장을 해야합니다. 그래서 'Qgis'라는 프로그램을 이용해서 좌표 변환을 합니다. 

http://www.qgis.org/ko/site/

다운로드 받아서 사용하시면되구요. 오픈 소스라서 꽁짜!! 입니다


설치하고

SHP 파일을 아래와 같이 열어요.

좌표계를 다르게 설정하면 레이어가 안보입니다.


이렇게 SHP 데이터를 오른하시면 어래와 같이 행정구역을 볼수도 있고 Geojson으로 저장도 가능합니다.


형식은 geoJson으로 지정해주는거 잊지 마시구요.

확인 누르시면 지정하신 위치에 geojson이 생긴걸 확인할 수 있습니다.


일단 여기까지 SHP 원데이터를 어떻게 geoJson으로 변환하는지에 대한 과정을 적어보았습니다.


다음으로는 좌표 변환을 어떻게 하는지에 대해서 알아보겠습니다~