# Визуелизација података о локацији  > Скица коју је направила [Нитија Нарасимхан](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-а. Можете приступити Azure Maps API-јима користећи његов [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. Покрените следећу команду из вашег Терминала или Command Prompt-а да бисте креирали 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

``` Мапа ће се учитати у `myMap` `div`. Неколико стилова омогућава да заузме ширину и висину странице. > 🎓 `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 који се може користити за учитавање података из 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 податке из складишта и приказати их на мапи.  > 💁 Овај код можете пронаћи у [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 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). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.