Visualizzare le previsioni del tempo con WebGL

Published May 12th, 2021

Il nostro team ha sviluppato nuovi componenti JavaScript per l'animazione di dati meteorologici come la temperatura, il flusso del vento o qualsiasi altra informazione scientifica. È possibile utilizzare l'endpoint dei dati meteorologici da noi fornito o elaborare i propri dati con flussi di lavoro preparati e integrare la funzionalità con il proprio sito web, ottenendo animazioni attraenti e facili da capire con 60 fotogrammi al secondo direttamente in un browser web, come parte delle proprie applicazioni di marca.

VIEW DEMO

Animazione delle particelle di vento nelle mappe GL JS

Data come i set di dati sul vento e sulle onde consentono la visualizzazione con particelle che mostrano chiaramente la direzione e la velocità in modo animato.

La nostra tecnologia di visualizzazione avanzata è in grado di catturare il movimento del vento o delle onde in tempo reale: si possono vedere le particelle cambiare dolcemente rotta quando il vento inizia a soffiare dalla direzione opposta.

È possibile ottenere una maggiore chiarezza impostando i colori in base all'intensità del vento o delle onde.

Le animazioni vengono eseguite in qualsiasi browser Web contemporaneo utilizzando WebGL.

Visualizzazione fluida di dati grigliati nel browser

La visualizzazione di enormi quantità di dati, persino di insiemi di dati che coprono l'intero pianeta, è possibile grazie alla tecnologia tiling. Data non viene mostrato in una sola volta, ma tagliato in parti più piccole che possono essere caricate quando sono necessarie per una determinata area o livello di zoom. I dettagli iniziano a comparire con l'ingrandimento.

La visualizzazione può essere utilizzata per visualizzare temperatura, umidità, nuvole, precipitazioni e molto altro ancora! I dati aggiuntivi possono essere caricati senza problemi. Tutte le animazioni di dati temporali a griglia possono essere eseguite in un browser con una timeline, dove è possibile fermarsi in qualsiasi momento per esaminare i dati meteo in un determinato momento.

La colorazione dei dati consente di comprendere meglio i fenomeni meteorologici. È possibile impostare facilmente la propria tavolozza di colori perché i veri valori di intensità sono codificati direttamente nelle tessere.

MapLibre GL JS open-source come alternativa a Mapbox

Tutte le animazioni vengono eseguite nei normali browser web utilizzando MapLibre GL JS (un fork open-source di Mapbox GL JS). È possibile manipolare la vista come si desidera: ingrandire e rimpicciolire, ruotare e inclinare la vista.

Le prestazioni elevate sono garantite dall'uso dell'accelerazione hardware, una tecnologia ampiamente utilizzata nel settore dei giochi. Il rendering dei dati viene effettuato utilizzando gli shader WebGL, che conferiscono ai dati un aspetto più realistico.

READ MORE ABOUT THE WEATHER PRODUCT

Come funziona?

L'elaborazione dei dati grezzi in tile ottimizzati per il web ci permette di caricare gradualmente solo l'area e il livello di dettaglio necessari in un determinato momento. Ciascun fotogramma dei dati meteorologici (ad esempio, previsioni a orari diversi) viene elaborato come una piramide di tile separata, che ci consente di caricare fotogrammi aggiuntivi nell'animazione esistente lato client non appena sono disponibili.

Le tessere elaborate contengono i valori meteorologici originali (ad esempio, temperatura, velocità del vento, copertura nuvolosa) e la colorazione finale viene eseguita lato client nel browser web (sfruttando la potenza di WebGL). Questo ci permette di interpolare i valori dei dati tra le cornici temporali disponibili per le previsioni, ottenendo così delle belle animazioni fluide.

Un altro grande vantaggio di questo approccio è che l'aspetto della visualizzazione è configurabile (senza dover rielaborare i dati originali): è possibile personalizzare le scale di colore, le soglie di taglio e così via, semplicemente riconfigurando il componente lato client della visualizzazione.

Le animazioni fluide si ottengono caricando gradualmente le tessere di dati che vengono caricate quando necessario per una particolare area o livello di zoom.

Ciò consente agli utenti di visualizzare grandi quantità di dati in tempi brevissimi, arrivando a mostrare in pochi secondi serie di dati che coprono l'intero pianeta.

Tutto funziona anche su mobile: le visualizzazioni sono ottimizzate per i dispositivi touch.

Visualizzazione per il vostro sito web meteo

MapTiler fornisce un pacchetto completo per lo sviluppo della propria applicazione di previsioni meteorologiche: mappe di base, strumenti di elaborazione dei dati (possibilità di elaborare dati meteorologici personalizzati in formato GRIB2 e NetCDF) e i componenti JavaScript sopra descritti per la visualizzazione. Se siete interessati a utilizzarlo sul vostro sito web, contattateci. 

CONTACT SALES

Weather visualizations were created as a common R&D project in cooperation with the National Center of Meteorology UAE. NCM UAE is the first adopters powering their weather forecast portal and displaying their own data.

Condividi
tempo
Condividi

Petr Sloup

CTO
Published on May 12th, 2021