오늘의 과제 : 지도 상에서 전주천을 표시하고 ph 값에 따라 다른 색으로 나타내는 웹페이지 만들기
구현 방법 생각:
1. 지도를 받아오자 ( 네이버, 다음, 카카오)
2. 전주천을 구분하는 방법생각
- 전주천을 나타내는 공공데이터가 있을까?
- 전주천 위치를 직접 하나하나 찍어줘야 할까?
3. 지도위에 전주천을 표시 하는 방법 생각
- 레이어?
- 오버레이?
4. ph 값에 따라 색을 다르게 나타내보자
이정도로 생각했고 하나하나 1번부터 해보자.
1. 지도를 받아오자
먼저 웹페이지에 지도를 담고 서비스 하려면 지도 api 를 받아와야한다.
네이버 맵 api 를 선택했고
https://www.ncloud.com/product/applicationService/maps
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
위 링크를 클릭하면 네이버 지도 api 신청 페이지가 나온다
로그인을 하고 신청하기를 누르면
Application 등록이 보인다. 등록을 누르자
우리는 Maps 에서도 Web 서비스를 이용할 것이기 때문에 체크해주고
그 아래
서비스 환경을 등록 해줘야한다.
자신이 서비스할 웹 페이지를 서버에 등록후 그 페이지 url 을 입력하면 된다.
저는 무료 호스팅 사이트인 https://www.netlify.com/
Netlify: All-in-one platform for automating modern web projects
Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.
www.netlify.com
를 이용했다. netlify 에 대한 사용방법은 다른 포스팅에서 다루겠다.
호스팅할 웹 페이지 까지 입력하고 등록을 누르면 등록이 완료된다.
이 Application 을 보면 인증정보가 있고 그 안에 Client ID 가 있다. ( 나중에 쓰일 곳이 있으니 기억해두자)
(지금까지 설명한게 사실 다 자세하게 적혀 있으니 https://docs.ncloud.com/ko/naveropenapi_v3/application.html
이 링크에 들어가서 따라하면 됩니다)
설명서
사용하기 전에 Q. AI·Application Service란 무엇인가요? Clova, Papago, Maps 등 네이버의 풍부한 데이터를 기반으로 학습된 최신 인공지능 서비스를 제공하는 AI Service와 네이버에서 사용하는 기술을 API로
docs.ncloud.com
이제
자신의 indexhtml 파일에 간단한 예제를 따라해보자
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
여기에 보면 예제 코드가 있다. 그대로 복사 붙여넣기 하고 자신의 clientID 만 설정해주면 네이버 맵이 나오는것을 볼 수 있다.
지금까지 1번 네이버 맵을 나타내보자에 대한 설명이었다.
2. 전주천을 구분하는 방법생각
- 전주천을 나타내는 공공데이터가 있을까?
- 전주천 위치를 직접 하나하나 찍어줘야 할까?
에 대해서 생각해보자
전주천을 나타내는 공공데이터가 없을까 생각하다가
http://www.nsdi.go.kr/lxportal/?menuno=2679
국가공간정보포털
국가는 다양한 방법으로 공간정보 서비스를 제공하기 위해 노력해왔으나, 산재된 서비스 체계로 인해 공간정보 활용에 어려움이 있었습니다. 그래서 국가·공공·민간에서 생산한 공간정보를 ��
www.nsdi.go.kr
국가 공간 정보 포털을 알게됐다.
여기서 하천을 검색 후 우리나라 하천 위치 정보에 대한 파일을 받았다. (나이스)
shp 파일로 되어있었고 이파일을 네이버 지도에 띄우면 된다는 생각이 들었다.
3. 지도위에 전주천을 표시 하는 방법 생각
- 레이어?
- 오버레이?
지도위에 전주천을 표시하는 방법은 의외로 간단했다.
방법은 '데이터 레이어'
위에서 네이버 맵 api 사용 링크에 보면 튜토리얼과 예제가 있다. 그걸 하나하나 보면서 공부했고 그 중 데이터 레이어라는 것이 지금 필요한 방법이라고 생각했다.
GeoJson 데이터 레이어 표시하기
우리는 현재 shp 파일을 갖고 있지 GeoJson 파일이 있는것이 아니다.
그래서 shp 를 GeoJson으로 변환 해주는 작업을 해줬다.
이때 사용한 것이 QGIS 이다.
먼저 QGIS 를 받고 실행시킨다.
그리고 우리가 갖고 있는 shp 파일을 레이어 부분에 드래그앤 드롭으로 가져온다.
그럼 파일이 추가 되고
파일을 우클릭해서 내보내기를 누른다.-> 다른이름으로 저장
포맷을 GeoJSON 으로 설정하고 파일 이름을 적어서 확인을 누르면 shp 파일을 GeoJson 으로 변환이 된다.
이제 사용하면된다.
이제 예제에 따라 그냥 따라 적어주고 JSON 파일 경로만 지정해주면 된다.^^
** 그러나 여기서 문제가 있었다. 예제와 그대로 했는데 GeoJson 파일이 적용이 안되는것..
예제 코드를 적용하면 잘 되는데 변환한 JSON 파일은 적용이 안되는것.... 이 문제였다. 여기서 시간을 많이 잡아먹었다.
이 오류는 결과적으로는 우리나라 전국 하천 정보를 담고 있다 보니 너무 커서 전체를 불러오지 못하는거 같았다.
그래서 json 파일에서 필요한 전주천 부분만 따로 빼서 새로운 JSON 파일을 만들었고 그 파일을 불러오니 잘 작동했다. ^3^
이제 네이버 맵에 전주천 부분을 나타내는거 까지 했다.
4. ph 값에 따라 색을 다르게 나타내보자
이것은 정말 간단하다.
일단은 ph 값을 자동으로 계속 받아와서 실시간으로 동작하는 건 다음 과제로 남기고
임의로 구역에
ph 값을 줬다.
그 후
if 문으로 json 의 ph값이 7보다 높거나 같거나 낮거나 조건을 준 후 색을 다르게 설정하도록 코드를 만들었다.
json 파일의 값을 가져오는것은 getProperty 를 쓰면 된다.
위 사진처럼 코드를 입력하면 간단하게 우리가 정해준 ph 에 따라 색이 다르게 나타나게 된다.
다음번 과제로는 자동으로 ph 값을 받아오는 형식으로 json 파일을 실시간으로 변경하여
실시간으로 변경하는 것을 할 생각이다.