leaflet openweathermap

OpenWeatherMap 用於基於 Leaflet 的地圖

生命終點

該項目不再維護。如果你想繼續這個項目，只需分叉它並繼續。如果您給我留言，也許我會在本自述文件中添加一個指向您的分支的顯著連結。

描述

OpenWeatherMap (OWM) 是一項提供天氣相關資料的服務，並使用基於 OpenLayers 的地圖將其視覺化。這是一個獨立的基於 Leaflet 的腳本，可輕鬆存取基於 Leaflet 的地圖的 OWM 功能。

簡而言之：一個獨立的 JavaScript 函式庫，可以輕鬆地將 OWM 的圖層和 OWM 目前的城市資料包含在基於 Leaflet 的地圖中。

示範

使用該庫的許多功能的範例地圖可以在 ahorn.lima-city.de/owm 上看到。其「風玫​​瑰」疊加層是使用者定義標記的範例，可讓您了解使用者定義的標記函數可以實現哪些目標。該地圖也可以在範例目錄中找到。

執照

此代碼已獲得 CC0 許可。範例目錄中的某些檔案可能有其他授權（例如 leaflet.js - 請參閱 leaflet.license） - 如果需要，請查看這些檔案。

使用 TileLayer

OWM 提供了一些 TileLayers：雲、雲經典、降水、降水經典、雨、雨經典、雪、溫度、風速、壓力和壓力等值線。

初始化 TileLayer

以下是初始化這些 TileLayers 的方法（現在必須提供 AppId，請在此處取得自己的 AppId）：

• var 雲 = L.OWM.clouds({appId: 'YOUR_OWN_APPID'});
• var cloudscls = L.OWM.cloudsClassic({appId: 'YOUR_OWN_APPID'});
• var 降水 = L.OWM.precipitation({appId: 'YOUR_OWN_APPID'});
• var 沉澱cls = L.OWM.precipitationClassic({appId: 'YOUR_OWN_APPID'});
• var rain = L.OWM.rain({appId: 'YOUR_OWN_APPID'});
• var raincls = L.OWM.rainClassic({appId: 'YOUR_OWN_APPID'});
• var Snow = L.OWM.snow({appId: 'YOUR_OWN_APPID'});
• var 壓力 = L.OWM. 壓力({appId: 'YOUR_OWN_APPID'});
• varPressurecntr = L.OWM.PressureContour({appId: 'YOUR_OWN_APPID'});
• var temp = L.OWM.溫度({appId: 'YOUR_OWN_APPID'});
• var Wind = L.OWM.wind({appId: 'YOUR_OWN_APPID'});

TileLayer 的選項

除了 Leaflet TileLayers 的標準選項之外，還有其他選項：

• appId ：AppId 是必要的。從 https://www.openweathermap.org/appid 取得
• showLegend ：正確或錯誤。如果為 true 並且設定了選項“legendImagePath”，地圖上將會有一個圖例影像。
• legendImagePath ：URL（某些圖層設定為預設影像，其他圖層設定為空，請參閱下文）。作為該圖層圖例的圖像的 URL 或相對路徑。
• legendPosition : '左下角' .圖例影像在地圖上的位置。可用的是 Leaflet 控制的標準位置（「右上」、「左上」、「右下」、「左下」）。

開箱即用的圖例影像僅適用於壓力、經典降水、經典雲、經典雨、雪、溫度和風速。如果您需要更多圖像，請添加您自己的圖像。

使用城市的當前數據

使用 OpenWeatherMap API 取得城市的天氣資料。它們作為標記的 LayerGroup 添加。此層可以每n分鐘刷新一次（使用選項intervall設定n ，但請不要使用少於10分鐘）。

初始化

以下是初始化這些動態建立的圖層的方法：

• var city = L.OWM.current( /* 選項 */ );

選項

有許多選項可用於配置城市資料的行為（預設值是粗體）。但不要害怕大量的選項，如果您對預設值感到滿意，則無需設定任何選項：

