# Визуализация данных о местоположении  > Скетчнот от [Nitya Narasimhan](https://github.com/nitya). Нажмите на изображение, чтобы увидеть его в большем размере. Это видео дает обзор Azure Maps с IoT — сервиса, который будет рассмотрен в этом уроке. [](https://www.youtube.com/watch?v=P5i2GFTtb2s) > 🎥 Нажмите на изображение выше, чтобы посмотреть видео ## Тест перед лекцией [Тест перед лекцией](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/25) ## Введение В прошлом уроке вы узнали, как получать GPS-данные с ваших датчиков и сохранять их в облаке в контейнере хранилища с помощью серверного кода. Теперь вы узнаете, как визуализировать эти точки на карте Azure. Вы научитесь создавать карту на веб-странице, узнаете о формате данных GeoJSON и о том, как использовать его для отображения всех собранных GPS-точек на вашей карте. В этом уроке мы рассмотрим: * [Что такое визуализация данных](../../../../../3-transport/lessons/3-visualize-location-data) * [Сервисы карт](../../../../../3-transport/lessons/3-visualize-location-data) * [Создание ресурса Azure Maps](../../../../../3-transport/lessons/3-visualize-location-data) * [Отображение карты на веб-странице](../../../../../3-transport/lessons/3-visualize-location-data) * [Формат GeoJSON](../../../../../3-transport/lessons/3-visualize-location-data) * [Отображение GPS-данных на карте с использованием GeoJSON](../../../../../3-transport/lessons/3-visualize-location-data) > 💁 В этом уроке будет немного HTML и JavaScript. Если вы хотите узнать больше о веб-разработке с использованием HTML и JavaScript, ознакомьтесь с [Веб-разработкой для начинающих](https://github.com/microsoft/Web-Dev-For-Beginners). ## Что такое визуализация данных Визуализация данных, как следует из названия, — это представление данных в визуальной форме, чтобы сделать их более понятными для человека. Обычно это ассоциируется с диаграммами и графиками, но на самом деле это любой способ графического представления данных, который помогает людям лучше их понять и принимать решения. Простой пример — в проекте фермы вы собирали данные о влажности почвы. Таблица данных о влажности почвы, собранных каждый час 1 июня 2021 года, может выглядеть следующим образом: | Дата | Показание | | ---------------- | --------: | | 01/06/2021 00:00 | 257 | | 01/06/2021 01:00 | 268 | | 01/06/2021 02:00 | 295 | | 01/06/2021 03:00 | 305 | | 01/06/2021 04:00 | 325 | | 01/06/2021 05:00 | 359 | | 01/06/2021 06:00 | 398 | | 01/06/2021 07:00 | 410 | | 01/06/2021 08:00 | 429 | | 01/06/2021 09:00 | 451 | | 01/06/2021 10:00 | 460 | | 01/06/2021 11:00 | 452 | | 01/06/2021 12:00 | 420 | | 01/06/2021 13:00 | 408 | | 01/06/2021 14:00 | 431 | | 01/06/2021 15:00 | 462 | | 01/06/2021 16:00 | 432 | | 01/06/2021 17:00 | 402 | | 01/06/2021 18:00 | 387 | | 01/06/2021 19:00 | 360 | | 01/06/2021 20:00 | 358 | | 01/06/2021 21:00 | 354 | | 01/06/2021 22:00 | 356 | | 01/06/2021 23:00 | 362 | Для человека понять эти данные может быть сложно. Это просто набор чисел без какого-либо контекста. Чтобы визуализировать эти данные, их можно отобразить на линейном графике:  График можно улучшить, добавив линию, которая показывает момент включения автоматической системы полива при уровне влажности почвы 450:  Этот график быстро показывает не только уровни влажности почвы, но и моменты включения системы полива. Диаграммы — не единственный инструмент для визуализации данных. IoT-устройства, отслеживающие погоду, могут иметь веб-приложения или мобильные приложения, которые визуализируют погодные условия с помощью символов, таких как облако для облачных дней, дождевое облако для дождливых дней и так далее. Существует огромное количество способов визуализации данных, от серьезных до забавных. ✅ Подумайте о способах, которыми вы видели визуализацию данных. Какие из них были наиболее понятными и позволяли принимать решения быстрее всего? Лучшие визуализации позволяют людям принимать решения быстро. Например, стена с множеством датчиков, показывающих различные показания промышленного оборудования, может быть сложной для восприятия, но мигающий красный свет при возникновении проблемы позволяет человеку быстро принять решение. Иногда лучшая визуализация — это мигающий свет! При работе с GPS-данными наиболее понятной визуализацией может быть отображение данных на карте. Карта, показывающая, например, грузовики доставки, может помочь сотрудникам на заводе увидеть, когда прибудут грузовики. Если эта карта показывает не только текущие местоположения грузовиков, но и их содержимое, сотрудники завода могут планировать свои действия — если они видят приближающийся рефрижераторный грузовик, они знают, что нужно подготовить место в холодильнике. ## Сервисы карт Работа с картами — это интересная задача, и существует множество сервисов, таких как Bing Maps, Leaflet, Open Street Maps и Google Maps. В этом уроке вы узнаете о [Azure Maps](https://azure.microsoft.com/services/azure-maps/?WT.mc_id=academic-17441-jabenn) и о том, как они могут отображать ваши GPS-данные.  Azure Maps — это "набор геопространственных сервисов и SDK, использующих актуальные картографические данные для предоставления географического контекста веб- и мобильным приложениям". Разработчикам предоставляются инструменты для создания красивых, интерактивных карт, которые могут рекомендовать маршруты, предоставлять информацию о дорожных происшествиях, навигацию внутри помещений, возможности поиска, данные о высоте, погодные сервисы и многое другое. ✅ Попробуйте некоторые [примеры кода для работы с картами](https://docs.microsoft.com/samples/browse?WT.mc_id=academic-17441-jabenn&products=azure-maps) Вы можете отображать карты как пустое полотно, плитки, спутниковые изображения, спутниковые изображения с наложением дорог, различные типы карт в градациях серого, карты с теневым рельефом для отображения высоты, карты ночного вида и карты с высоким контрастом. Вы можете получать обновления в реальном времени на своих картах, интегрируя их с [Azure Event Grid](https://azure.microsoft.com/services/event-grid/?WT.mc_id=academic-17441-jabenn). Вы можете управлять поведением и внешним видом своих карт, включая различные элементы управления, чтобы карта реагировала на события, такие как масштабирование, перетаскивание и нажатие. Чтобы настроить внешний вид карты, вы можете добавлять слои, включающие пузырьки, линии, полигоны, тепловые карты и многое другое. Какой стиль карты вы выберете, зависит от вашего выбора SDK. Вы можете получить доступ к API Azure Maps, используя [REST API](https://docs.microsoft.com/javascript/api/azure-maps-rest/?WT.mc_id=academic-17441-jabenn&view=azure-maps-typescript-latest), [Web SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control?WT.mc_id=academic-17441-jabenn) или, если вы создаете мобильное приложение, [Android SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-android-map-control-library?WT.mc_id=academic-17441-jabenn&pivots=programming-language-java-android). В этом уроке вы будете использовать Web SDK для рисования карты и отображения пути GPS-данных вашего датчика. ## Создание ресурса Azure Maps Ваш первый шаг — создать учетную запись Azure Maps. ### Задача — создание ресурса Azure Maps 1. Выполните следующую команду в терминале или командной строке, чтобы создать ресурс Azure Maps в вашей группе ресурсов `gps-sensor`: ```sh az maps account create --name gps-sensor \ --resource-group gps-sensor \ --accept-tos \ --sku S1 ``` Это создаст ресурс Azure Maps с именем `gps-sensor`. Используемый уровень — `S1`, который является платным уровнем с широким набором функций, но с щедрым количеством бесплатных вызовов. > 💁 Чтобы узнать стоимость использования Azure Maps, ознакомьтесь с [страницей цен Azure Maps](https://azure.microsoft.com/pricing/details/azure-maps/?WT.mc_id=academic-17441-jabenn). 1. Вам понадобится API-ключ для ресурса карт. Используйте следующую команду, чтобы получить этот ключ: ```sh az maps account keys list --name gps-sensor \ --resource-group gps-sensor \ --output table ``` Скопируйте значение `PrimaryKey`. ## Отображение карты на веб-странице Теперь вы можете перейти к следующему шагу — отображению карты на веб-странице. Мы будем использовать только один файл `html` для вашего небольшого веб-приложения; имейте в виду, что в производственной среде или в команде ваше веб-приложение, скорее всего, будет иметь больше компонентов. ### Задача — отображение карты на веб-странице 1. Создайте файл с именем index.html в папке на вашем локальном компьютере. Добавьте HTML-разметку для отображения карты: ```html

