EChart 한국(Korea)지도 띄우기

ECharts 에서 맵을 사용할일이 생겼는데 중국 맵을 띄우는건 많은데 한국 지도를 어떻게 띄워야되는지 삽질한 과정을 기록한다.

우선 한국지도 데이터가 있어야되는데 ECharts는 레지스터 할때 geojson을 파라미터로 넣을수있다.

echarts.registerMap( "KOREA" , jsonData );

문제는 해당 데이터를 어디서 구해야되는지 엄청 삽질하다 보니 방법이 보이기 시작함.
과정을 정리하면

한국지도데이터를 다운로드 ( GIS Developer 사이트 추천 )

• 1. GIS Developer 사이트
• 2. 국가 공간정보포터 사이트

다운받아 zip파일 압축을 풀면 데이터 형식은 아래와 같다
*.shp
*.shx
*.prj
*.dbf

해당 파일들을 사용해 geoJson 데이터를 만들어야 되는데 단순 변환이 아니고 아래 작업을 실행해줘야됨.

• 해당데이터 셋이 EUC-KR 로 되어있어서 UTF-8로 변경
• 좌표계를 보통 웹에서 많이 사용하는 WGS 형태로 변환

이작업에 필요한 툴이 QGIS란 툴이 있다

다운받고 실행하면 아래와 같은 화면이 나옴.

*.shp 파일을 불러와 변환 및 데이터 추가 작업

1. 레이어=>레이어추가=>벡터레이어추가

추가를 선택하고 Close해준다.

위와 같이 보인다면 정상적으로 데이터를 불러온것이다.

왼쪽하단에 레이어 화면에 선택된 shp파일에서 마우스오른쪽을 누르면 메뉴가 뜨는데 그중에 속성테이블열기 선택

편집모드 전환 => 새필드

name 이란 필드를 추가해준다.

이후 위의 수식에서 CTP_KOR_NM을 name에 카피해준다.( 연산할 로우를 선택후 모두갱신 )

이제 데이터 내보내기

ESRI shapefile 선택 , 좌표계 WGS 84 , 인코딩 UTF-8

여기 까지 완료되면 웹에서 사용할수있는 형태로 shp파일변환이 1차 완료된것이다.

이후 2가지 작업을 해야됨

• 1. 경계의 디테일을 단순화
• 2. geojon 생성

경계의 단순화 작업에는 mapshaper 라는 툴을 사용할것이다. 해당 프로그램은 node로 작성되어있어서 pc에 node가 있다고 가정하고. 설치해준다.

npm install -g mapshaper

커맨드형식은 아래와 같다.
예시
$ mapshaper -i ${원본}.shp encdoding=${인코딩타입} -simplify weighted ${simplify퍼센트} -o format=shapefile ${변환파일}.shp

$ mapshaper -i TL_SCCO_SIG_WGS.shp encoding=utf-8 -simplify weighted 0.5% -o format=shapefile TL_SCCO_SIG_WGS_convert.shp

mapshaper에 gui 툴이 있으니 weighted 는 보면서 본인 용도에 맞게 조정하면됨.

이제 마지막 shp파일을 geojson형태로 변환라이브러리를 설치해야되데 해당 파일은 GDAL 다운받아 설치해준다.

python 3.6이 필수적으로 깔려있어야 인스톨이됨

설치후 아래 커맨드 실행

ogr2ogr -f GeoJSON -lco COORDINATE_PRECISION=${좌표계 소수점아래자리수} ${geojson.json} ${원본}.shp


ogr2ogr -f GeoJSON -lco COORDINATE_PRECISION=3 sig.json TL_SCCO_SIG_WGS_convert.shp

이후 Echart에서 아래 코드처럼 불러오면됨


const jsonData = require( './ctprvn.json' );

echarts.registerMap( "KOREA" , jsonData );

아래 링크는 변환된 geojson 파일이다.

https://gist.github.com/threadbuilder/2f664b55a942c8c9d85d306ad875d85d.js