# Визуализиране на данни за местоположение  > Скица от [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 означава "Споделяне на ресурси между различни източници" и обикновено трябва да бъде зададено изрично в 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, който може да се използва за зареждане на данните от 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](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) --- **Отказ от отговорност**: Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.