지도 위에 행정구역 경계를 시각화 해보도록 하자!
라이브러리 및 요구사항 (목표)
지도 위에 행정구역의 경계를 표시해 달라는 요구 사항이 있었다.
지도 라이브러리는 많지만 현재 유용하게 사용하고 있는 네이버 지도 라이브러리 활용해서 해당 기능을 구현 해보려고 한다.
라이브러리 git repo: mym0404-react-native-naver-map
구현은 쉬운데 데이터를 어떻게 구해야할까?
구현은 쉽다. 라이브러리 내부에 위도와 경도 데이터만 있다면 폴리곤 오버레이를 지도위에 렌더할수 있는 기능이 제공되기 때문이다.
문제는 특정 행정구역의 정확하게 경계를 WGS84 타입의 위경도 데이터를 어디서 어떻게 구해야 하나 고민이 된다.
무료로 국가에서 공인된 오피셜한 데이터를 쓰고싶다.
이전에 그리기 도구로 다각형의 위경도 값을 추출할수 있는 geojson 사이트에서 그려볼까 잠깐 생각을 했었는데, 행정구역의 경계는 상황에따라 굉장히 민감한 데이터 이기 때문에 개인이 그려서 사용하는 것은 말이 안된다고 생각했다. (사실 그리기도 매우 힘들다...)
최대한 국가에서 제공하는 오피셜한 데이터를 써야겠다고 결론지었다.
국가에서 오피셜로 제공하는 행정구역 경계 데이터 찾아보기
우선은 공공데이터 포털 에서 "경계데이터" 라는 키워드로 검색해보자
국토교통부 에서 행정구역의 경계 데이터를 파일로 제공하는것 같다 눌러보자
다운로드 받을수 있는 파일을 제공하지는 않고 또 하나의 URL 링크를 제공하고 있다. 해당 링크로 들어가보자
명시된 들어가보면 데이터 파일들이 있는데 내가 원하는 타입들은 아니었다. 하지만 "브이월드" 라는 곳에서 무언가 데이터를 얻을수 있을것 같다는 생각이 들어 어떤 데이터들이 있는지 좀더 파헤쳐 보기로 했다.
브이월드 에서 행정구역 데이터 얻기
브이월드로 만나는 디지털 트윈국토! 파헤치기
브이월드 메인페이지 로 들어가면 여러가지 지도에 관련된 API, 데이터 등등 많은 것을 제공하고 있는 것을 볼수있다. 우선은 내가 필요한 행정구역 데이터를 찾아보자
회원가입 및 자세한 API Key 발급은 글에서 생략한다. 회원가입 후에 상단 메뉴 "오픈API" > "인증키발급" 에 접근하여 대략적인 사유를 적으면 심사없이 즉시 발급해준다.
특정 행정구역 경계 데이터 요청 및 응답 받기
우선 아래 순으로 접근한다.
상단 메뉴 > 오픈API > 2D데이터 API > 버전2.0 > 검색 "시군구" > 결과 클릭
다이렉트 링크
해당 페이지에서 요청 및 응답에 대한 자세한 항목을 볼수있다.
다음은, 여기서 "API 실데이터 검색" 이라는 탭으로 들어가 발급받은 API 키를 입력하고 "검색" 버튼을 누른후 "URL 복사" 키를 클릭힌다.
그런 다음 복사한 URL 을 새로운 창에서 열면 다음과 같은 화면을 볼수있다.
짜잔~ "posList" 라는 응답에 굉장한 위경도 데이터가 존재한다. 느낌상 posList 데이터를 가공하여 네이버 맵 위에 폴리곤 레이아웃 으로 렌더한다면 예제의 "종로구" 경계가 그려지지 않을까 하는 직감이 든다 습하...
우선은 저 기나긴 string 타입의 데이터를 가공해보자
네이버 지도에 마포구 경계 그려보기
우선 나는 내가 그리고 싶은 "마포구" 의 경계 데이터를 얻어와야 한다.
geomFilter 값을 지우고, 내가 원하는 행정구역 6자리를 입력하여 검색, URL 복사를 통해서 값을 가지고 온다. 원하는 행정구역 6자리 코드는... 직접 알아보기!
그리고 네이버 지도에 폴리곤 레이아웃이 원하는 데이터로 가공해준다.
let coords = posList.split(' ').map(Number)
let result = []
for (i = 0; i < coords.length; i += 2) {
result.push({
latitude: coords[i + 1],
longitude: coords[i]
})
}
// 아래와 같은 형식으로 가공 된다.
[ {latitude: 37.58463819963098, longitude: 126.88888180909403},
{latitude: 37.584019432971715, longitude: 126.88987143072917},
{latitude: 37.583987100608276, longitude: 126.88992330910324},
{latitude: 37.583931717436975, longitude: 126.89000954876045}, ...]행정구역 경계데이터 는 수정될 가능성이 매우낮기 때문에 API 로 응답을 받아와서 해당 알고리즘을 계속 수행하는 것은 불필요한 작업이라는 생각이 들어 그냥 static 한 형태로 들고 있도록 하였다.
export const mapoCoordinates = [
{latitude: 37.58463819963098, longitude: 126.88888180909403},
{latitude: 37.584019432971715, longitude: 126.88987143072917},
{latitude: 37.583987100608276, longitude: 126.88992330910324},
...
]이런식으로 정적 데이터로 저장해 두고 네이버맵 폴리곤 레이아웃에 해당 데이터를 렌더 해주면
...
<NaverMapView
ref={mapRef}
camera={camera}
locale={language}
{...DEFAULT_MAP_OPTIONS}
style={{flex: 1}}>
{renderByFilter()}
<NaverMapPolygonOverlay
isHidden={false}
color={colors.primary_50_3}
outlineColor={colors.primary_50}
outlineWidth={3}
coords={mapoCoordinates}
maxZoom={15}
/>
</NaverMapView>
...결과보기
짠! 내가 원하는 행정구역을 폴리곤 레이아웃으로 완벽하게 그려냈다!
컬러는 커스텀이 가능하니 원하는 컬러로 설정하여 수정해서 사용해보자
영역을 표시하는 컬러는 투명도 조정이 가능하다! ex)'#F8496C4D'
마치며
초기 기획에도 없던 요구사항과 기능개발 요구가 갑작스레 튀어 나온다.
현실적인 이해관계도 있고 고려해야 상황도 많다보니 "된다, 가능하다" 라는 말이 쉽게 나오지 않는다.
하지만 개발자는 이것을 기술적으로 가능한 영역으로 끌고와 최선을 다해 구현해야 하는 책임이 있다.
나는 이 과정에서 정말 많은것을 배우고 있다.
