[Windy PlugIn] OpenLayers Or VWorld2D의 날씨 windy.com 플러그인

[공공칠빵]

[Windy PlugIn] OpenLayers Or VWorld2D의 날씨 windy.com 플러그인

OpenLayers + Windy Plug-in만들기

지난 글에서는 날씨예보 중 유명한 windy.com을 OpenLayers에 중첩해보았습니다.

시간이 허락되어 Plug-in으로 만들어 기존 개발 시스템에도 손쉽게 활용하도록 하였습니다.

예를 들어, 엑셀기능을 요청하면, 엑셀에서 열수있도록 파일로 다운로드시겨 엑셀쓰라고하거나, 엑셀 컴포넌트 등을 구매해서 시스템엔 탑재시켜주면 되지요.

마찬가지로 기상 날씨 정보를 요청하면 국내기상청 API로 연계하거나 윈디같은 시스템 Key구매로 탑재시켜주면됩니다.

먼저, 윈디를 선택한이유는 현 국내 기상API는 시각화는 다소 성의가 없는게 사실입니다. 그리고 해외시스템으로 확장하기도 어려워 윈디를 사용하였고, 그 활용 업무로는 아래와 같습니다.

1. 실시간 및 예측 기상 정보 확인
강수량, 바람, 기온, 구름, 기압 등 다양한 기상 요소를 실시간 및 예측 데이터로 확인 가능
전 세계적인 날씨 데이터 시각화 (바람 흐름 애니메이션, 강수량 지도 등)
단기 및 장기 예보 (시간별/일별 예보 지원)
2. 특정 산업 및 활동 활용
항공/항해: 비행기 조종사, 선박 운항자가 기류 및 해양 기상 확인
등산/캠핑: 날씨 변화 예측하여 안전한 일정 계획
서핑/윈드서핑/패러글라이딩: 풍속과 파도 상태 체크
농업: 기후 변화를 모니터링하여 작물 재배 최적화
3. 환경 및 재난 감시
태풍/허리케인 경로 추적 (실시간 데이터)
대기질(AQI), 미세먼지(PM10, PM2.5) 및 이산화탄소 농도 분석
폭염/한파 감시
산불 확산 경로 추적 (온도, 바람 데이터 활용)
4. 맞춤형 데이터 분석 및 API 활용
Windy API 활용하여 기상 데이터를 웹사이트/앱에 연동 가능
레이어 커스터마이징: 사용자가 원하는 기상 데이터만 표시
전문가 모드: 등압선, 고도별 바람 데이터, 기온 차트 분석
5. 드론 및 UAM(도심 항공 모빌리티) 활용
드론 비행 가능 여부 확인 (바람 속도, 기온, 강수량 분석)
UAM(도심 항공 모빌리티) 경로 분석 (도심 내 바람 변화 예측)

Windy를 사용하는 목적 : http://www.gisapplication.kr/OL_WindyPlugIn/vworld.html

실시간 날씨 시각화 (Weather Overlay)
풍속·기류: 바람 방향 및 속도를 화살표, 파티클 애니메이션으로 시각화
강수량·구름: 특정 지역의 강수량 및 구름 데이터를 타일로 오버레이
기온 변화: 건물 및 지형 위에 온도 히트맵을 표시
기존 개발 시스템에 Plug-In방식으로 최소한의 커스트마이징
1. Windy Map Forecast 중첩 및 배경 투명도 조절 (바람 애니메이션을 제외한 배경지도만 투면조절 함)
* Windy Map은 기존 Openlayers 시스템에 오버레이되어 전체 창이 아닌 Windy Map의 배경 레이어만 투명도를 조정 함.
2. Windy Layer창 열기 및 각 레이어 설정
3. Windy Map 모드에서 마우스 위치와 기상정보를 조회 함.
4. 일반/위성 배경지도에 따라 바람 입자 애니메이션 색상과 강조 조정

1. Windy Plug-in 사용방법.

(1) 브이월드 2D MAP API 사용자




//소스원본 사용시는 : <script src="./Windy/OL_Windy.js"></script>
​
//메인맵 생성후 추가 소스: 원본 openLayers의 맵을 3개로 자동 생성합니다. (만약 불일치시에는 css를 확인하여 수정하세요)
map = new vw.ol3.Map("map", vw.ol3.MapOptions);
map.addLayer(map.addNamedLayer('교통링크','lt_l_moctlink'));
Windy_MapInit(‘windy_map_forecastkey’, ‘OL map target DIV name', map, OL_backgroundTileLayerCount);

(2) Openlayers 사용자
​
​
​
//소스원본 사용시는 : <script src="./Windy/OL_Windy.js"></script>
​
//메인맵 생성후 추가 소스: 원본 openLayers의 맵을 3개로 자동 생성합니다. (만약 불일치시에는 css를 확인하여 수정하세요)
map = new ol.Map({ … });
Windy_MapInit(‘windy_map_forecastkey’, ‘OL map target DIV name', map, OL_backgroundTileLayerCount);

2. Windy Plug-in의 주요기능

(1) 소스를 받아보시면 브이월드에서 키를 발급받고,

윈드에서 ( Windy API - Home ) Map Forecast API 키를 발급받아 소스에 적용하세요.

(2) 기존소스에서 위 사용방법처럼 js를 import하고, OL맵생성소스 아래 딸랑 "Windy_MapInit"하나만 추가하시면 됩니다. 물론 map의 스타일 css가 수정하시는건 기본일거구요.

다만, 소스를 받으신분들은 "OL_Windy.js"와 "Windy.css"으로 원리와 수정을 하시어 확장 응용하시면 됩니다.

"Windy_MapInit"함수에서 초기에 기존 OL.MAP을 3개의 MAP 컨트롤러로 자동 나뉘어 최소한의 수정으로 적용시킵니다. 아래 소스에서 디버깅을 해보시고 수정하시면서 코딩해보세요.

원리는 기존 지도의 Element의 앞에 백그라운트만 담는 복사본 맵과 그 위에 윈디맵을 생성하고 원래의 맵을 배치합니다. 그리고 원래 지도의 배경으로만 사용할 위성/일반 등 타일맵이나 다른 레이어등을 복사본 백그라운드 맵에 이관시켜 윈드맵과 조화를 이루게합니다. 그 후 소스는 윈디와 기존 OL맵과의 이벤트연결 등과 윈디 초기설정입니다.

3. Windy Plug-in 관련 게시글 및 활용시스템

이미 윈디로 만든 시스템이 개발되었고, 확장 응용한 시스템도 있습니다.

(1) Windy Point Forecast 모드 실행.

(2) 기상청 동네날씨정보와 연동한 지도 클릭 위치의 기상정보를 조회 함. (기간예보 툴팁)

* 데모 : 해상풍력발전플랫폼

* 개요 : https://cafe.naver.com/gisapplication/1225