블로그

폴리곤 그리기를 위해 필요한 포인트는 두 가지를 고려하였습니다. 폴리곤 입력값을 받아서 컴포넌트 간 전달을 어떻게 할지와 어떻게 변환해서 전달할지 두가지를 고민해야 했습니다. 1. 컴포넌트 간 props 전달 컴포넌트 간 입력값을 전달하기 위한 과정을 설명하기에 앞서, 컴포넌트를 어떻게 구성하였는지 설명하고자 합니다. 기획한 화면 구성은 App.js에서 MapContainer 컴포넌트를 불러오고 MapContainer 에는 텍스트를 입력하는 PolygonInput 컴포넌트와 지도를 불러오는 NaverAPIMap 컴포넌트로 구성하였습니다. ├── ... ├── public │ ├── index.html │ ├── ... └── src ├── App.js ├── components │ ├── DrawCont..

만든 결과물 링크 : Drawing Polygon 회사에서 DB 내 상권 등의 폴리곤을 확인할 일이 많아서 지도 위에 레이어로 그려주는 툴을 만들 수 있지 않을까 싶어서 만들게 되었다. 네이버 지도 API를 사용하였고 GeoPolygon 좌표값들을 WKT(경도, 위도) 형태로 입력하면 숫자 부분만 읽어서 , 로 구분하여 위경도 값을 지도 상에 그려주도록 설계하였다. 테스트 값으로 소상공인시장진흥공단 상권 에 있는 POLYGON ((127.039452 37.495138, 127.039172 37.495735, 127.033527 37.494008, 127.034194 37.492618, 127.035835 37.493117, 127.035443 37.493923, 127.035641 37.49398, 12..