(a) Maximivärdet av bussfarten. (b) Medianen av bussfarten
Figur 5.5: Trafikdata runt Linköpings Centralstation. Färgskalans gränser är 0 till 40 km/h.
Trafiklabs realtidsdata ger bussar som vektorer med en fart och riktning. Utifrån bussar- nas position användes vektorernas två komponenter för att skapa två bilder, där ena är fart i väst-öst-led, och den andra är fart i norr-syd-led.
Bussar som avbildas i samma ruta i bilden används för att skapa fyra de ovan nämnda datatyperna i just den rutan. Totalt åtta lager som definierar fyra separata bilder med dessa data skapas och sparas samtidig.
Två lager tillhörande samma data (väst-öst och norr-syd) sparas i samma GeoTIFF-fil i två olika band. Om man inte vill spara väst-öst och norr-syd fart separat, finns även möjlighet att spara bilder med ett band som endast innehåller beloppet av farten som en skalär. Att göra detta halverar den sparade bildens storlek. Dessa sparade filer kan sedan läsas av med en Leafletutökning för visualisering på Leafletkartan.
Följande stycke beskriver ett exempel av två bilder över Linköping, där ena hade ett band och den andra hade två band. Bilderna hade en upplösning på 1/3 pixlar per meter vilket resulterade i bilder på 3585x4238 pixlar, motsvarande en yta 12842x10864 kvadratmeter stor. Bilden med ett band var runt 59 MB, och bilden med två band var runt 118 MB stor. Med ett datakomprimeringsprogram komprimerades dessa till 0.6 respektive 1.4 MB stora filer.
5.4.2
Databaserna
Flera databaser med historiska realtidstrafikdata från Trafiklab skapades. En innehöll da- ta samplade var 30:e sekund över 24 timmar där trafikinformationen som samplades var TripUpdates, ServiceAlerts och VehiclePositions. En annan innehöll data över en hel vecka samplade var 30:e sekund.
Ett par ytterligare databaser skapades bland annat en innehållande data samplade varje sekund under ett dygn, data som lagrades var GPS-koordinater, fart, riktning, tid och ID på busstur.
5.5
Klientmodulen
Klienten är en webbsida byggd i JavaScript med JavaScriptbiblioteket React. Den har diverse kontroller och en karta, se figur 5.6.
5.5. Klientmodulen
Figur 5.6: Bild på slutprodukten. Vänstra sidan av kartan visar en högupplöst bild, högra sidan visar en lågupplöst bild. Färgskalans gränser är 0 till 40 km/h.
5.5.1
Visualisering av trafikflöde
Mapbox användes på front-end en stor del av tiden, men verktyget bytes sedan ut till Leaflet för att reflektera de ändringar som gjordes på back-end. Två stycken utökande bibliotek till Leaflet användes för visualiseringen av data, dessa är Leaflet Heatmap (se 3.2.4), och Lea- flet.CanvasLayer.Field (se 3.2.3).
Leaflet Heatmap användes för genereringen av ett interaktivt färgdiagram som visua- liseras på kartan, se figur 5.7. Detta färgdiagram består av många individuella sampel av realtidstrafikdata. En punkt i diagrammet representerar en buss och dess färg representerar dess fart. Beroende på hur inzoomad kartan är visas närliggande punkter som en stor punkt med en långsammare fart än de enskilda punkterna. Leaflet Heatmap användes i början av projektet och byttes sedan ut mot Leaflet.CanvasLayer.Field.
Figur 5.7: Bilden visar bussfart under en dag i Linköpings centrum. Röda enskilda punkter indikerar låg fart. Röda sammanslagna punkter indikerar att flera sampel av bussfart ligger i närheten. Blå punkter visar där en buss har stannat.
5.5. Klientmodulen
Leafletutökningen Leaflet.CanvasLayer.Field användes för att ge möjligheten att visuali- sera trafikdata i form av en bild som placeras på Leafletkartan. Med de genererade bilderna visas riktningen och farten och därmed farten av flödet i Leafletkartan. Animerade partiklar kan också visas och följer flödet i bilden. Styrkan av farten visas i rutor på vägarna med en färgskala. Färgskalan och dess gränser visas i gränssnittet med en bild för att underlätta ana- lys. Det går även att klicka på bildernas pixlar, detta visar värdet (farten) på just den pixel i ett poppuppfönster, i figur 5.8 visas ett sådant fönster.
Figur 5.8: Bilden visar poppuppfönsteret som visas när en pixel klickas.
5.5.2
Kontrollerna
Klienten har ett flertal kontroller som tillåter bland annat generering av databilder, och filtre- ring av data. Nedan följer figurer och beskrivningar av dessa kontroller.
(a) Blå rektangel för bildgränser och döljknapp för den. Cirkelknappen öppnar högermenyn. Kontrol- ler till höger visar/döljer bildlager och ändrar kart- bilderna.
(b) Servermeddelande, skalär/vektor, datatyp och pixlar per meter.
Figur 5.9: a) visar huvudkontrollerna för applikationen. b) visar kontroller i den högra me- nyn.
I figur 5.9a visas huvudkontrollerna för klienten. Bland dessa är en blå dragbar och expan- derbar ruta som kan flyttas på kartan. Den yta som täcks av denna ruta definierar gränserna
5.5. Klientmodulen
för bilderna som skapas. Denna ruta kan döljas vid behov. Det finns även en rund knapp som öppnar den högra sidomenyn som innehåller kontroller för bland annat bildgenerering.
Till höger i figur 5.9a finns kontroller som bland annat reglerar vad som visas på kartan, till exempel värmekarta och vektorkarta. Varje bild som hämtas in i klienten läggs i ett separat Leafletlager, i en kryssruta kan varje lager separat stängas av och på vid behov. Högst upp till höger i figuren finns möjligheten att välja vilken karta som ska visas, exempelvis finns en ljus och en mörk karta. Där kan även visning av busshållplatser kontrolleras om de hämtats från servern.
I figur 5.9b visas en några av kontrollerna i den högra sidomenyn. Högst upp finns en ruta som visar servermeddelanden, till exempel när en bild blivit färdiggenererad. Sedan finns kontroller för generering, hämtning och borttagande av bilder.
Det går att välja de databilder som hämtas och läggs till som lager på kartan. Filnamnet för en genererad bild kan väljas, detta tillåter gamla bilder att hämtas genom att använda samma namn vid hämtning. Upplösningen i form av pixlar per meter för de genererade bilderna kan även väljas.
(a) Fart och färgskala, bildnamn, skapa och hämta bilder, ta bort data och hämta busshållsplatser.
(b) Fart och färgskala, bildnamn, skapa och hämta bilder, ta bort data och hämta busshållsplatser.
Figur 5.10: Fortsättning på kontroller i den högra menyn.
I figurer 5.10a och 5.10b visas resten av den högra sidomenyn. Färgerna och gränserna för färgskalan som bilderna visas med kan ändras vid behov. Detta tillåter alla farter under eller över en viss gräns att färgas i en färg. Till exempel kan farter under 10 km/h färgas helrött och alla över 30 km/h visas som blått, detta visas i figur 5.11.