History

co-op-translator[bot] 3a1a853e91 🌐 Update translations via Co-op Translator (#547 ) Co-authored-by: leestott <leestott@users.noreply.github.com>		4 weeks ago
..
README.md	🌐 Update translations via Co-op Translator (#547 )	4 weeks ago
assignment.md	🌐 Update translations via Co-op Translator (#547 )	4 weeks ago

README.md

Visualisere stedsdata

Sketchnote av Nitya Narasimhan. Klikk på bildet for en større versjon.

Denne videoen gir en oversikt over Azure Maps med IoT, en tjeneste som vil bli dekket i denne leksjonen.

🎥 Klikk på bildet over for å se videoen

Quiz før leksjonen

Introduksjon

I forrige leksjon lærte du hvordan du kan hente GPS-data fra sensorene dine og lagre dem i skyen i en lagringscontainer ved hjelp av serverløs kode. Nå skal du oppdage hvordan du kan visualisere disse punktene på et Azure-kart. Du vil lære hvordan du oppretter et kart på en nettside, lære om GeoJSON-dataformatet og hvordan du bruker det til å plotte alle de innsamlede GPS-punktene på kartet ditt.

I denne leksjonen dekker vi:

💁 Denne leksjonen vil involvere en liten mengde HTML og JavaScript. Hvis du ønsker å lære mer om webutvikling med HTML og JavaScript, sjekk ut Webutvikling for nybegynnere.

Hva er datavisualisering

Datavisualisering, som navnet antyder, handler om å visualisere data på måter som gjør det enklere for mennesker å forstå. Det er vanligvis assosiert med diagrammer og grafer, men det er enhver måte å visuelt representere data på for å hjelpe mennesker med å ikke bare forstå dataene bedre, men også ta beslutninger.

La oss ta et enkelt eksempel - i gårdsprosjektet samlet du inn data om jordfuktighet. En tabell med jordfuktighetsdata samlet inn hver time for 1. juni 2021 kan se slik ut:

Dato	Måling
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 vanskelig å forstå disse dataene. Det er en vegg av tall uten noen mening. Som et første steg for å visualisere disse dataene, kan de plottes på et linjediagram:

Dette kan forbedres ytterligere ved å legge til en linje som indikerer når det automatiske vanningssystemet ble slått på ved en jordfuktighetsmåling på 450:

Dette diagrammet viser raskt ikke bare hva jordfuktighetsnivåene var, men også punktene der vanningssystemet ble slått på.

Diagrammer er ikke det eneste verktøyet for å visualisere data. IoT-enheter som sporer værforhold kan ha web- eller mobilapper som visualiserer værforhold ved hjelp av symboler, som et sky-symbol for overskyede dager, en regnsky for regnværsdager, og så videre. Det finnes et stort antall måter å visualisere data på, noen seriøse, andre morsomme.

✅ Tenk på måter du har sett data visualisert. Hvilke metoder har vært de tydeligste og gjort det enklest å ta beslutninger?

De beste visualiseringene lar mennesker ta beslutninger raskt. For eksempel, å ha en vegg av målere som viser alle slags avlesninger fra industrielt utstyr er vanskelig å prosessere, men et blinkende rødt lys når noe går galt lar en person ta en beslutning. Noen ganger er den beste visualiseringen et blinkende lys!

Når du arbeider med GPS-data, kan den tydeligste visualiseringen være å plotte dataene på et kart. Et kart som viser leveringsbiler, for eksempel, kan hjelpe arbeidere på et behandlingsanlegg med å se når biler vil ankomme. Hvis dette kartet viser mer enn bare bilder av biler på deres nåværende lokasjoner, men også gir en idé om innholdet i en bil, kan arbeiderne på anlegget planlegge deretter - hvis de ser en kjølebil i nærheten, vet de at de må forberede plass i et kjølerom.

Karttjenester

Å jobbe med kart er en interessant øvelse, og det finnes mange alternativer å velge mellom, som Bing Maps, Leaflet, Open Street Maps og Google Maps. I denne leksjonen vil du lære om Azure Maps og hvordan de kan vise GPS-dataene dine.

Azure Maps er "en samling av geospatiale tjenester og SDK-er som bruker oppdatert kartdata for å gi geografisk kontekst til web- og mobilapplikasjoner." Utviklere får verktøy for å lage vakre, interaktive kart som kan gjøre ting som å gi anbefalte trafikkruter, gi informasjon om trafikkhendelser, innendørs navigasjon, søkefunksjoner, høydeinformasjon, værdata og mer.

✅ Eksperimenter med noen kartkodeeksempler

Du kan vise kartene som et blankt lerret, fliser, satellittbilder, satellittbilder med veier overlagt, ulike typer gråtonede kart, kart med skygge for å vise høyde, nattvisningskart og et høy-kontrast-kart. Du kan få sanntidsoppdateringer på kartene dine ved å integrere dem med Azure Event Grid. Du kan kontrollere oppførselen og utseendet til kartene dine ved å aktivere ulike kontroller som lar kartet reagere på hendelser som klyping, dra og klikk. For å kontrollere utseendet til kartet ditt, kan du legge til lag som inkluderer bobler, linjer, polygoner, varmekart og mer. Hvilken stil av kart du implementerer avhenger av ditt valg av SDK.

Du kan få tilgang til Azure Maps API-er ved å bruke REST API, Web SDK, eller, hvis du bygger en mobilapp, Android SDK.

I denne leksjonen vil du bruke web-SDK for å tegne et kart og vise GPS-lokasjonens bane fra sensoren din.

Opprett en Azure Maps-ressurs

Ditt første steg er å opprette en Azure Maps-konto.

Oppgave - opprett en Azure Maps-ressurs

Kjør følgende kommando fra Terminal eller Kommandolinje for å opprette en Azure Maps-ressurs i ressursgruppen gps-sensor:
```
az maps account create --name gps-sensor \
                       --resource-group gps-sensor \
                       --accept-tos \
                       --sku S1
```
Dette vil opprette en Azure Maps-ressurs kalt gps-sensor. Nivået som brukes er S1, som er et betalt nivå som inkluderer en rekke funksjoner, men med en sjenerøs mengde gratis kall.

💁 For å se kostnaden ved å bruke Azure Maps, sjekk ut prissiden for Azure Maps.

Du vil trenge en API-nøkkel for kartressursen. Bruk følgende kommando for å hente denne nøkkelen:

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

Ta en kopi av verdien PrimaryKey.

Vis et kart på en nettside

Nå kan du ta neste steg, som er å vise kartet ditt på en nettside. Vi vil bruke kun én html-fil for din lille webapp; husk at i et produksjons- eller teammiljø vil webappen din mest sannsynlig ha flere bevegelige deler!

Oppgave - vis et kart på en nettside

Opprett en fil kalt index.html i en mappe et sted på din lokale datamaskin. Legg til HTML-markup for å holde et kart:
```
<html>
<head>
    <style>
        #myMap {
            width:100%;
            height:100%;
        }
    </style>
</head>

<body onload="init()">
    <div id="myMap"></div>
</body>
</html>
```
Kartet vil lastes inn i div-en myMap. Noen få stiler lar det dekke bredden og høyden på siden.

🎓 En div er en seksjon av en nettside som kan navngis og styles.
Under den åpne <head>-taggen, legg til et eksternt stilark for å kontrollere kartvisningen, og et eksternt skript fra Web SDK for å håndtere oppførselen:
```
<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 stilarket inneholder innstillingene for hvordan kartet ser ut, og skriptfilen inneholder kode for å laste inn kartet. Å legge til denne koden er likt som å inkludere C++-headerfiler eller importere Python-moduler.

Under det skriptet, legg til en skriptblokk for å starte kartet.

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

Erstatt <subscription_key> med API-nøkkelen for din Azure Maps-konto.

Hvis du åpner index.html-siden din i en nettleser, bør du se et kart lastet inn, fokusert på Seattle-området.

✅ Eksperimenter med zoom- og senterparametrene for å endre kartvisningen. Du kan legge til ulike koordinater som tilsvarer dataens breddegrad og lengdegrad for å re-sentrere kartet.

💁 En bedre måte å jobbe med webapper lokalt på er å installere http-server. Du vil trenge node.js og npm installert før du bruker dette verktøyet. Når disse verktøyene er installert, kan du navigere til plasseringen av index.html-filen din og skrive http-server. Webappen vil åpne seg på en lokal webserver http://127.0.0.1:8080/.

GeoJSON-formatet

Nå som du har webappen din på plass med kartet vist, må du hente GPS-data fra lagringskontoen din og vise det i et lag med markører oppå kartet. Før vi gjør det, la oss se på GeoJSON-formatet som kreves av Azure Maps.

GeoJSON er en åpen standard JSON-spesifikasjon med spesiell formatering designet for å håndtere geografisk-spesifikke data. Du kan lære om det ved å teste eksempeldata ved hjelp av geojson.io, som også er et nyttig verktøy for å feilsøke GeoJSON-filer.

Eksempel på GeoJSON-data ser slik ut:

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

Av spesiell interesse er måten dataene er nestet som en Feature innenfor en FeatureCollection. Innenfor det objektet finnes geometry med coordinates som indikerer breddegrad og lengdegrad.

✅ Når du bygger GeoJSON-en din, vær oppmerksom på rekkefølgen av latitude og longitude i objektet, ellers vil punktene dine ikke vises der de skal! GeoJSON forventer data i rekkefølgen lon,lat for punkter, ikke lat,lon.

Geometry kan ha ulike typer, som et enkelt punkt eller en polygon. I dette eksemplet er det et punkt med to spesifiserte koordinater, lengdegrad og breddegrad. ✅ Azure Maps støtter standard GeoJSON pluss noen utvidede funksjoner, inkludert muligheten til å tegne sirkler og andre geometriske figurer.

Plot GPS-data på et kart ved hjelp av GeoJSON

Nå er du klar til å bruke data fra lagringen du opprettet i forrige leksjon. Som en påminnelse er dataene lagret som en rekke filer i blob-lagring, så du må hente filene og analysere dem slik at Azure Maps kan bruke dataene.

Oppgave - konfigurer lagring for tilgang fra en nettside

Hvis du prøver å hente data fra lagringen din, kan det hende du blir overrasket over å se feil i nettleserens konsoll. Dette skyldes at du må sette tillatelser for CORS på denne lagringen for å tillate eksterne webapplikasjoner å lese dataene.

🎓 CORS står for "Cross-Origin Resource Sharing" og må vanligvis settes eksplisitt i Azure av sikkerhetsgrunner. Det forhindrer uventede nettsteder fra å få tilgang til dataene dine.

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

Denne kommandoen tillater at ethvert nettsted (jokertegnet * betyr hvilket som helst) kan gjøre en GET-forespørsel, altså hente data, fra lagringskontoen din. --services b betyr at denne innstillingen kun gjelder for blobs.

Oppgave - last inn GPS-data fra lagring

Erstatt hele innholdet i init-funksjonen 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);
    })
})
```
Erstatt <storage_name> med navnet på lagringskontoen din. Erstatt <subscription_key> med API-nøkkelen for din Azure Maps-konto.

Det skjer flere ting her. Først henter koden GPS-dataene dine fra blob-beholderen ved hjelp av en URL-endepunkt som bygges ved hjelp av lagringskontonavnet ditt. Denne URL-en henter fra gps-data, som indikerer at ressursen er en beholder (restype=container), og lister informasjon om alle blobene. Denne listen returnerer ikke selve blobene, men gir en URL for hver blob som kan brukes til å laste inn blob-dataene.

💁 Du kan lime inn denne URL-en i nettleseren din for å se detaljer om alle blobene i beholderen din. Hver post vil ha en Url-egenskap som du også kan laste inn i nettleseren for å se innholdet i bloben.

Deretter laster koden inn hver blob ved å kalle en loadJSON-funksjon, som vil bli opprettet neste. Den oppretter deretter kartkontrollen og legger til kode i ready-hendelsen. Denne hendelsen kalles når kartet vises på nettsiden.

Ready-hendelsen oppretter en Azure Maps-datakilde - en beholder som inneholder GeoJSON-data som vil bli fylt inn senere. Denne datakilden brukes deretter til å opprette et boblelag - altså et sett med sirkler på kartet sentrert over hvert punkt i GeoJSON.

Legg til loadJSON-funksjonen i skriptblokken din, under init-funksjonen:

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 funksjonen kalles av hente-rutinen for å analysere JSON-dataene og konvertere dem til å leses som lengde- og breddegrader i GeoJSON-format. Når de er analysert, settes dataene som en del av en GeoJSON Feature. Kartet vil bli initialisert, og små bobler vil dukke opp langs stien dataene dine plotter:

Last inn HTML-siden i nettleseren din. Den vil laste inn kartet, deretter laste inn all GPS-data fra lagringen og plotte det på kartet.

💁 Du finner denne koden i code-mappen.

🚀 Utfordring

Det er fint å kunne vise statiske data på et kart som markører. Kan du forbedre denne webapplikasjonen til å legge til animasjon og vise stien til markørene over tid, ved hjelp av de tidsstemplede JSON-filene? Her er noen eksempler på bruk av animasjon i kart.

Quiz etter leksjonen

Gjennomgang og selvstudium

Azure Maps er spesielt nyttig for arbeid med IoT-enheter.

Undersøk noen av bruksområdene i Azure Maps-dokumentasjonen på Microsoft Docs.
Fordyp deg i kartlegging og veipunkter med opprett din første ruteplanleggingsapp med Azure Maps selvstyrt læringsmodul på Microsoft Learn.

Oppgave

Distribuer appen din

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.