1. Создание карты
2. Получение данных
3. Загрузка данных
4. Отображение данных
5. Добавление аннотаций
6. Добавление символов погоды
7. Делать это красиво

листовка это легкая библиотека JavaScript для создания интерактивных карт в Интернете. Это альтернатива Google Maps с открытым исходным кодом, и из-за своего небольшого размера она отлично подходит для мобильных приложений. Листовка позволяет нам добавлять маркеры и другие геометрические фигуры на карту, что делает ее отличной для визуализации географических данных.

В этом уроке мы создадим собственную карту погоды на основе данных из Met Office. По ходу дела мы узнаем, как создать карту с помощью Leaflet, как загрузить прогнозные данные из Met Office и как добавить управляемые данными символы на нашу карту.

Создание карты

Наша первая карта Leaflet, использующая сервер листов OpenStreetMap с центром в Великобритании

Leaflet создает карты на основе плиток, которые состоят из нескольких изображений (называемых плитками), загруженных с сервера. Существует несколько доступных серверов плиток, но для начала мы будем использовать сервер плиток OpenStreetMap.

Начнем с создания файла index.html с элементом контейнера:

<div id = "myMap"> </ div>

Важно установить высоту этого элемента, иначе карта будет невидимой! Чтобы сделать карту с помощью Leaflet, нам нужно сделать три вещи:

• Создайте объект карты с помощью L.Map (), передав идентификатор элемента контейнера
• Создайте слой листов (используя наш выбранный сервер листов)
• Установите широту, долготу и уровень масштабирования

Вот JavaScript, который нам нужен для создания простой карты с центром в Великобритании (см. Пример кода 1 в GitHub репо ):

var map = new L.Map ('myMap'); var osmLayer = new L.TileLayer ('http: // {s} .tile.openstreetmap.org / {z} / {x} / {y} .png', {атрибуция: 'Картографические данные (C) <ссылка) = "http://openstreetmap.org"> участники OpenStreetMap </a> '}); map.addLayer (osmLayer); map.setView ([55, -5], 6);

Получение данных

Теперь мы собираемся получить некоторые данные из службы DataPoint в Met Office, которая предоставляет несколько каналов данных о погоде. Одним из его предложений является API, который предоставляет данные прогноза погоды в ряде мест в Великобритании. Мы будем использовать это для получения данных для нашей карты.

Чтобы использовать DataPoint, вам сначала нужно посетить www.metoffice.gov.uk/datapoint и создать учетную запись. После этого вы сможете получить свой личный ключ API (если вы не хотите этого делать, данные предоставлены в примере кода 2).

Давайте сделаем простой запрос на прогноз на конкретную дату. Перейдите по следующему URL-адресу с помощью браузера:

http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/all?res=daily&time=YYYY-MM-DD&key=YOUR-API-KEY-HERE

Вам нужно будет ввести дату в виде строки ГГГГ-ММ-ДД (например, 2016-02-10) и вставить свой ключ API там, где написано ВАШ-API-КЛЮЧ-ЗДЕСЬ. DataPoint предоставляет прогнозы только на пять дней вперед, поэтому вам нужно будет ввести дату в ближайшем будущем.

Когда вы вводите этот URL, в конечном итоге появится большой объект JSON, который выглядит примерно так:

