leaflet openweathermap下载 - leaflet openweathermap源代码下载

leaflet openweathermap

其他源码

1.0.0

下载

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