* FGIS/Pro에 레이어처럼 제어 동영상
OpenLayers + windy.com의 지도중첩하기
Point 및 Map Forecast API 사용 예제
OpenLayers에서 하나의 레이어처럼 캔퍼스 투명도와 중첩 순서를 조절하고 지도이동시 최대한 부드럽게 처리하였습니다.
[OpenLayers] 날씨 windy.com의 Map Forecast API로 지도중첩하기
날씨예보 중 유명한 windy.com을 OpenLayers에 중첩해보았습니다.
결론은 OpenLayers는 지원하지 않는다 ㅠㅠ.
검색하여도 바람의 애니메이션 예제는 있으나 windy.com의 데이터를 활용하고 백그라운드에 그라이드 표현은 없음.
1. "https://api.windy.com/"엔 Leaflet에 대해서만 지도API를 제공중 임.
2. 향후 시간이 나면, "포인트 예측 API"의 원시 값으로 OpenLayers에 표현하고 싶지만,
현재는 windy.com이 제공하는 다양한 지도 데이터를 그대로 사용하여 중첩정도로 한정해 활용하고자 합니다.
***********************************************************************************************************************
먼저, 재미로 ChatGPT에게 코딩을 주문해보았습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>OpenLayers with Windy.com</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css"> <style> body, html { margin: 0; padding: 0; height: 100%; } #map { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } #windy { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Windy.com 지도 위젯이 클릭을 받지 않도록 설정 */ z-index: 10; opacity: 0.8; } </style> </head> <body> <div id="map"></div> <div id="windy"></div>
<!-- OpenLayers 스크립트 --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <!-- Windy.com 스크립트 --> <script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>
<script> window.xxxxonload = function() { var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) });
windyInit({ key: Windy.com API 키 입력 }, function (windyAPI) { // OpenLayers 지도의 이벤트를 Windy.com 지도에 반영 map.getView().on('change:center', function() { var center = ol.proj.toLonLat(map.getView().getCenter()); windyAPI.map.setView([center[1], center[0]]); });
map.getView().on('change:resolution', function() { windyAPI.map.setZoom(map.getView().getZoom()); });
// Windy.com 데이터를 OpenLayers 지도에 추가 var windyOverlay = windyAPI.overlay; windyOverlay.setOverlay('wind'); // 바람 레이어 추가 }); }; </script> </body> </html> |
위 기본적 코딩으로 바닥의 OpenLayers 위에 중첩은 하였으나,
1. 기본적으로 windy.com의 Map Forecast API에서 제공하는 기능과 예측 슬라이드를 사용 못하였습니다.
2. OpenLayers의 지도 움직임과 windy.com의 leaflet 지도의 움직임이 다름.
***********************************************************************************************************************
기본 중첩 데모
http://www.gisapplication.kr/Openlayers_Windy/
1. 배경의 OpenLayers맵과 windy.com의 Map을 중첩 옵션 (1) #windy 지도 위젯이 클릭을 받지 않도록 설정 pointer-events: none; (2) 하단 및 우측의 #windy 컨트롤로에는 이벤트를 활성화 한다 #windy #bottom {pointer-events:all;} #mobile-ovr-select {pointer-events:all;} #windy .shy {pointer-events: all;} (3) OpenLayers 지도 움직임 이벤트에 windy 지도 이동을 연동한다 map.on('moveend', function() { windy_syncMaps(); }); function windy_syncMaps() { if(Main_windyMap && $('#windy').css('display') != 'none'){ const center = ol.proj.toLonLat(map.getView().getCenter()); Main_windyMap.setView([center[1], center[0]], map.getView().getZoom()); } } |
2. 위 예제에서의 다양한 옵션 추가 (설명제외한 간략한 소스만) 각 자식 객체의 투명도 및 배경 옵션으로 조금 더 선명도 조합
#map { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } #windy { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Windy.com 지도 위젯이 클릭을 받지 않도록 설정 */ z-index: 10; opacity: 0.8; background: rgba(255, 255, 255, 0.0); background: transparent; } #windy #embed-zoom { display: none; } #windy #mobile-ovr-select { display: none; } #windy .leaflet-marker-pane { display: none; } #windy #map-container .leaflet-tile-pane .basemap-layer { display: none; } #windy #logo { display: none; } #windy .leaflet-map-pane canvas { background: rgba(255, 255, 255, 0.0); } #windy .leaflet-zoom-animated { background: rgba(255, 255, 255, 0.0); opacity: 0.8; } #windy #map-container { background: rgba(255, 255, 255, 0.0); background: transparent; } #windy .leaflet-tile-pane { background: transparent; } #windy #bottom { pointer-events:all; } #mobile-ovr-select { pointer-events:all; } #windy .shy { pointer-events: all; } .ol-overlaycontainer { z-index: 11; } .ol-overlaycontainer-stopevent { z-index: 11; } //base맵 삭제 windyMap.eachLayer(function (layer) { windyMap.removeLayer(layer); }); $('#windy').css('background', 'rgba(255, 255, 255, 0.0)'); $('#windy #map-container').css('background', 'rgba(255, 255, 255, 0.0)'); $('#windy .leaflet-zoom-animated').css('opacity', 0.1); ......... 생략 |
* 위와 다른 것은 windy.com에서 유료키를 받은 경우는 우측처럼 다양한 날씨 지도를 제공합니다.
(저는 유료 키 없이 함. 테스트로 언제가는 제한될거 같습니다.)