Скачать leaflet openweathermap - Скачать leaflet openweathermap

leaflet openweathermap

Другой исходный код

1.0.0

Скачать

OpenWeatherMap для карт на основе листовок

КОНЕЦ ЖИЗНИ

Этот проект больше не поддерживается. Если вы хотите продолжить этот проект, просто сделайте форк и продолжайте. Если вы напишите мне, возможно, я добавлю заметную ссылку на вашу вилку здесь, в этом файле readme.

Описание

OpenWeatherMap (OWM) — это сервис, предоставляющий данные о погоде и визуализирующий их с помощью карты на основе OpenLayers. Это независимый скрипт на основе Leaflet, обеспечивающий легкий доступ к функциям OWM для карт на основе Leaflet.

Вкратце: независимая библиотека JavaScript для быстрого включения слоев OWM и текущих данных города OWM в карты на основе Leaflet.

Демо

Пример карты, использующей многие функции этой библиотеки, можно увидеть по адресу ahorn.lima-city.de/owm. Его наложение «Роза ветров» представляет собой пример определяемого пользователем маркера, который дает вам представление о том, чего можно достичь с помощью определяемых пользователем функций для маркеров. Эта карта также доступна в каталоге примеров.

Лицензия

Этот код доступен под лицензией CC0. Некоторые файлы в каталоге примеров могут иметь другие лицензии (например, Leaflet.js — см. Leaflet.license) — при необходимости просмотрите файлы.

Использование тайловых слоев

OWM предлагает несколько слоев тайлов: «Облака», «Классические облака», «Осадки», «Классические осадки», «Дождь», «Классический дождь», «Снег», «Температура», «Скорость ветра», «Давление» и «Контуры давления».

Инициализация тайловых слоев

Вот как инициализировать эти TileLayers (теперь AppId является обязательным, получите свой собственный здесь):

var Clouds = 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 дождь = 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 Pressure = L.OWM.pressure({appId: 'YOUR_OWN_APPID'});
var Pressurecntr = L.OWM.pressureContour({appId: 'YOUR_OWN_APPID'});
var temp = L.OWM.temperature({appId: 'YOUR_OWN_APPID'});
var ветер = L.OWM.wind({appId: 'YOUR_OWN_APPID'});

Параметры для TileLayers

Помимо стандартных опций Leaflet TileLayers есть дополнительные:

appId : AppId является обязательным. Получите его на https://www.openweathermap.org/appid.
showLegend : true или false. Если установлено значение true и установлена опция «legendImagePath», на карте будет изображение легенды.
LegendImagePath : URL-адрес (для некоторых слоев установлено изображение по умолчанию, для других — значение null , см. ниже). URL-адрес или относительный путь к изображению, которое является легендой этого слоя.
LegendPosition : 'снизу слева' . Расположение изображений легенды на карте. Доступны стандартные позиции для элементов управления Leaflet («сверху», «сверху слева», «снизу справа», «снизу слева»).

По умолчанию изображение легенды доступно только для давления, классических осадков, классических облаков, классического дождя, снега, температуры и скорости ветра. Пожалуйста, добавьте свои собственные изображения, если вам нужно больше.

Использование текущих данных по городам

Данные о погоде для городов извлекаются с помощью API OpenWeatherMap. Они добавляются как группа маркеров LayerGroup. Этот слой может обновляться каждые n минут (задайте n с помощью опции Interval , но не используйте менее 10 минут, пожалуйста).

Инициализация

Вот как инициализировать эти динамически создаваемые слои:

var city = L.OWM.current( /* options */ );

Параметры

Доступно множество опций для настройки поведения данных города ( значение по умолчанию выделено жирным шрифтом). Но не пугайтесь большого количества опций: вам не нужно устанавливать их, если вас устраивают значения по умолчанию:

appId : строка ( ноль ). Пожалуйста, получите бесплатный ключ API (называемый APPID), если вы регулярно используете текущие данные о погоде OWM.
Язык : «en» , «de», «ru», «fr», «es», «ca». Язык всплывающих текстов. Примечание: еще не все переводы завершены.
минзум : число ( 7 ). Минимальный уровень масштабирования для получения данных о городе. Используйте меньшие значения только на свой страх и риск.
интервал : Число ( 0 ). Время в минутах для перезагрузки данных о городе. Пожалуйста, не используйте менее 10 минут. 0 без перезагрузки (по умолчанию)
ProgressControl : true или false. Следует ли использовать элемент управления ходом выполнения, чтобы сообщить пользователю, что данные загружаются в данный момент.
imageLoadingUrl : URL-адрес ( 'owmloading.gif' ). URL-адрес загружаемого изображения или путь относительно HTML-документа. Это важно, когда изображение не находится в том же каталоге, что и HTML-документ!
imageLoadingBgUrl : URL-адрес ( ноль ). URL-адрес фонового изображения для контроля прогресса, если вам не нравится изображение по умолчанию.
Единица измерения температуры : «C» , «F», «K». Отображение температуры в градусах Цельсия, Фаренгейта или Кельвина.
tempDigits : Число ( 1 ). Количество десятичных знаков температуры.
SpeedUnit : «мс» , «км/ч» или «миль в час». Единица скорости ветра (м/с, км/ч или миль/ч).
SpeedDigits : Число ( 0 ). Количество десятичных знаков для скорости ветра.
всплывающее окно : правда или ложь. Привязывать ли всплывающее окно к маркеру города.
KeepPopup : true или false. Если это правда, он пытается повторно открыть уже открытое всплывающее окно при перемещении или перезагрузке. Может привести к дополнительному перемещению карты (после повторного открытия всплывающего окна) с повторным закрытием и повторным открытием всплывающего окна.
showOwmStationLink : true или false. Связывать ли название города с OWM.
showWindSpeed : «скорость», «бофорт» или «оба» . Показывать скорость ветра как скорость в единицах скорости или в шкале Бофорта, или в обоих случаях.
showWindDirection : «градус», «дескриптор» или «оба» . Показывать направление ветра в градусах, в виде описания (например, ССВ) или в обоих случаях.
showTimestamp : true или false. Показывать ли метку времени данных.
showTempMinMax : true или false. Показывать ли температуру мин/макс.
useLocalTime : true или false. Использовать ли местное время или UTC для отметки времени.
ClusterSize : Число ( 150 ). Если некоторые города расположены слишком близко друг к другу, они скрыты. В области размером ClusterSize пикселей * ClusterSize пикселей отображается только один город. Если вы увеличите масштаб, появятся скрытые города.
imageUrlCity : URL ( 'https://openweathermap.org/img/w/{icon}.png' ). Шаблон URL для изображений погодных условий в городах. {icon} будет заменен свойством icon данных города. См. http://openweathermap.org/img/w/ для получения некоторых стандартных изображений.
imageWidth : Число ( 50 ). Ширина изображения погодных условий города.
imageHeight : число ( 50 ). Высота изображения погодных условий города.
маркерФункция : Функция ( ноль ). Пользовательская функция для создания маркера. Требуется один параметр для данных города.
popupFunction : Функция ( ноль ). Пользовательская функция для создания всплывающих окон. Требуется один параметр для данных города.
кэширование : правда или ложь. Используйте кэширование текущих данных о погоде. Кэшированные данные перезагружаются, когда они слишком старые или новая ограничивающая рамка не помещается в кэшированную ограничивающую рамку.
кэшМаксАже : Число ( 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 ) ;