[ 오늘 할 일 ]
- 미리 구성된 UI화면 단의 이미지를 멀티 폴리곤으로 만들기
- 후에 폴리곤을 클릭 시 해당 구역의 내용들을 DB에서 값을 꺼내와 모달로 띄워줄 예정
[ 전체적인 흐름 ]
- QGIS 프로그램 - shp파일 원하는 구역별로 만들기
- shp 파일 -> geojson 파일로 변환
- 카카오맵 API 이용하여 geojson으로 폴리곤 만들기
- 현재 UI 화면 : 단순 일러스트 이미지로 대체했었다
- 벤치마킹 : 카카오맵 API에서 멀티 폴리곤이 서울로 적용되어 있는 모습
mouseover / click / mouseout 이벤트도 함께 적용되어 있었다
멀티 폴리곤을 만들기 위해서는 json 형식으로 원하는 구역의 좌표값을 받아와야 한다
QGIS 프로그램을 통해 대한민국을 원하는 방식으로 쪼갠 데이터를 받아올 수 있다
http://www.gisdeveloper.co.kr/?p=2332
대한민국을 시/도 , 시/군/구, 읍/면/동 으로 나누어서 shp파일을 제공하는 사이트가 있다
위의 사이트 참고!
내가 원하는 행정구역은 읍/면/동이여서 최신 버전으로 다운을 받고,
QGIS에서 새로운 백터를 추가하여 shp파일을 올려서 위의 지도 사진을 얻을 수 있었다
하지만, 문제는 대한민국 전체를 보여준다는 것이다
필요한 부분만 가져오기 위해서 (서버의 무게도 줄일 겸) 법정코드를 찾아보았다
행정표준코드관리시스템 홈페이지에 들어가면
원하는 구역의 법정코드를 알 수 있었다
제주도는 50으로 코드가 시작하였다 (서울은 11로 시작합니다)
필터를 입힌 결과 제주도만 프로그램에 남게 되었다
하지만 쉽게 척척 될리가 없지...
내가 원하는 행정구역은 위 사진처럼 12개의 구역으로 나눈 것이다
그래서 QGIS의 백터병합을 이용하여 읍/면/동으로 나뉜 제주시 & 서귀포시를 합쳤다
[벡터] - [데이터 관리 도구] - [벡터 레이어 병합] - 원하는 구역 클릭
위의 갈색은 벡터를 합친 산출물이고
아래 노락색 구역들은 합치기 위해서 선택하는 과정이다
합치고 난 후에 결과물을 내보내기로 저장!
하지만 아직까지도 shp파일이기 때문에 json 데이터로 바꾸는 작업을 해야 한다
MyGeodata Converter 웹사이트를 이용하여
QGIS로 만든 벡터 결과물들의 파일들을 올리고 GeoJSON으로 변환하는 과정을 거쳤다
참고로 폴리곤이 만들어지는 과정은 구역의 꼭지점들의 모든 좌표들을 이어가는 느낌이기 때문에
용량을 가볍게 하려면 지도를 단순화시키는 작업을 꼭 해야 한다
shp파일을 geojson 형식으로 바꾼 결과
위의 화면처럼 경도 위도가 찍힌 좌표들을 전부 데이터 형식으로 변환한 파일을 받을 수 있었다
이제는 카카오맵을 원하는 서버에 가져온 후
json형식의 데이터를 읽어 들여와 폴리곤을 만들면 된다
단순화를 시켰음에도 불구하고,
위의 텍스트 파일처럼 한개의 읍이 정말 많은 좌표를 가지고 있었다
데이터를 전부 적용한 결과 제주도를 12개로 나눈 폴리곤을 만들 수 있었다
또한 마우스관련 이벤트들이 카카오 맵 api에 자세히 기입되어 있어 가져다 쓰기에 편리했다
https://apis.map.kakao.com/web/sample/addPolygonMouseEvent2/
자세한 사항은 위 카카오맵 API링크에서
문서를 읽으면 충분히 초보자도 할 수 있었다
'Project > TeamProject' 카테고리의 다른 글
[팀플 - Travel Jeju] 3rd course - Map Coordinates (0) | 2021.10.18 |
---|---|
[팀플 - Travel Jeju] 2nd course - Modal (0) | 2021.10.17 |
[팀플 - Travel Jeju] DB 설계 (0) | 2021.10.15 |
최종 팀 프로젝트 사전발표 (2) | 2021.09.10 |
[팀플 - movie_kiosk] End (0) | 2021.08.24 |