• appId ：字串（空）。如果您定期使用 OWM 的當前天氣數據，請取得免費的 API 金鑰（稱為 APPID）。
• lang ： 「en」 、「de」、「ru」、「fr」、「es」、「ca」。彈出文字的語言。注意：並非所有翻譯都已完成。
• minZoom ：數字 ( 7 )。用於取得城市資料的最小縮放等級。使用較小的值僅需要您自擔風險。
• 間隔：數字 ( 0 )。重新載入城市資料的時間（以分鐘為單位）。請不要使用少於10分鐘。 0 不重新載入（預設）
• 進度控制： true或 false。是否應使用進度控制來告訴使用者目前正在載入資料。
• imageLoadingUrl ：URL（ 'owmloading.gif' ）。載入圖片的 URL，或相對於 HTML 文件的路徑。當圖像與 HTML 文件不在同一目錄中時，這一點很重要！
• imageLoadingBgUrl ： URL ( null )。如果您不喜歡預設圖像，則用於進度控制的背景圖像的 URL。
• 溫度單位： 'C' 、'F'、'K'。以攝氏度、華氏度或開爾文顯示溫度。
• 溫度數字：數字 ( 1 )。溫度的小數位數。
• 速度單位： 'ms' 、'kmh' 或 'mph'。風速單位（米/秒、公里/小時或英里/小時）。
• speedDigits ：數字 ( 0 )。風速的小數位數。
• 彈出視窗：正確或錯誤。是否將彈出視窗綁定到城市標記。
• keepPopup ： true或 false。當 true 時，它會嘗試在移動或重新載入時重新開啟已開啟的彈出視窗。可能會導致額外的地圖移動（重新打開彈出視窗後），並再次關閉並重新打開彈出視窗。
• showOwmStationLink ：正確或錯誤。是否將城市名稱連結到 OWM。
• showWindSpeed : 'speed', 'beaufort' 或'both' 。將風速顯示為 speedUnit 或 beaufort scala 或兩者的速度。
• showWindDirection ： 'deg'、 'desc' 或'both' 。將風向顯示為度數、描述（例如 NNE）或兩者。
• showTimestamp ：真或假。是否顯示資料的時間戳記。
• showTempMinMax ： true或 false。是否顯示最低/最高溫度
• useLocalTime ： true或 false。是否使用本地時間或 UTC 作為時間戳記。
• 簇大小：數字 ( 150 )。如果某些城市彼此距離太近，它們就會被隱藏起來。在 clusterSize 像素 * clusterSize 像素大小的區域中，僅顯示一個城市。如果放大，隱藏的城市就會出現。
• imageUrlCity ：URL（ 'https://openweathermap.org/img/w/{icon}.png' ）。城市天氣狀況圖像的 URL 範本。 {icon} 將被城市資料的 icon 屬性取代。請參閱 http://openweathermap.org/img/w/ 以了解一些標準圖像。
• 影像寬度：數字（ 50 ）。城市天氣狀況影像的寬度。
• 影像高度：數位（ 50 ）。城市天氣狀況影像的高度。
• 標記函數：函數（空）。用於建立標記的使用者定義函數。需要一個城市數據參數。
• popupFunction ：函數（空）。用於建立彈出視窗的使用者定義函數。需要一個城市數據參數。
• 快取： true或 false。使用當前天氣資料的快取。當快取的資料太舊或新的邊界框不適合快取的邊界框時，將重新載入資料。
• 快取最大年齡：數字 ( 15 )。快取資料在被視為太舊之前的最長期限（以分鐘為單位）。
• keepOnMinZoom ：假或真。當縮放 < minZoom 時保留或刪除標記。
• baseUrl ：預設為「https://{s}.tile.openweathermap.org/map/{layername}/{z}/{x}/{y}.png」 - 只有當您知道自己是什麼時才更改它正在做。

簡單的例子

以下是最重要的幾行：

 < 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 ) ; 

使用者提供當前天氣標記/彈出功能的範例

提供一種用於建立標記的函數，另一種用於建立彈出視窗的函數。將選項markerFunction和popupFunction加入L.OWM.current的呼叫中。作為參數所獲得的資料結構目前還沒有很好的記錄。您會收到 OWM 發送的內容。只需查看資料並記住大多數條目都是可選的。函數的上下文 (this) 是您建立的 L.OWM.Current 實例。因此，您可以存取選項（例如 this.options.TemperatureUnit）和其他屬性。

 < 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] 。