Problem
- 제주도 도엽 데이터 shapefile을 geojson으로 변경하기
- 변경한 geojson을 React Leaflet Geojson 컴포넌트로 띄우기
- 버튼 클릭시 해당 Geojson On Off하기
Problem에 많은 모르는 단어들이 나오기 시작했다.
우선 용어 정리를 하고 시작하자
- 도엽 데이터
- Shapefile
- Geojson
도엽 데이터
첫 번째로 도엽이란 지도 한 장의 일반적인 명칭이다.
우리가 사용할 도엽 데이터는 도엽 번호가 존재한다.
우선 사진으로 보고 가자
위 사진을 보면 지도에 격자 모양으로 나누어진 것을 알 수 있다.
첫 번째는 1:50000 비율의 도엽이고
두 번째는 1:25000 비율의 도엽이다.
우리 프로젝트에서 사용할 비율은 1: 5000이다.
제주도의 1:5000 도엽 지도이며
각 도엽에는 이름과 코드가 정해진다.
이를 도엽 코드라고 한다.
정리하면 도엽은 지도 한 장의 일반적인 명칭이고
도엽은 비율이 존재한다. 1:5000, 1:25000, 1:50000 등
각 도엽은 구역 이름과 코드가 존재한다.
이 코드를 도엽 코드라고 부른다.
후 인제 하나 끝났다.
Shapefile
두 번째는 Shapefile이다.
Shapefile을 한 문장으로 정의하면 벡터방식으로 공간정보를 저장하는 파일 형식이다.
지도에서 특정 건물, 도로 등의 공간 지형 정보를 표현 할 때 쓰는 표준 파일 형식이다.
벡터 type은 점(Point), 선(Line), 면(Polygon) 의 속성을 가지는 것이다.
간단하게 Shpefile은 점, 선, 면으로 구성된 벡터 방식의 공간 정보 파일 형식이다.
다음으로 Shapefile의 구성 요소이다.
shpaefile은 기본적으로 .shp 확장자를 가지고 있다.
그러나 이는 단순하게 벡터 방식의 공간 정보 파일만 담고 있다.
이 공간 정보 data를 지도에 의미 있게 표현하기 위해서는 다른 부수적인 관련된 file이 필요하다
- .shp - 공간 정보 지형 데이터
- .shx - 공간 정보 지형 데이터의 인덱스
- .dbf - shp 도형 정보에 대한 속성 정보를 담고 있다.
- .prj - 투영 정보를 가지고 있다
shp는 위에서 설명했고
shx는 인덱스 파일로서 shx를 이용하여 shp에 담긴 도형 정보의 index를 얻을 수 있다.
dbf는 도형 정보의 속성 정보(면적, 용도 등)를 담고 있다.
그리고 마지막으로 prj
이를 설명하기 위해서는 사실 약간의 배경지식이 필요하다
배경 지식을 알기 위해 배경 지식을 또 알아야한다니…
간단하게 설명하면
3차원 구 모형의 지구의 지리 정보를 지도라는 2차원의 지도로 표현하기 위해서는
둥그렇게 구부러진 판을 기준점을 잡고 펴는 과정을 가져야한다.
이게 어렵다고?
더 쉽게 설명하면
위 그림을 보면
첫 번째 그림은 지구의 표면을 조각 낸 것이다.
하지만 매우 부자연스럽다 왜냐하면 잘려서 나뉘어진 부분은 사실 나뉘어진 것이 아니라 연결된것이다.
그래서 두번째 그림처럼 나뉘어진 부분을 쭈욱 늘려서 서로 연결해준 것이
우리가 현재 가장 많이 접하는 지도이다.
이러한 늘려서 연결해주는 과정을 손으로 하는 것이 아니라
기준점을 잡고 위 아래 혹은 좌 우로 투영한 것이다.
그리고 이는 기준점에 따라서 지도의 모양, 형태가 다르게 나타난다.
때문에 어떤 projection 방법으로 지도를 만들었고 공간 정보를 가진 것인지를 알려주어야
표준화된 공간 지형 데이터를 만들 수 있다.
후 길었다.
더 자세한 내용은 아래를 참고하자
https://docs.fileformat.com/gis/shp/
GeoJSON
마지막으로 GeoJSON이다.
이 녀석은 뭐냐?
반을 뚝 짤라보자
Geo | Json
Geometry | Javascript Object Notation 이다.
쉽죠?
우리는 웹에서 shapefile을 띄워줘야한다.
웹은 javascript로 동작하니까
이를 위해서 shapefile을 Json 형식으로 바꿔서 처리해준다는 것이다.
이는 GeoJSON이라고 한다.
한 마디로 지리 공간 데이터를 Javascript기반 객체 형식 데이터이다.
GeoJSON의 특징으로는
GeoJSON은 JSON으로 위치 데이터와 속성 데이터를 저장하는 형식이다.
구글 맵이나 OSM 에서는 위도, 경도 순으로 저장하지만
GeoJSON은 경도 위도 순으로 저장한다.
GeoJSON의 장점
- 스키마나 태그 규칙에 대해 자유롭다.
- 데이터 용량이 다른 포맷에 비해 작다.
- Javascript에서 쉽게 객체화가 가능하다.
- 다양한 응용 프로그램에 적재가 용이하다.
이해했나?
이렇게 설명해줘도 이해를 못하면 좀 화가 날지도 모른다.
다시 problem으로 돌아와보자
- 제주도 도엽 데이터 shapefile을 geojson으로 변경하기
- 변경한 geojson을 React Leaflet Geojson 컴포넌트로 띄우기
- 버튼 클릭시 해당 Geojson On Off하기
우선 shapefile을 geojson으로 변경해야한다.
이를 위해서 두 가지 방법이 있었다.
- shapefile.js를 활용해서 폴더를 읽어들여서 geojson으로 변경한다.
- 외부 shapefile → geojson을 활용해서 미리 변경한 json을 이용한다.
2번을 선택했다.
이유는 변환하는 과정도 다 내부 리소스를 활용한다.
보다 빠르고 효율적으로 이용하기 위해서는 미리 만든 geojson을 더하는 것이 더 효율적이다.
2번 방법을 위해 아래 페이지에서 shapefile을 GeoJSON으로 변경하였다.
https://mygeodata.cloud/converter/shp-to-geojson
위의 링크는 제주도 도엽 번호의 GeoJSON입니다.
React Leaflet에는 GeoJSON 이라는 component가 존재한다.
https://react-leaflet.js.org/docs/api-components/
data 속성을 활용해서 GeoJSON에 data를 넣어주면 지도에 load된다.
이를 인제 React Leaflet에 올려야한다.
여기서 한가지 조건이
시작하자마자 GeoJSON data가 지도에 load되는 것이 아니라
버튼을 클릭했을 때, GeoJSON이 load되어야한다.
마지막으로 React Leaflet과는 상관 없어서 언급을 피하려고 했지만 불가피하게 이야기해보면
Recoil 상태 관리 라이브러리를 활용해서
버튼 클릭 시, 변수 값을 수정해서
GeoJSON을 컨트롤 했다.
위와 같이
isDrawingNumberOn이 true이면
GeoJSON이 load되고 아니면 load되지 않는다.
다행히 잘 작동한다.
