Reaaliaikaisen datan visualisointi web-pohjaisessa 3D-kaupunkimallissa
Konovalova, Irina (2025)
2025
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2025052817611
https://urn.fi/URN:NBN:fi:amk-2025052817611
Tiivistelmä
Insinöörityössä tutkittiin reaaliaikaisen datan visualisointia web-pohjaisessa 3D-kaupunkimallissa. Tavoitteena oli elävöittää kaupunkimalleja lisäämällä niihin liikenteen ja säätilan visualisoinnit. Tavoitteena oli myös tutustua reaaliaikaisen datan selainpohjaiseen visualisointiin. Työn tarkoituksena oli havainnollistaa, kuinka kaupunkimallit ja rajapinnoista tuleva datavirta voidaan yhdistää web-sovelluksessa hyödyntämällä WebGL-pohjaisia teknologioita. Työ toteutettiin Helsinki XR Centerillä osana City Data -projektia.
Työssä kuvattiin prosessi, jossa Mapbox-pohjakartalle lisättiin kaupunkimalleja ja luotiin liikenteen sekä säätilan visualisointikerrokset, jotka renderöitiin kartan päälle React-sovelluksessa.
Kaupunkimallit renderöitiin Mapbox-pohjakartan päälle Three.js-kirjaston avulla. Julkisen liikenteen visualisointikerrokset toteutettiin hyödyntämällä Deck.gl-kehystä, jonka avulla ajoneuvojen 3D-malleja visualisoitiin kartalle. Datan lähteenä käytettiin Digitransitin rajapintaa, josta ajoneuvojen reaaliaikaiset sijaintitiedot tilattiin MQTT-viesteinä WebSocketin välityksellä. Säätila visualisoitiin hyödyntämällä Mapbox-karttatyylejä ja Three.js-kerrosta, jotka muuttuivat ohjelmointirajapinnasta palautetun säätilatunnisteen perusteella.
Lopputuloksena saatiin toimivat visualisoinnit, joissa 3D-kaupunkimalli ja reaaliaikaiset tietovirrat yhdistettiin selainympäristössä. Työ osoitti, että 3D-visualisointien toteuttamiseen on saatavilla useita WebGL-pohjaisia kirjastoja, jotka integroituvat hyvin keskenään ja mahdollistavat monipuolisten visualisointien luomisen JavaScriptillä. Jatkokehityksen aiheina olisi visualisointien optimointi ottaen huomioon suuri määrä nopeasti päivittyvää dataa, sekä visualisointien viimeistely ja kehittäminen.
Työssä kuvattiin prosessi, jossa Mapbox-pohjakartalle lisättiin kaupunkimalleja ja luotiin liikenteen sekä säätilan visualisointikerrokset, jotka renderöitiin kartan päälle React-sovelluksessa.
Kaupunkimallit renderöitiin Mapbox-pohjakartan päälle Three.js-kirjaston avulla. Julkisen liikenteen visualisointikerrokset toteutettiin hyödyntämällä Deck.gl-kehystä, jonka avulla ajoneuvojen 3D-malleja visualisoitiin kartalle. Datan lähteenä käytettiin Digitransitin rajapintaa, josta ajoneuvojen reaaliaikaiset sijaintitiedot tilattiin MQTT-viesteinä WebSocketin välityksellä. Säätila visualisoitiin hyödyntämällä Mapbox-karttatyylejä ja Three.js-kerrosta, jotka muuttuivat ohjelmointirajapinnasta palautetun säätilatunnisteen perusteella.
Lopputuloksena saatiin toimivat visualisoinnit, joissa 3D-kaupunkimalli ja reaaliaikaiset tietovirrat yhdistettiin selainympäristössä. Työ osoitti, että 3D-visualisointien toteuttamiseen on saatavilla useita WebGL-pohjaisia kirjastoja, jotka integroituvat hyvin keskenään ja mahdollistavat monipuolisten visualisointien luomisen JavaScriptillä. Jatkokehityksen aiheina olisi visualisointien optimointi ottaen huomioon suuri määrä nopeasti päivittyvää dataa, sekä visualisointien viimeistely ja kehittäminen.