Shape 형식의 맵을 jVectorMap으로 변환할 경우 생겼던 문제점과 해결법을 정리해보면..

1. jvm 기본 컨버터를 이용해서 변환할 경우 구멍이 숭숭 뚫리는 경우가 발생한다.
2. 이를 방지하고자 QGIS 프로그램을 이용하여 SHP -> SVG로 변환하여 홈페이지에서 스크립트를 생성하였다.
3. QGIS SVG 플러그인은 SHP 파일의 속성을 SVG로 변환하지 못하기 때문에 id와 title이 id0, name0 이렇게 나오는 문제가
발생.
4. 누군가가 id와 name을 입력하겠지 했지만 다른 사이트를 찾아 이를 해결..
5. http://indiemapper.com/app/ 에서 shp -> svg 를 보다 깔끔하고 속성까지 같이 SVG로 변환해 준다.
   -> 관련글 http://www.yeory.com/275
6. 변환된 SVG를 홈페이지에서 스크립트로 생성하니 id와 name 모두 제대로 표시가 된다.
7. 영문 표기된 각 도시와 구/군 이름은 누군가 한글로 바꾸겠지 하고 패스

이로써 지도에 관련된 개발/변환 작업은 모두 끝이리라 생각했지만... 발주처인 기상청은 甲 이었다.

세종시까지 표현된.. 그리고 시/구/군명이 한글인 Shape 파일을 내게 넘기었다.

Shape 파일을 위 방식대로 변환을 시도하니 (5)의 사이트에서 한글이 깨져버린다.
외쿡 사이트여서 한글 지원이 안되나보다.... 
시간이 없다.. 그래서 아래 방법대로 복잡하지만 변환에 성공하였다... 

1. QGIS 에서 플러그인을 이용하여 한글 속성 지우기

   SVG에 속성을 포함시키는 변환법은 indiemapper 사이트를 이용하는 수 밖에 없는데 한글이 안되므로.. 빼야한다.. 
 QGIS의 플러그인을 이용하여 제거할 수 있다. ( Plug-in : Table Manager)
 


한글 속성인 SIGUNGU_NM을 선택하고 우측의 Delete를 눌러서 지운다.

아래 Save를 눌러 저장을 하고 백업을 묻는 대화상자가 나타날 경우 꼭 Yes를 누르자..
(나중에 엑셀에서 데이터 추출할때 필요하다. )


저장이 되었다면 지도를 SHP로 다시 저장한다. (한글 속성을 제외했으므로)

< 레이어 창에서 우클릭  >

< 탐색을 눌러 이름을 지정하고 아래 OK를 눌러 저장한다. >

 

 
2. 내가 표시하고자 하는 사이즈에 지도를 맞추어주기.
   http://indiemapper.com/app/ 에서 (1)에서 작업한 shp 파일을 불러와 작업을 해야한다.
   

페이지를 누르게 되면 지도 크기를 조절할 수 있는데
크기를 조절 한후 왼쪽 상단의 지구본 모양을 누르면 자동으로 지도가 맞춰진다.

