21 KiB

Raw Permalink Blame History

Visualiser lokationsdata

Sketchnote af Nitya Narasimhan. Klik på billedet for en større version.

Denne video giver en oversigt over Azure Maps med IoT, en tjeneste der vil blive dækket i denne lektion.

🎥 Klik på billedet ovenfor for at se videoen

Quiz før lektionen

Introduktion

I den sidste lektion lærte du, hvordan du får GPS-data fra dine sensorer og gemmer dem i skyen i en lagercontainer ved hjælp af serverløs kode. Nu vil du opdage, hvordan du visualiserer disse punkter på et Azure-kort. Du vil lære, hvordan du opretter et kort på en webside, lære om GeoJSON-dataformatet og hvordan du bruger det til at plotte alle de indsamlede GPS-punkter på dit kort.

I denne lektion dækker vi:

💁 Denne lektion vil involvere en lille smule HTML og JavaScript. Hvis du gerne vil lære mere om webudvikling med HTML og JavaScript, kan du tjekke Webudvikling for begyndere.

Hvad er datavisualisering

Datavisualisering handler, som navnet antyder, om at visualisere data på måder, der gør det lettere for mennesker at forstå. Det forbindes ofte med diagrammer og grafer, men det kan være enhver form for billedlig repræsentation af data, der hjælper mennesker med ikke kun at forstå data bedre, men også med at træffe beslutninger.

Lad os tage et simpelt eksempel - tilbage i landbrugsprojektet indsamlede du data om jordfugtighed. En tabel med jordfugtighedsdata indsamlet hver time den 1. juni 2021 kunne se sådan ud:

Dato	Aflæsning
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

Som menneske kan det være svært at forstå disse data. Det er en mur af tal uden nogen mening. Som et første skridt til at visualisere disse data kan de plottes på et linjediagram:

Dette kan yderligere forbedres ved at tilføje en linje, der indikerer, hvornår det automatiske vandingssystem blev tændt ved en jordfugtighedsaflæsning på 450:

Dette diagram viser meget hurtigt ikke kun, hvad jordfugtighedsniveauerne var, men også de punkter, hvor vandingssystemet blev tændt.

Diagrammer er ikke det eneste værktøj til at visualisere data. IoT-enheder, der sporer vejret, kan have webapps eller mobilapps, der visualiserer vejrforhold ved hjælp af symboler, såsom et sky-symbol for overskyede dage, en regnsky for regnfulde dage og så videre. Der er et enormt antal måder at visualisere data på, nogle seriøse, andre sjove.

✅ Tænk over måder, du har set data visualiseret. Hvilke metoder har været de mest klare og har gjort det muligt for dig at træffe beslutninger hurtigst?

De bedste visualiseringer gør det muligt for mennesker at træffe beslutninger hurtigt. For eksempel kan det være svært at bearbejde en væg af målere, der viser alle mulige aflæsninger fra industrimaskiner, men et blinkende rødt lys, når noget går galt, gør det muligt for en person at træffe en beslutning. Nogle gange er den bedste visualisering et blinkende lys!

Når man arbejder med GPS-data, kan den mest klare visualisering være at plotte dataene på et kort. Et kort, der viser leveringslastbiler, kan for eksempel hjælpe medarbejdere på et behandlingsanlæg med at se, hvornår lastbilerne ankommer. Hvis dette kort viser mere end blot billeder af lastbiler på deres nuværende placeringer, men også giver en idé om indholdet af en lastbil, kan medarbejderne på anlægget planlægge derefter - hvis de ser en kølelastbil tæt på, ved de, at de skal forberede plads i et køleskab.

Korttjenester

At arbejde med kort er en interessant øvelse, og der er mange at vælge imellem, såsom Bing Maps, Leaflet, Open Street Maps og Google Maps. I denne lektion vil du lære om Azure Maps og hvordan de kan vise dine GPS-data.

Azure Maps er "en samling af geospatiale tjenester og SDK'er, der bruger friske kortdata til at give geografisk kontekst til web- og mobilapplikationer." Udviklere får værktøjer til at skabe smukke, interaktive kort, der kan gøre ting som at give anbefalede trafikruter, give information om trafikulykker, indendørs navigation, søgefunktioner, højdeinformation, vejrtjenester og mere.

✅ Eksperimentér med nogle kodeeksempler til kort

Du kan vise kortene som et tomt lærred, fliser, satellitbilleder, satellitbilleder med veje overlejret, forskellige typer gråtonede kort, kort med skygget relief for at vise højde, natvisningskort og et kort med høj kontrast. Du kan få realtidsopdateringer på dine kort ved at integrere dem med Azure Event Grid. Du kan kontrollere kortets adfærd og udseende ved at aktivere forskellige kontroller, der gør det muligt for kortet at reagere på begivenheder som knib, træk og klik. For at kontrollere kortets udseende kan du tilføje lag, der inkluderer bobler, linjer, polygoner, varmekort og mere. Hvilken stil af kort du implementerer afhænger af dit valg af SDK.