``` Карта будет загружаться в `div` с именем `myMap`. Несколько стилей позволяют ей занимать ширину и высоту страницы. > 🎓 `div` — это раздел веб-страницы, который можно именовать и стилизовать. 1. Под открывающим тегом `` добавьте внешнюю таблицу стилей для управления отображением карты и внешний скрипт из Web SDK для управления ее поведением: ```html ``` Эта таблица стилей содержит настройки внешнего вида карты, а файл скрипта содержит код для загрузки карты. Добавление этого кода похоже на включение заголовочных файлов в C++ или импорт модулей в Python. 1. Под этим скриптом добавьте блок скрипта для запуска карты. ```javascript ``` Замените `` на API-ключ вашей учетной записи Azure Maps. Если вы откроете свой файл `index.html` в веб-браузере, вы должны увидеть загруженную карту, сфокусированную на районе Сиэтла.  ✅ Попробуйте изменить параметры масштабирования и центра, чтобы изменить отображение карты. Вы можете добавить разные координаты, соответствующие широте и долготе ваших данных, чтобы изменить центр карты. > 💁 Лучший способ работать с веб-приложениями локально — установить [http-server](https://www.npmjs.com/package/http-server). Вам понадобятся [node.js](https://nodejs.org/) и [npm](https://www.npmjs.com/) перед использованием этого инструмента. После установки этих инструментов вы можете перейти в папку с вашим файлом `index.html` и ввести `http-server`. Веб-приложение откроется на локальном веб-сервере [http://127.0.0.1:8080/](http://127.0.0.1:8080/). ## Формат GeoJSON Теперь, когда ваше веб-приложение настроено и карта отображается, вам нужно извлечь GPS-данные из вашего хранилища и отобразить их в виде слоя маркеров поверх карты. Прежде чем мы это сделаем, давайте рассмотрим формат [GeoJSON](https://wikipedia.org/wiki/GeoJSON), который требуется для Azure Maps. [GeoJSON](https://geojson.org/) — это открытый стандарт JSON со специальным форматированием, предназначенным для работы с географическими данными. Вы можете изучить его, тестируя пример данных с помощью [geojson.io](https://geojson.io), который также является полезным инструментом для отладки файлов GeoJSON. Пример данных GeoJSON выглядит следующим образом: ```json { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -2.10237979888916, 57.164918677004714 ] } } ] } ``` Особое внимание следует обратить на способ вложения данных в объект `Feature` внутри `FeatureCollection`. Внутри этого объекта находится `geometry` с `coordinates`, указывающими широту и долготу. ✅ При создании вашего GeoJSON обратите внимание на порядок `latitude` и `longitude` в объекте, иначе ваши точки не появятся там, где должны! GeoJSON ожидает данные в порядке `lon,lat` для точек, а не `lat,lon`. `Geometry` может иметь разные типы, такие как одна точка или полигон. В этом примере это точка с двумя указанными координатами — долгота и широта. ✅ Azure Maps поддерживает стандартный GeoJSON, а также некоторые [расширенные функции](https://docs.microsoft.com/azure/azure-maps/extend-geojson?WT.mc_id=academic-17441-jabenn), включая возможность рисовать круги и другие геометрические фигуры. ## Отображение GPS-данных на карте с использованием GeoJSON Теперь вы готовы использовать данные из хранилища, которое вы создали в предыдущем уроке. Напомним, что данные хранятся в виде нескольких файлов в хранилище блобов, поэтому вам нужно будет извлечь файлы и обработать их, чтобы Azure Maps мог использовать эти данные. ### Задача - настройка доступа к хранилищу с веб-страницы Если вы попытаетесь обратиться к вашему хранилищу для получения данных, вы можете быть удивлены, увидев ошибки в консоли вашего браузера. Это происходит из-за того, что вам нужно настроить разрешения для [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) в этом хранилище, чтобы внешние веб-приложения могли читать его данные. > 🎓 CORS расшифровывается как "Cross-Origin Resource Sharing" (совместное использование ресурсов между источниками) и обычно должен быть явно настроен в Azure по соображениям безопасности. Это предотвращает доступ к вашим данным с сайтов, которые вы не ожидаете. 1. Выполните следующую команду, чтобы включить CORS: ```sh az storage cors add --methods GET \ --origins "*" \ --services b \ --account-name \ --account-key ``` Замените `` на имя вашего аккаунта хранилища. Замените `` на ключ аккаунта для вашего хранилища. Эта команда позволяет любому веб-сайту (символ `*` означает любой) выполнять запросы типа *GET*, то есть получать данные из вашего аккаунта хранилища. Параметр `--services b` означает, что это настройка применяется только для блобов. ### Задача - загрузка GPS-данных из хранилища 1. Замените все содержимое функции `init` следующим кодом: ```javascript fetch("https://.blob.core.windows.net/gps-data/?restype=container&comp=list") .then(response => response.text()) .then(str => new window.DOMParser().parseFromString(str, "text/xml")) .then(xml => { let blobList = Array.from(xml.querySelectorAll("Url")); blobList.forEach(async blobUrl => { loadJSON(blobUrl.innerHTML) }); }) .then( response => { map = new atlas.Map('myMap', { center: [-122.26473, 47.73444], zoom: 14, authOptions: { authType: "subscriptionKey", subscriptionKey: "", } }); map.events.add('ready', function () { var source = new atlas.source.DataSource(); map.sources.add(source); map.layers.add(new atlas.layer.BubbleLayer(source)); source.add(features); }) }) ``` Замените `` на имя вашего аккаунта хранилища. Замените `` на ключ API для вашего аккаунта Azure Maps. Здесь происходит несколько вещей. Во-первых, код извлекает ваши GPS-данные из контейнера блобов, используя URL-адрес, который формируется с использованием имени вашего аккаунта хранилища. Этот URL-адрес извлекает данные из `gps-data`, указывая, что тип ресурса - контейнер (`restype=container`), и возвращает информацию обо всех блобах. Этот список не возвращает сами блобы, но предоставляет URL-адрес для каждого блоба, который можно использовать для загрузки данных блоба. > 💁 Вы можете вставить этот URL-адрес в ваш браузер, чтобы увидеть детали всех блобов в вашем контейнере. У каждого элемента будет свойство `Url`, которое вы также можете открыть в браузере, чтобы увидеть содержимое блоба. Затем этот код загружает каждый блоб, вызывая функцию `loadJSON`, которую мы создадим далее. После этого создается элемент управления картой и добавляется код для события `ready`. Это событие вызывается, когда карта отображается на веб-странице. Событие `ready` создает источник данных Azure Maps - контейнер, содержащий данные GeoJSON, которые будут заполнены позже. Этот источник данных затем используется для создания слоя пузырьков - набора кругов на карте, центрированных над каждой точкой в GeoJSON. 1. Добавьте функцию `loadJSON` в ваш блок скрипта ниже функции `init`: ```javascript var map, features; function loadJSON(file) { var xhr = new XMLHttpRequest(); features = []; xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { gps = JSON.parse(xhr.responseText) features.push( new atlas.data.Feature(new atlas.data.Point([parseFloat(gps.gps.lon), parseFloat(gps.gps.lat)])) ) } } }; xhr.open("GET", file, true); xhr.send(); } ``` Эта функция вызывается процедурой извлечения данных для обработки JSON и преобразования его в формат, который можно считать координатами долготы и широты в формате GeoJSON. После обработки данные устанавливаются как часть объекта GeoJSON `Feature`. Карта будет инициализирована, и маленькие круги появятся вдоль пути, который отображают ваши данные: 1. Загрузите HTML-страницу в вашем браузере. Она загрузит карту, затем загрузит все GPS-данные из хранилища и отобразит их на карте.  > 💁 Вы можете найти этот код в папке [code](../../../../../3-transport/lessons/3-visualize-location-data/code). --- ## 🚀 Задание Отображать статические данные на карте в виде маркеров - это здорово. Сможете ли вы улучшить это веб-приложение, добавив анимацию, чтобы показать путь маркеров с течением времени, используя файлы JSON с временными метками? Вот [несколько примеров](https://azuremapscodesamples.azurewebsites.net/) использования анимации на картах. ## Викторина после лекции [Викторина после лекции](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/26) ## Обзор и самостоятельное изучение Azure Maps особенно полезен для работы с IoT-устройствами. * Изучите некоторые варианты использования в [документации Azure Maps на сайте Microsoft](https://docs.microsoft.com/azure/azure-maps/tutorial-iot-hub-maps?WT.mc_id=academic-17441-jabenn). * Углубите свои знания о создании карт и путевых точек с помощью [самостоятельного учебного модуля "Создайте свое первое приложение для поиска маршрутов с Azure Maps" на Microsoft Learn](https://docs.microsoft.com/learn/modules/create-your-first-app-with-azure-maps/?WT.mc_id=academic-17441-jabenn). ## Задание [Разверните ваше приложение](assignment.md) --- **Отказ от ответственности**: Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.