[React.js] 네이버 지도 API: 시군구 폴리곤 적용과 폴리곤이 깨지는 이유

1. 폴리곤이 깨지는 이유?

[그림 1] 진해구 폴리곤이 깨져서 노출되고 있다!

대한민구 행정구역 시군구 SHA 파일을 JSON 형식으로 변환하여 네이버 지도 API에 노출하였는데 [그림 1]과 같이 진해구의 경우 폴리곤이 깨져서 렌더링 되는 현상이 발생했다.

변환된 시군구 경계 정보를 담고 있는 JSON 파일에는 "coordinates"라는 키가 있고 값으로 위경도 배열값을 가지고 있다. 배열은 중첩되어 있는데 최말단에 [경도, 위도] 형태의 배열이 모여 있다.

"coordinates": [
          [
            [
              [경도, 위도],
              // (생략)
              [경도, 위도],
            ],
            [
              [경도, 위도],
              (생략)
              [경도, 위도],
            ],
            // (생략)
          ]
        ]

위와 같이 배열이 4개의 depth로 구성되어 있는데 일반적인 지역의 경우 3번째 depth의 배열이 한개만 있다. 하지만 진해구의 경우 위와 같이 2개 이상 존재했다. 그 이유는 진해구에 속해 있는 섬을 각각의 경계 정보로 제공하고 있어서 였다. 이런 경우를 무시하고 3번째 depth의 배열을 flat() 메서드로 병합한 후 지도에 노출했기 때문에 [그림 1]과 같은 현상이 발생했던 것이다. 나의 경우 섬의  경계는 불필요했기 때문에 섬에 해당하는 3번째 depth의 배열은 모두 삭제하고 내륙의 경계만 남겨두어 원하는 결과를 얻을 수 있었다.

 

2. SHA을 JSON으로 변환하는 방법

2.1. 시군구 SHA 다운로드

시군구 경계 정보를 한땀 한땀 따야 한다면 얼마나 고통스러울까? 고맙게도 GIS DEVELOPER에서 관련 데이터를 [그림 2]와 같이 SHA 파일 형태로 제공하고 있다.

[그림 2] GIS DEVELOPER에서 제공하는 시군구 경계 SHA 다운로드 서비스

 

2.2. QGIS를 이용하여 SHA를 JSON으로 변환

QGIS(다운로드하기)를 이용하면 SHA를 JSON으로 변환할 수 있다.

2.2.1. OpenStreetMap 클릭

[그림 3]과 같이 OpenStreetMap를 클릭하여 레이어에 지도를 노출한다.

[그림 3] OpenStreetMap 클릭하여 레이어에 지도 노출

 

2.2.2. 데이터 원본 관리자 열어 다운로드한 zip 파일 추가

[그림 4]에서 표시된 순수대로 데이터 원본 관리자를 열어 다운로드한 zip 파일을 로드하면 shp파일이 레이어에 추가된다.

[그림 4] 데이터 원본 관리자를 이용해 SHA파일을 레이어에 추가

 

2.2.3. 엉뚱한 곳에 표시된 시군구 경계 위치 이동

데이터 원본 관리자를 이용해 SHA파일을 레이어에 추가하면 시군구 경계가 엉뚱하게도 [그림 5]와 같이 아프리카에 표시되고 있음을 확인할 수 있다.

[그림 5] 시군구 경계가 아프리카에 표시되고 있다.

 

[그림 6]과 같이 레이어 좌표계를 EPSG:5179로 변경해 주면 기대했던 위치로 시군구 경계를 옮길 수 있다.

[그림 6] 좌표계 EPSG:5179 적용

 

2.2.4. 한글 깨짐을 막기 위해 인코딩 변경

이 단계를 거치지 않고 SHA를 JSON으로 변경하면 Export 된 결과물에서 깨진 한글을 보게 될 것이다. [그림 7]과 같이 속성을 선택한다. 

[그림 7] 데이터 원본 인코딩 변경을 위해 속성 클릭

 

[그림 8]과 같이 데이터 원본 인코딩을 windows-949로 변경한다.

[그림 8] 데이터 원본 인코딩 windows-949로 변경

 

2.2.5. 경계정보 단순화 처리

원본 경계 정보는 꽤 정교한 데이터를 담고 있다. 하지만 실제 애플리케이션에서는 그렇게 정교하게 경계를 표시할 필요가 없을 수 있다. 나의 경우도 그랬는데 애플리케이션 성능 최적화를 위해 경계정보를 단순화시키기로 했다.

[그림 9] 벡터 > 도형 도구 > 단순화 선택

 

[그림 9]와 같이 단순화를 선택하면 [그림 10] 단순화 창이 뜬다. 나의 경우 단순화 방법 "면적", 허용 오차를 "100"으로 적용했다.

[그림 10] 단순화 방법 면적, 허용 오차 100을 적용했다.

 

2.2.6. 단순화 산출물 Export하여 JSON파일 획득

마지막 단계로서 단순화 산출물을 JSON파일로 저장해야 하므로 [그림 11]과 같이 "객체를 다른 이름으로 저장"을 선택한다. 

[그림 11] JSON파일로 저장하기 위해 "객체를 다른 이름으로 저장" 선택

 

[그림 12]와 같이 저장한 파일이름을 작성하고, 좌표계는 EPSG:4166을 선택한다. 좌표계를 변경해야 범위가 우리가 기대하는 위 경도로 표시된다.

[그림 12] 좌표계를 EPSG:4166로 선택해야 한다.