Du kan få adgang til Azure Maps API'er ved at bruge dens REST API, dens Web SDK, eller, hvis du bygger en mobilapp, dens Android SDK.

I denne lektion vil du bruge web-SDK'et til at tegne et kort og vise din sensors GPS-lokationssti.

Opret en Azure Maps-ressource

Dit første skridt er at oprette en Azure Maps-konto.

Opgave - opret en Azure Maps-ressource

Kør følgende kommando fra din Terminal eller Kommandoprompt for at oprette en Azure Maps-ressource i din gps-sensor ressourcegruppe:
```
az maps account create --name gps-sensor \
                       --resource-group gps-sensor \
                       --accept-tos \
                       --sku S1
```
Dette vil oprette en Azure Maps-ressource kaldet gps-sensor. Den anvendte tier er S1, som er en betalt tier, der inkluderer en række funktioner, men med et generøst antal gratis opkald.

💁 For at se omkostningerne ved at bruge Azure Maps, tjek Azure Maps-prissiden.

Du skal bruge en API-nøgle til kortressourcen. Brug følgende kommando for at få denne nøgle:

az maps account keys list --name gps-sensor \
                          --resource-group gps-sensor \
                          --output table

Tag en kopi af værdien PrimaryKey.

Vis et kort på en webside

Nu kan du tage det næste skridt, som er at vise dit kort på en webside. Vi vil kun bruge én html-fil til din lille webapp; husk, at i et produktions- eller teammiljø vil din webapp sandsynligvis have flere bevægelige dele!

Opgave - vis et kort på en webside

Opret en fil kaldet index.html i en mappe et sted på din lokale computer. Tilføj HTML-markup for at holde et kort:
```
<html>
<head>
    <style>
        #myMap {
            width:100%;
            height:100%;
        }
    </style>
</head>

<body onload="init()">
    <div id="myMap"></div>
</body>
</html>
```
Kortet vil blive indlæst i myMap div. Et par stilarter gør det muligt for det at strække sig over hele sidens bredde og højde.

🎓 En div er en sektion af en webside, der kan navngives og styles.
Under den åbne <head>-tag, tilføj et eksternt stylesheet for at kontrollere kortets udseende og et eksternt script fra Web SDK'et for at styre dets adfærd:
```
<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>
```
Dette stylesheet indeholder indstillingerne for, hvordan kortet ser ud, og scriptfilen indeholder kode til at indlæse kortet. At tilføje denne kode svarer til at inkludere C++ header-filer eller importere Python-moduler.

Under det script, tilføj et scriptblok for at starte kortet.

<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>

Erstat <subscription_key> med API-nøglen til din Azure Maps-konto.

Hvis du åbner din index.html-side i en webbrowser, bør du se et kort indlæst og fokuseret på Seattle-området.

✅ Eksperimentér med zoom- og centerparametrene for at ændre dit korts visning. Du kan tilføje forskellige koordinater, der svarer til din datas bredde- og længdegrad, for at re-centrere kortet.

💁 En bedre måde at arbejde med webapps lokalt er at installere http-server. Du skal have node.js og npm installeret, før du bruger dette værktøj. Når disse værktøjer er installeret, kan du navigere til placeringen af din index.html-fil og skrive http-server. Webappen vil åbne på en lokal webserver http://127.0.0.1:8080/.

GeoJSON-formatet

Nu hvor du har din webapp på plads med kortet vist, skal du udtrække GPS-data fra din lagerkonto og vise dem i et lag af markører oven på kortet. Før vi gør det, lad os se på GeoJSON-formatet, som kræves af Azure Maps.

GeoJSON er en åben standard JSON-specifikation med speciel formatering designet til at håndtere geografisk-specifikke data. Du kan lære om det ved at teste eksempeldata ved hjælp af geojson.io, som også er et nyttigt værktøj til at fejlfinde GeoJSON-filer.

Eksempel på GeoJSON-data ser sådan ud:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.10237979888916,
          57.164918677004714
        ]
      }
    }
  ]
}

Af særlig interesse er måden, dataene er indlejret som en Feature inden for en FeatureCollection. Inden for dette objekt kan man finde geometry med coordinates, der angiver bredde- og længdegrad.