{"SiteRep": {"Wx": {"Param": [{"name": "FDm", "units": "C", "$": "По ощущениям ...

Сохраните это в своем браузере в каталоге вашего проекта как Forecast.json.

Загрузка данных

Мы можем загрузить Forecast.json, используя функцию getJSON в jQuery. Когда я загружаю незнакомый набор данных, я часто проверяю его в консоли разработчика Chrome (пример кода 2):

$ .getJSON ('cast.json ', function (data) {console.log (data);});

Если мы развернем данные несколько раз в консоли, мы увидим Sitemap.DV.Location, который представляет собой массив местоположений. Каждый из них имеет широту и долготу, имя и дополнительный объект Period, который содержит фактические данные прогноза.

На следующем этапе мы будем перебирать этот массив и отображать маркер для каждого местоположения.

Отображение данных

Листовка может добавить маркер на заданной долготе и широте. Здесь мы добавили маркер для каждого местоположения прогноза

Теперь мы будем отображать прогноз местоположения на карте с помощью маркеров (маркер - это самый простой способ отобразить местоположение на нашей карте).

var sites = прогнозData.SiteRep.DV.Location; sites.forEach (function (site, i) {if (i% 20! == 0) return; // Просто показать несколько сайтов var marker = L.marker ([+ site.lat, + site.lon]); marker.addTo (карта);});

Здесь мы определили функцию, которая принимает наши прогнозные данные и проходит через массив SiteRep.DV.Location, который мы видели ранее.

Для каждого сайта мы создаем маркер с помощью L.marker, передавая широту и долготу, а затем добавляем его на карту (пример кода 3). Мы показываем только подмножество сайтов, так как Leaflet изо всех сил пытается показать все 5 974 местоположения!

Совет: в наборе данных значения широты и долготы являются строками, поэтому мы преобразуем их в числа, добавив символ +.

Добавление аннотаций

Leaflet позволяет легко добавлять аннотации к каждому маркеру с помощью функции bindPopup:

marker.bindPopup ('возможен дождь' + site.Period.Rep [0] .PPd + '%');

Здесь мы определяем текст, который должен отображаться при нажатии на маркер. В этом случае мы отображаем Period.Rep [0] .PPd, который является вероятностью дождя (пример кода 4).

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

Добавление символов погоды

Нажатие на маркер для отображения прогноза немного обременительно, поэтому давайте отображать символ погоды в каждом месте.

К счастью, наши данные содержат специальный код Period.Rep [0] .W, который суммирует погоду в определенном месте. Например, 1 означает, что это солнечный день, а 20 означает град. Точные детали Вот ,

Мы собираемся использовать отличный набор значков погоды, разработанный Алессио Атзени, под названием Meteocons , Давайте начнем с определения справочной таблицы, которая определяет значок для отображения для каждого типа погоды:

var weatherTypeToIcon = {0: 3, 1: 2, 2: 9 и т. д.}

Теперь мы можем построить путь iconPath к соответствующему значку Meteocon. После того, как мы это сделали, мы используем функцию значка Leaflet для создания объекта значка из нашего изображения значка и добавляем его в маркер (см. Пример кода 5):

var iconIndex = weatherTypeToIcon [site.Period.Rep [0] .W]; var iconPath = 'meteocons-icons / SVG /' + iconIndex + '.svg'; var weatherIcon = L.icon ({iconUrl: iconPath, iconSize: [30, 30]}); var marker = L.marker ([+ site.lat, + site.lon], {icon: weatherIcon});

Теперь у нас есть карта погоды, основанная на реальных данных прогноза от Met Office!

Делать это красиво

Наконец, мы сделаем пару изменений, чтобы сделать карту более привлекательной. Мы начнем с использования более нейтрального слоя плиток, чтобы символы выделялись немного лучше:

var CartoDB_Positron = L.tileLayer ('http: // {s} .basemaps.cartocdn.com / light_all / {z} / {x} / {y} .png'); map.addLayer (CartoDB_Positron);

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

Значки расположены не очень хорошо, поэтому мы можем написать некоторый код для более регулярного их размещения (см. Пример кода 6).

Псевдокод для этого:

includesSites = [] для каждого сайта: если этот сайт не близок к одному во включенных сайтах: добавьте его во включенные сайты

Так что у нас это! Мы использовали Leaflet, чтобы сделать карту погоды Великобритании, используя реальные данные прогноза из Met Office. Есть много других типов данных, которые вы, возможно, захотите визуализировать на карте, и вы можете использовать шаблон, аналогичный показанному здесь. Веселитесь и продолжайте составлять карты!

Слова : Питер Кук

Питер Кук - веб-разработчик, специализирующийся на визуализации данных. Эта статья была первоначально опубликована в выпуске 276 чистый журнал ,

Понравилось это? Прочитайте это!

Похожие