30 KiB

Raw Permalink Blame History Unescape Escape

Визуелизација података о локацији

Скица коју је направила Нитија Нарасимхан. Кликните на слику за већу верзију.

Овај видео пружа преглед Azure Maps са IoT-ом, услуге која ће бити обрађена у овој лекцији.

🎥 Кликните на слику изнад да бисте погледали видео

Квиз пре предавања

Увод

У претходној лекцији научили сте како да добијете GPS податке са својих сензора и сачувате их у облаку у контејнеру за складиштење користећи серверлес код. Сада ћете открити како да визуелизујете те тачке на Azure мапи. Научићете како да креирате мапу на веб страници, упознате се са GeoJSON форматом података и како да га користите за приказивање свих прикупљених GPS тачака на вашој мапи.

У овој лекцији ћемо обрадити:

💁 Ова лекција ће укључивати малу количину HTML-а и JavaScript-а. Ако желите да сазнате више о веб развоју користећи HTML и JavaScript, погледајте Веб развој за почетнике.

Шта је визуелизација података

Визуелизација података, како и сам назив каже, односи се на визуелно представљање података на начин који људима олакшава разумевање. Обично се повезује са графиконима и дијаграмима, али укључује било који начин сликовитог представљања података који помаже људима не само да боље разумеју податке, већ и да доносе одлуке.

Узмимо једноставан пример - у пројекту са фармом бележили сте податке о влажности земљишта. Табела са подацима о влажности земљишта прикупљеним сваког сата за 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 и како могу приказати ваше GPS податке.

Azure Maps је "збирка геопросторних услуга и SDK-ова који користе свежу мапну базу података како би пружили географски контекст веб и мобилним апликацијама." Програмери добијају алате за креирање лепих, интерактивних мапа које могу радити ствари попут препоручивања саобраћајних рута, пружања информација о саобраћајним инцидентима, унутрашње навигације, могућности претраге, информација о надморској висини, временских услуга и још много тога.

✅ Испробајте неке примерке кода за мапе

Мапе можете приказати као празно платно, плочице, сателитске снимке, сателитске снимке са нацртаним путевима, разне врсте сивих мапа, мапе са сенкама које показују надморску висину, мапе за ноћни приказ и мапу са високим контрастом. Можете добити ажурирања у реалном времену на вашим мапама интеграцијом са Azure Event Grid. Можете контролисати понашање и изглед ваших мапа омогућавањем различитих контрола које омогућавају мапи да реагује на догађаје као што су штипање, превлачење и кликање. Да бисте контролисали изглед ваше мапе, можете додати слојеве који укључују мехуриће, линије, полигоне, топлотне мапе и још много тога. Који стил мапе ћете имплементирати зависи од вашег избора SDK-а.

Можете приступити Azure Maps API-јима користећи његов REST API, његов Web SDK, или, ако правите мобилну апликацију, његов Android SDK.

У овој лекцији ћете користити Web SDK за цртање мапе и приказивање путање GPS локација вашег сензора.

Креирање Azure Maps ресурса

Ваш први корак је креирање Azure Maps налога.

Задатак - креирање Azure Maps ресурса

Покрените следећу команду из вашег Терминала или Command Prompt-а да бисте креирали Azure Maps ресурс у вашој gps-sensor ресурсној групи:
```
az maps account create --name gps-sensor \
                       --resource-group gps-sensor \
                       --accept-tos \
                       --sku S1
```
Ово ће креирати Azure Maps ресурс под називом gps-sensor. Коришћени ниво је S1, што је плаћени ниво који укључује низ функција, али са великодушним бројем бесплатних позива.

💁 Да бисте видели цену коришћења Azure Maps-а, погледајте Azure Maps страницу са ценама.
Биће вам потребан API кључ за ресурс мапа. Користите следећу команду да бисте добили овај кључ:
```
az maps account keys list --name gps-sensor \
                          --resource-group gps-sensor \
                          --output table
```
Сачувајте вредност PrimaryKey.

Приказ мапе на веб страници

Сада можете прећи на следећи корак, а то је приказивање ваше мапе на веб страници. Користићемо само једну html датотеку за вашу малу веб апликацију; имајте на уму да ће у продукционом или тимском окружењу ваша веб апликација вероватно имати више делова.

Задатак - приказивање мапе на веб страници

Креирајте датотеку под називом index.html у неком фолдеру на вашем локалном рачунару. Додајте HTML ознаке за приказивање мапе:
```
<html>
<head>
    <style>
        #myMap {
            width:100%;
            height:100%;
        }
    </style>
</head>

<body onload="init()">
    <div id="myMap"></div>
</body>
</html>
```
Мапа ће се учитати у myMap div. Неколико стилова омогућава да заузме ширину и висину странице.