✅ Når du bygger din geoJSON, skal du være opmærksom på rækkefølgen af latitude og longitude i objektet, ellers vil dine punkter ikke vises, hvor de skal! GeoJSON forventer data i rækkefølgen lon,lat for punkter, ikke lat,lon.

Geometry kan have forskellige typer, såsom et enkelt punkt eller en polygon. I dette eksempel er det et punkt med to specificerede koordinater, længdegraden og breddegraden. ✅ Azure Maps understøtter standard GeoJSON plus nogle udvidede funktioner, herunder muligheden for at tegne cirkler og andre geometriske figurer.

Plot GPS-data på et kort ved hjælp af GeoJSON

Nu er du klar til at bruge data fra den lagring, du oprettede i den forrige lektion. Som en påmindelse er det gemt som en række filer i blob-lagring, så du skal hente filerne og analysere dem, så Azure Maps kan bruge dataene.

Opgave - konfigurer lagring til at blive tilgået fra en webside

Hvis du foretager et kald til din lagring for at hente dataene, kan du blive overrasket over at se fejl i din browsers konsol. Det skyldes, at du skal indstille tilladelser for CORS på denne lagring for at tillade eksterne webapps at læse dens data.

🎓 CORS står for "Cross-Origin Resource Sharing" og skal normalt eksplicit indstilles i Azure af sikkerhedsmæssige årsager. Det forhindrer uventede sider i at få adgang til dine data.

Kør følgende kommando for at aktivere CORS:
```
az storage cors add --methods GET \
                    --origins "*" \
                    --services b \
                    --account-name <storage_name> \
                    --account-key <key1>
```
Erstat <storage_name> med navnet på din lagringskonto. Erstat <key1> med kontonøglen for din lagringskonto.

Denne kommando tillader enhver hjemmeside (jokertegnet * betyder enhver) at foretage en GET-anmodning, det vil sige hente data, fra din lagringskonto. --services b betyder, at denne indstilling kun gælder for blobs.

Opgave - indlæs GPS-data fra lagring

Erstat hele indholdet af init-funktionen med følgende kode:
```
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);
    })
})
```
Erstat <storage_name> med navnet på din lagringskonto. Erstat <subscription_key> med API-nøglen for din Azure Maps-konto.

Der sker flere ting her. Først henter koden dine GPS-data fra din blob-container ved hjælp af et URL-endepunkt, der er bygget ved hjælp af navnet på din lagringskonto. Denne URL henter fra gps-data, hvilket angiver, at ressource-typen er en container (restype=container), og lister information om alle blobs. Denne liste returnerer ikke selve blobs, men returnerer en URL for hver blob, der kan bruges til at indlæse blob-data.

💁 Du kan indsætte denne URL i din browser for at se detaljer om alle blobs i din container. Hvert element vil have en Url-egenskab, som du også kan indlæse i din browser for at se indholdet af blobben.

Denne kode indlæser derefter hver blob og kalder en loadJSON-funktion, som vil blive oprettet næste gang. Den opretter derefter kortkontrollen og tilføjer kode til ready-hændelsen. Denne hændelse kaldes, når kortet vises på websiden.

Ready-hændelsen opretter en Azure Maps-datakilde - en container, der indeholder GeoJSON-data, som vil blive udfyldt senere. Denne datakilde bruges derefter til at oprette et boblelag - det vil sige et sæt cirkler på kortet centreret over hvert punkt i GeoJSON.

Tilføj loadJSON-funktionen til dit script-blok, under init-funktionen:

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();
}

Denne funktion kaldes af fetch-rutinen for at analysere JSON-dataene og konvertere dem til at blive læst som længde- og breddegrader som geoJSON. Når de er analyseret, sættes dataene som en del af en geoJSON Feature. Kortet vil blive initialiseret, og små bobler vil dukke op langs den rute, dine data afbilder:

Indlæs HTML-siden i din browser. Den vil indlæse kortet, derefter indlæse alle GPS-data fra lagringen og plotte dem på kortet.

💁 Du kan finde denne kode i code-mappen.

🚀 Udfordring

Det er rart at kunne vise statiske data på et kort som markører. Kan du forbedre denne webapp til at tilføje animation og vise ruten for markørerne over tid ved hjælp af de tidsstemplede JSON-filer? Her er nogle eksempler på brug af animation i kort.

Quiz efter lektionen

Gennemgang & Selvstudie

Azure Maps er særligt nyttigt til at arbejde med IoT-enheder.

Undersøg nogle af anvendelserne i Azure Maps-dokumentationen på Microsoft docs.
Uddyb din viden om kortlægning og waypoints med opret din første ruteplanlægningsapp med Azure Maps selvstudie på Microsoft Learn.

Opgave

Udrul din app

Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på at sikre nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.

21 KiB Raw Permalink Blame History