leaflet openweathermap
1.0.0
이 프로젝트는 더 이상 유지 관리되지 않습니다. 이 프로젝트를 계속하려면 포크하고 계속하세요. 저에게 메모를 남겨주시면 이 추가 정보에 귀하의 포크에 눈에 띄는 링크를 추가해 드리겠습니다.
OpenWeatherMap(OWM)은 날씨 관련 데이터를 OpenLayers 기반 지도를 이용하여 시각화하여 제공하는 서비스입니다. 이것은 Leaflet 기반 맵에 대한 OWM 기능에 쉽게 액세스할 수 있는 독립적인 Leaflet 기반 스크립트입니다.
간단히 말해서: OWM의 레이어와 OWM의 현재 도시 데이터를 Leaflet 기반 지도에 번거로움 없이 포함하기 위한 독립적인 JavaScript 라이브러리입니다.
이 라이브러리의 많은 기능을 사용한 지도 예시는 ahorn.lima-city.de/owm에서 볼 수 있습니다. "Wind Rose" 오버레이는 마커에 대한 사용자 정의 기능을 통해 달성할 수 있는 작업에 대한 아이디어를 제공하는 사용자 정의 마커의 예입니다. 이 맵은 예제 디렉터리에서도 사용할 수 있습니다.
이 코드는 CC0에 따라 라이센스가 부여됩니다. 예제 디렉토리의 일부 파일에는 다른 라이센스가 있을 수 있습니다(예: leaflet.js - leaflet.license 참조). 필요한 경우 해당 파일을 살펴보십시오.
OWM은 구름, 구름 클래식, 강수, 강수 클래식, 비, 비 클래식, 눈, 온도, 풍속, 압력 및 압력 윤곽과 같은 일부 TileLayers를 제공합니다.
TileLayers를 초기화하는 방법은 다음과 같습니다(AppId는 이제 필수입니다. 여기에서 직접 가져오세요).
Leaflet TileLayers의 표준 옵션 외에도 다음과 같은 추가 옵션이 있습니다.
기본적으로 범례 이미지는 압력, 강수 클래식, 구름 클래식, 비 클래식, 눈, 온도 및 풍속에 대해서만 사용할 수 있습니다. 더 필요한 경우 자신의 이미지를 추가하세요.
OpenWeatherMap API를 사용하여 도시의 날씨 데이터를 가져옵니다. 마커의 LayerGroup으로 추가됩니다. 이 레이어는 n 분마다 새로 고칠 수 있습니다( 간격 옵션으로 n을 설정하되 10분 미만으로 사용하지 마세요).
동적으로 생성된 레이어를 초기화하는 방법은 다음과 같습니다.
도시 데이터의 동작을 구성하는 데 다양한 옵션을 사용할 수 있습니다( 기본값은 굵게 표시됨). 하지만 옵션이 많다고 해서 겁내지는 마세요. 기본값이 마음에 든다면 아무 것도 설정할 필요가 없습니다.
가장 중요한 줄은 다음과 같습니다.
< head >
< script type =" text/javascript " src =" leaflet.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" leaflet-openweathermap.css " />
< script type =" text/javascript " src =" leaflet-openweathermap.js " > </ script >
</ head > var osm = L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
maxZoom : 18 , attribution : '[insert correct attribution here!]' } ) ;
var clouds = L . OWM . clouds ( { showLegend : false , opacity : 0.5 , appId : 'YOUR_OWN_APPID' } ) ;
var city = L . OWM . current ( { intervall : 15 , lang : 'de' } ) ;
var map = L . map ( 'map' , { center : new L . LatLng ( 51.5 , 10 ) , zoom : 10 , layers : [ osm ] } ) ;
var baseMaps = { "OSM Standard" : osm } ;
var overlayMaps = { "Clouds" : clouds , "Cities" : city } ;
var layerControl = L . control . layers ( baseMaps , overlayMaps ) . addTo ( map ) ; 마커 생성을 위한 기능과 팝업 생성을 위한 기능을 제공합니다. L.OWM.current 호출에 markerFunction 및 popupFunction 옵션을 추가합니다. 매개변수로 얻는 데이터 구조는 현재 잘 문서화되어 있지 않습니다. OWM이 보낸 내용을 받게 됩니다. 데이터를 살펴보고 대부분의 항목이 선택 사항이라는 점을 명심하세요. 함수의 컨텍스트(this)는 사용자가 만든 L.OWM.Current 인스턴스입니다. 따라서 옵션(예: this.options.tempUnit) 및 기타 속성에 액세스할 수 있습니다.
< head >
< script type =" text/javascript " src =" leaflet.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" leaflet-openweathermap.css " />
< script type =" text/javascript " src =" leaflet-openweathermap.js " > </ script >
</ head > function myOwmMarker ( data ) {
// just a Leaflet default marker
return L . marker ( [ data . coord . lat , data . coord . lon ] ) ;
}
function myOwmPopup ( data ) {
// just a Leaflet default popup with name as content
return L . popup ( ) . setContent ( data . name ) ;
}
var osm = L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
maxZoom : 18 , attribution : '[insert correct attribution here!]' } ) ;
var clouds = L . OWM . clouds ( { showLegend : false , opacity : 0.5 , appId : 'YOUR_OWN_APPID' } ) ;
var city = L . OWM . current ( { intervall : 15 , lang : 'de' ,
markerFunction : myOwmMarker , popupFunction : myOwmPopup } ) ;
var map = L . map ( 'map' , { center : new L . LatLng ( 51.5 , 10 ) , zoom : 10 , layers : [ osm ] } ) ;
var baseMaps = { "OSM Standard" : osm } ;
var overlayMaps = { "Clouds" : clouds , "Cities" : city } ;
var layerControl = L . control . layers ( baseMaps , overlayMaps ) . addTo ( map ) ; L.OWM.Utils.i18n[lang] 을 살펴보십시오.
