# Візуалізація даних про місцезнаходження  > Скетчноут від [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, ознайомтеся з [Web development for beginners](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 Тепер ви готові використовувати дані зі сховища, яке ви створили в попередньому уроці. Нагадаємо, що вони зберігаються у вигляді файлів у blob-сховищі, тому вам потрібно буде отримати ці файли та розібрати їх, щоб 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` означає, що це налаштування застосовується лише для blob-об'єктів. ### Завдання - завантажити 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-дані з контейнера blob за допомогою URL-адреси, створеної на основі назви вашого облікового запису сховища. Ця URL-адреса отримує дані з `gps-data`, вказуючи, що тип ресурсу — контейнер (`restype=container`), і надає інформацію про всі blob-об'єкти. Цей список не повертає самі blob-об'єкти, але повертає URL для кожного blob-об'єкта, який можна використовувати для завантаження даних. > 💁 Ви можете вставити цю URL-адресу у ваш браузер, щоб побачити деталі всіх blob-об'єктів у вашому контейнері. Кожен елемент матиме властивість `Url`, яку також можна завантажити у браузері, щоб побачити вміст blob-об'єкта. Потім цей код завантажує кожен blob-об'єкт, викликаючи функцію `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-дані зі сховища та відобразить їх на карті.  > 💁 Ви можете знайти цей код у [папці з кодом](../../../../../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 Docs](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). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.