Ru/API/OpenLayer



Слой метеоинформации для OpenLayer Для библиотеки OpenLayers разработан следующий функционал:
 * Классы слоев погоды и метеостанций
 * Возможность переопределять стандартные стили собственными
 * Классы с кластеризацией маркеров
 * Поддержка серверной кластеризации маркеров

= Библиотека OWM.OpenLayers.js = Для работы с метеорологическми данными необходимо подключить библиотеку OWM.OpenLayers.Х.Х.js ( где Х.Х - номер версии библиотеки ). Кроме того, должна быть подключена сама библиотека OpenLayers.js

В библиотеке OWM.OpenLayers версии 1.2 реализован следующий функционал:


 * Слой погоды
 * OpenLayers.Format.OWMWeather A specific format for parsing OpenWeatherMap CWeather API JSON responses.
 * OpenLayers.Layer.Vector.OWMWeather // Vector Class
 * OpenLayers.Layer.Vector.OWMClusterWeather // Vector for Strategy Cluster
 * Слой метеостанций
 * OpenLayers.Format.OWMStations // A specific format for parsing OpenWeatherMap Stations API JSON responses.
 * OpenLayers.Layer.Vector.OWMStations // Vector Class
 * OpenLayers.Layer.Vector.OWMClusterStations // Cluster Vector Class
 * Вспомогательные функции
 * function GetWeatherBuble
 * function GetStationData
 * function GetWeatherText(st)
 * function GetWeatherIcon(st)

= Примеры использования с OpenLayer =

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

Open Weather Map  #map { width: 100%; height: 99%; border: 1px solid black; }



 

 var map; function init {

//точка центра карты var lat = 7486473; var lon = 4193332; var lonlat = new OpenLayers.LonLat(lon, lat);

map = new OpenLayers.Map("basicMap");

// Создаем оверлеи

// для слоя OSM var mapnik = new OpenLayers.Layer.OSM; // Создаем слой метеостанций. Используется клиентская кластреизация маркеров var stations = new OpenLayers.Layer.Vector.OWMClusterStations("Stations"); // Создаем слой погоды. Используется серверная кластеризация маркеров var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");

//добавляем слои на карту map.addLayers([mapnik, stations, city]);

// подключаем переключатель видимости слоев map.addControl(new OpenLayers.Control.LayerSwitcher);

map.setCenter( lonlat, 10 ); }

Добавление собственных стилей
Создав собственный класс Style, Вы можете переопределить стиль отображения информации на карте. В примере показанно, как можно изменить подпись под картинкой. Температуру заменить на давление. Посмотреть пример можно тут

var StyleMap = new OpenLayers.Style({			fontColor: "black",			fontSize: "12px",			fontFamily: "Arial, Courier New",			labelAlign: "lt",			labelXOffset: "-15",			labelYOffset: "-17",			labelOutlineColor: "white",			labelOutlineWidth: 3,			externalGraphic: "${icon}",			graphicWidth: 60,               	label : "${temp}"+ "°C",			},			{			context: 			{				icon:  function(feature) {					return "http://openweathermap.org"+GetWeatherIcon(feature.attributes.station);				}			}			}

));

var stations = new OpenLayers.Layer.Vector.OWMWeather("Weather", { styleMap: StyleMap });

Добавление всплывающего окна при клике
Посмотреть пример можно example

selectControl = new OpenLayers.Control.SelectFeature(stations); map.addControl(selectControl); selectControl.activate;

API/OpenLayer