[##_http://www.yeory.com/script/powerEditor/pages/1C%7Ccfile21.uf@256B8A4151FB4AD2307A74.png%7Cwidth=%22683%22%20height=%22454%22%20alt=%22%22%20filename=%22%EC%9D%B4%EB%AF%B8%EC%A7%80%2016.png%22%20filemime=%22image/jpeg%22%7C_##]

그리고 레이아웃 창에서 꼭 격자를 해제하여 나타나지 않도록 해준다.

지도 크기에 그려진 맵을 맞추었으면 export를 눌러 지도 사이즈와 옵션을 확인한다.

[##_http://www.yeory.com/script/powerEditor/pages/1C%7Ccfile22.uf@2254714051FB4B3A1CED9C.png%7Cwidth=%22504%22%20height=%2241%22%20alt=%22%22%20filename=%22%EC%9D%B4%EB%AF%B8%EC%A7%80%209.png%22%20filemime=%22image/jpeg%22%7C_##]

 

[##_http://www.yeory.com/script/powerEditor/pages/1C%7Ccfile10.uf@2140C63D51FB4B6333B073.png%7Cwidth=%22283%22%20height=%22414%22%20alt=%22%22%20filename=%22%EC%9D%B4%EB%AF%B8%EC%A7%80%2018.png%22%20filemime=%22image/jpeg%22%7C_##]
SVG 파일 이름을 지정하고 생성 -> 다운로드


3. 변환한 SVG 파일을 열어 상위, 하위 g 태그를 지워야 한다. (그리드 및 페이지 테두리 태그임)

 파일 내용 중 빨간색 박스의 태그는 삭제.. 

 
4. 엑셀에서 백업한 dbf 파일 작업하기

QGIS에서 백업한 DBF 파일을 읽어들여 1 행을 삭제한다.
(아래에선 SIGUN ~~ ) 

 

삭제한 후 파일-> 다른이름으로 저장 -> 텍스트 (탭으로 구분) 형식으로 저장.

5. SVG 파일과 텍스트 파일을 자바에서 읽어들여 SIGUNGU_NM을 SVG의 각 path 속성으로 추가하기.
   -> Web에서 가능하게 제작중...

6. 변환이 완료된 SVG 파일을 에디터로 열어 복사한 후 jvm 사이트에서 스크립트로 생성해준다.    



 
 위 작업을 알아내기까지 정말 삽질의 연속이었다.

능력이 미천하여 indiemapper 사이트처럼 만들지도 못하니 복잡하게 해야지..

한글 속성을 가진 Shape 파일을 jVectorMap으로 만들기 위해선 어쩔 수 없는 듯하다...

위 시군구를 표시한 지도는 아래 링크에 결과가 있다.

http://www.yeory.com/274 

QGIS를 이용하여 shp -> svg 로 변환을 할 수 있지만 매핑된 정보(어트리뷰터)는 제외되어 SVG로 변환된다.

이때문에 jVectorMap에는 id와 name이 모두 빠져있다.
그럼 누군가가 이걸 수동으로 입력을 해야하는데 얼마나 그지 같은가...

구글링 도중 좋은 사이트를 발견하였다.


< 사이트의 초기화면 >


< shp 파일을 읽어오기 위해 왼쪽 하단의 버튼을 눌러 shp와 dbf를 차례로 불러온다. >

10 MB가 베스트라 되어 있지만 50 MB 까지 테스트 해보니 무리 없이 불러와진다.


< Load 버튼을 누르면 지도가 화면에 그려진다 >

 

 화면 중앙에 지도가 그려지고 좌측에 아래와 같은 레이어 창이 나타난다.


SHP와 DBF를 읽어들인 후 속성을 지도에 표시할 것인가에 대한 창이다. 
예를 들어 SIGUNGU_NM을 선택한 후 Okay 를 할 경우 아래와 같이 지도가 표시된다. 
 


얼마나 지저분한가.. 그러므로 하지말고.. 취소를 눌러서 작업을 하도록 하자.. 

 지도를 불러오게 될 경우 좌측 상단에 레이어창이 아래와 같이 나타난다. 


포토샵과 비슷한 레이어 창이다.
각 눈 표시를 누르면 각 레이어에 해당하는 오브젝트들이 사라지고 나타난다.

SVG로 변환할때 유의할 점은 Page와 Graticule를 해제하여 화면에 나타나지 않도록 한다.

[##_http://www.yeory.com/script/powerEditor/pages/1C%7Ccfile9.uf@2248514D51FB4394250C24.png%7Cwidth=%22504%22%20height=%2241%22%20alt=%22%22%20filename=%22%EC%9D%B4%EB%AF%B8%EC%A7%80%209.png%22%20filemime=%22image/jpeg%22%7C_##]화면에 표시된 지도를 SVG로 변환하기 위해 우측 상단에 export 버튼을 클릭

 

대화상자가 나타나는데 include data ~~~ 를 체크해야만 속성도 SVG에 포함되어 변환된다.

파일이름을 변경하고 Generate 버튼을 클릭하면 서버에서 SVG가 생성이되고 다운로드가 가능하다.


다운로드 받은 파일을 에이트플러스 또는 다른 편집툴로 열어보면 아래와 같은 형식이다.


꼭 편집기로 박스로 표시된 태그 전체를 지워주어야 한다.
외곽선과 그리드 선을 표시해주는 것으로써 지우지 않고 jVectorMap으로 변환할 경우 지도에 그대로 표시된다.

위 박스 태그를 모두 지우고 난 후 아래 사이트에서 지도로 변환하면 된다.

http://svgto.jvectormap.com

 

jVectorMap은 자체적으로 convert를 사용하여 shp 파일의 vector 이미지를 svg로 변환하여 맵 파일을 생성한다.

그러나 이 컨버터를 이용할 경우 svg 변환 상에 오류가 있는것인지 대한민국 지도 상에 구멍이 슝슝 뚫린다.

아래처럼... 


대구와 대전 일부가 없다.

이를 해결하기 위해 제작자에게 메일도 보냈지만 묵묵부답이라 자체적으로 해결 할 수 밖에... 

1. shp 파일을 편집할 수 있는 (읽어 들일 수 있는)  프로그램을 찾는다.
2. 이 프로그램을 이용하여 SVG로 변환할 수 있는지 찾는다.
3. SVG로 변환된 정보를 svgto.jvectormap.com 에서 지도로 변환해 본다.

간단한거 같지만 이게 은근 쉽지가 않았다..
개발자로써 지도 프로그램을 쓰는 것도 그렇고 사용법을 일일이 찾아야 하므로... 

첫번째 사용했던 프로그램 FME Desktop 2013 이란 상용 프로그램이다.

14일간의 트라이얼을 기대하고 설치 했는데... 트라이얼 코드를 웹사이트에 접속해서 등록해야만 코드가 발급된다. ;;
여튼, 이 프로그램으로 좋은 것은.. SHP 파일을 정말 자세하게 까(?) 볼 수 있었다.

  1. FME Data Inspector

    shp 파일은 벡터 정보와 데이터 셋을 같이 가지고 있다. data inspector는 이 데이터 셋을 집중적으로 깔 수 있는 툴이다.

    아래 이미지는 data inspector를 이용하여 kor_adm2.shp 파일을 열었을때의 화면..



  2. FME Universal Viewer
    이 툴은 shp 파일의 벡터 부분을 집중적으로 깔 수 있다. 라인과, 포인트, 텍스트, 채우기 색깔등을 볼 수 있는 것.
    그리고 각 조각을 선택하면 그에 대한 정보를 보여준다. (사실 inspector와 거의 같은 정보..)
    이미지는 생략하고..

    이 툴을 이용해서 shp -> svg로 변환이 가능하다.
    shp가 그린 벡터 조각이 가진 어트리뷰터를 모드 svg path 태그안의 어트리뷰트로 변환이 된다.

    그런데!! 이걸 svgto.jvectormap.com 에서 지도로 변환해보면 지도가 안나온다.

    왜인지 모르겠는데 안나온다...

     
  3. FME Workbench
    이 툴은 전문가 적인 작업이 가능하다.

    내가 불러들여 작업할 파일을 설정하는데 이를 Reader라 하고
    어떤식으로 변환할 것인지를 설정해야하는데 이를 Writer라고 부른다.

    아래는 이에 대한 이미지..


    이렇게 리더와 Writer를 설정하고 OK 누르면 아래 이미지와 같은게 나온다..


    Writer 쪽 ... 을 눌러보면 User Attribute 탭 에서 내가 추출하고자 하는 Reader의 Attribute를 지정할 수 있다.
    Reader와 같은 이름을 지정해야만 SVG로 변환 할 시 나타나며 이름이 틀릴경우 나타나지 않는다.



    대충 설정을 하고 Shift + F5 를 누르게 되면 Reader -> Writer로 변환을 하게 되는데 jVectorMap으로 안나온다.

     
FME Desktop 2013 결론은 jVectorMap에서 사용하는 SVG를 추출할 수 없다.

내가 못하는 거 일 수 있지만 안된다.  그래서 다음 프로그램으로 패스...


두번째 사용한 프로그램은 무료로 사용할 수 있는 Quantum GIS 이다.
Quantum GIS : http://www.qgis.org/
한글 언어를 지원하는 프로그램으로 별 어려움 없이 사용 할 수 있었다.

설치 후 프로그램을 실행시켜 shp를 읽어들이고자 할때는 아래 아이콘을 이용한다. 


벡터 레이어를 추가하여 데이터 셋을 읽어들이면 되는데 사용하고자 하는 shp 파일을 로드하면 된다.

이제 SVG로 변환을 하여야 하는데 기본적인 기능에서는 제공되지 않는다.

그래서 플러그인을 설치하여야 한다. 

메뉴에서 플러그인 -> Python 플러그인을 눌러 플러그인 설치 관리자를 실행 시키고 필터에 Simple SVG 로 검색한다.
하나 밖에 없으므로 눌러서 플러그인 설치를 하면 SVG로 변환할 준비 끝.

설치가 완료되면 플러그인 툴바가 프로그램 하단에 생성된다.
설치된 SVG 플러그인을 누르면 창이 뜨는데 창 가운데 Resize Map or Set Extent를 눌러서 크기를 조절해야한다.




위 이미지에서 처럼 Width와 Height의 화살표를 눌러 값을 바꾸고 우측의 Set을 누르면 지도 전체 크기가 변경된다.
그리고 꼭 !!  빨간색 상자로 표시된 버튼을 눌러 벡터 이미지도 지도 크기에 맞게 사이즈 조절을 해야만 한다.
(창을 닫지 않고도 눌러 지므로 창 닫지는 말자..)

빨간색 상자 버튼을 누르고 난 후 아래 Set Extent 의 Set 버튼을 눌러 표시된 지도의 X,Y를 설정하자.
(누르면 자동으로 맞춰진다.)

OK를 누르고 첫 창으로 돌아와 Browse를 눌러 저장하고자 할 경로와 파일명.svg 를 적어주고 OK를 누르면 변환이 완료된다.

이 변환된 파일을 에디트플러스나 다른 편집 프로그램으로 열어 아래 사이트에서 실제 지도로 변환되는지 확인해보자.

here > http://svgto.jvectormap.com/ 


아래는 변환된 결과. 


구멍 하나 없이 제대로 나온다. 

그런데!! 이 Quantum GIS를 이용하여 SVG로 변환할 경우 Shape가 가지고 있는 attribute를 같이 변환하지 않는다.
Simple SVG는 레이어 단위로 변환을 하기 때문에 id와 name이 따라가려면 레이어로 다 쪼개야하는데... 못하겟다;;

여튼 저 화면에서 Map name과 지역별 id, name을 설정하고 save를 누르면 자바 스크립트 파일로 다운로드가 가능하고
이를 jVectorMap에서 사용할수 있다. 


이제 어떤 파일이든지 Quantum GIS 만 있으면 jVectorMap에서 사용할 수 있다!!
그러나 이름은 손으로 다 입력해야한다. 

+ Recent posts