🎓 div је део веб странице који може бити именован и стилизован.
Испод отварајуће <head> ознаке, додајте екстерни стилски лист за контролу приказа мапе и екстерни скрипт из Web SDK-а за управљање њеним понашањем:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
```
Овај стилски лист садржи подешавања за изглед мапе, а скрипт датотека садржи код за учитавање мапе. Додавање овог кода је слично укључивању C++ хедер датотека или увозу Python модула.
Испод тог скрипта, додајте блок скрипта за покретање мапе.
```
<script type='text/javascript'>
    function init() {
        var map = new atlas.Map('myMap', {
            center: [-122.26473, 47.73444],
            zoom: 12,
            authOptions: {
                authType: "subscriptionKey",
                subscriptionKey: "<subscription_key>",

            }
        });
    }
</script>
```
Замените <subscription_key> са API кључем за ваш Azure Maps налог.

Ако отворите вашу index.html страницу у веб претраживачу, требало би да видите учитану мапу, фокусирану на подручје Сијетла.

✅ Испробајте параметре за зумирање и центрирање да бисте променили приказ мапе. Можете додати различите координате које одговарају географској ширини и дужини ваших података како бисте променили центар мапе.

💁 Бољи начин за рад са веб апликацијама локално је инсталирање http-server. Биће вам потребни node.js и npm пре коришћења овог алата. Када инсталирате ове алате, можете отићи до локације ваше index.html датотеке и укуцати http-server. Веб апликација ће се отворити на локалном веб серверу http://127.0.0.1:8080/.

GeoJSON формат

Сада када имате своју веб апликацију са приказаном мапом, потребно је да извучете GPS податке из вашег складишта и прикажете их у слоју маркера на врху мапе. Пре него што то урадимо, погледајмо GeoJSON формат који је потребан за Azure Maps.

GeoJSON је отворени JSON стандард са специјалним форматирањем дизајнираним за руковање географским подацима. Можете га проучити тестирањем узорака података користећи geojson.io, што је такође користан алат за отклањање грешака у GeoJSON датотекама.

Пример GeoJSON података изгледа овако:

{
  "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, као и неке унапређене функције, укључујући могућност цртања кругова и других геометријских облика.

Приказивање GPS података на мапи користећи GeoJSON

Сада сте спремни да користите податке из складишта које сте направили у претходном лекцији. Подсетимо, подаци су сачувани као више датотека у blob складишту, па ћете морати да преузмете те датотеке и парсирате их како би Azure Maps могао да их користи.

Задатак - конфигуришите складиште за приступ са веб странице

Ако направите позив ка вашем складишту да бисте преузели податке, можда ћете бити изненађени када видите грешке у конзоли вашег прегледача. То је зато што морате да подесите дозволе за CORS на овом складишту како би спољашње веб апликације могле да читају његове податке.

🎓 CORS означава "Cross-Origin Resource Sharing" и обично мора бити експлицитно подешен у Azure-у из безбедносних разлога. Он спречава неочекиване сајтове да приступе вашим подацима.

Покрените следећу команду да бисте омогућили CORS:
```
az storage cors add --methods GET \
                    --origins "*" \
                    --services b \
                    --account-name <storage_name> \
                    --account-key <key1>
```
Замените <storage_name> именом вашег складишног налога. Замените <key1> кључем налога за ваше складиште.

Ова команда дозвољава било којем веб сајту (симбол * означава било који) да направи GET захтев, односно да преузме податке из вашег складишног налога. --services b значи да се ово подешавање примењује само за blob-ове.

Задатак - учитајте GPS податке из складишта

Замените цео садржај функције init следећим кодом:
```
fetch("https://<storage_name>.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: "<subscription_key>",

        }
    });
    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);
    })
})
```
Замените <storage_name> именом вашег складишног налога. Замените <subscription_key> 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-у.

Додајте функцију loadJSON у ваш блок скрипте, испод функције init:

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. Мапа ће бити иницијализована и мали мехурићи ће се појавити око путање коју ваши подаци приказују:

Учитајте HTML страницу у вашем прегледачу. Она ће учитати мапу, затим учитати све GPS податке из складишта и приказати их на мапи.

💁 Овај код можете пронаћи у code фасцикли.

🚀 Изазов

Лепо је моћи приказати статичке податке на мапи као маркере. Можете ли унапредити ову веб апликацију тако да дода анимацију и прикаже путању маркера током времена, користећи JSON датотеке са временским ознакама? Ево неколико примера коришћења анимације унутар мапа.

Квиз након предавања

Преглед и самостално учење

Azure Maps је посебно користан за рад са IoT уређајима.

Истражите неке од употреба у документацији Azure Maps-а на Microsoft docs.
Продубите своје знање о прављењу мапа и тачкама пута уз модул за самостално учење о креирању ваше прве апликације за проналажење путање са Azure Maps-ом на Microsoft Learn.

Задатак

Деплојтујте вашу апликацију

Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.

30 KiB Raw Permalink Blame History Unescape Escape