9. vue3 + d3.js 날씨 지도 만들기

d3.js는 topojson이나 geojson을 활용하여 지도를 만들 수 있다.

 

이번에는 vue3 + d3.js로 날씨 지도를 만들어 보기로 한다.

 

위 사진과 같이 대한민국 지도 위에 시도별 날씨 정보를 보여주기로 한다.

 

시도별 날씨정보와 기상상태에 따라 이미지로 표현한다.

 

준비물 1. d3.js에서 사용할 지도파일

 

지도파일은 인터넷에서 공개되는 topojson이나 geojson 파일을 사용하거나,

공공데이터로 만들어진 Shape file(SHP) 파일을 구해 https://mapshaper.org/ 에서

topojson이나 geojson 파일로 변환하여 사용할 수 있다.

직접 변환해서 사용하고자 한다면, 

파일의 좌표계를 확인하고 변환해야 한다.(좌표계 변환 및 확인으로 고생을 했음)

 

이런 것을 사용해서 변환해야 한다. 

지도에 표현하기 위해서는 좌표를 사용해야 하는데, 지도의 좌표계와 표현하고자 하는 데이터의 좌표계를 통일해 줘야

정확한 좌표에 표현가능하다.(좌표계에 대해 잘 모르니 자세한 설명은 생략) 

 

http://www.gisdeveloper.co.kr/?p=2332 

대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer

위 사이트에 자세한 내용이 있으니 참고하면 된다.

 

아마 지도를 변환해서 사용한다면 상당한 삽질이 예상되지만, 그래도 해봐야 한다.

 

준비물 2. 기상상태에 따라 표현할 아이콘

무료 아이콘 사이트에 가서 날씨 관련 이미지를 다운로드하면 된다.

 

 

준비물 3. 기상청에서 제공하는 날씨정보

www.data.go.kr  

공공데이터 포털

날씨정보 데이터는 공공데이터 포털 기상청 단기예보 조회서비스를 활용신청하였다.

 

이번 예제 코드는 1시간 단위로 조회를 하고 Database에 저장하여 사용하였다. 

 

그럼 다음번은 예제 코드 구현에 관련된 내용을 소개하기로 한다.