A volte è necessario visualizzare grandi quantità di dati su una mappa interattiva mantenendola utilizzabile e reattiva. Le mappe online interattive sono implementate in HTML e l'aggiunta di molti elementi visivi alla visualizzazione della mappa generalmente riduce le prestazioni e l'usabilità. Una possibile alternativa è disegnare tutti gli elementi offline e visualizzarli sulla mappa come un livello trasparente utilizzando le tessere. Ogni tessera quadrata si sovrappone perfettamente alle tessere della mappa e il controllo interattivo della mappa gestisce molti meno elementi visivi.
Ho affrontato questo problema alcuni anni fa scrivendo un generatore di tessere di mappe personalizzate utilizzando Python e dati dal file Set di dati sull'energia del veicolo. Questo progetto ha illustrato come visualizzare enormi quantità di informazioni su una mappa online interattiva utilizzando layer di riquadri personalizzati sulla mappa. Il processo prevede l'utilizzo di un'applicazione web che genera, memorizza nella cache e serve le tessere.
Come sai, Python non è veloce, quindi si verifica un significativo calo delle prestazioni mentre l'applicazione web genera ogni riquadro. Quando un riquadro viene memorizzato nella cache, il processo di pubblicazione è rapido e non si nota durante l'interazione con la mappa.
Tuttavia, non ero soddisfatto delle prestazioni, quindi volevo risolvere nuovamente il problema migliorando notevolmente la velocità di esecuzione del codice. All'inizio ho pensato di convertire la base di codice in Citonema poi la mia attenzione è stata spostata su un altro candidato.
Il linguaggio di programmazione Rust è stato nel mio radar già da un po' di tempo. Con un background in C, C++ e C#, sono rimasto incuriosito dalla promessa del linguaggio di sicurezza della memoria e prestazioni simili a C. Alla fine ho deciso di provarci e questo problema mi è sembrato un perfetto punto di partenza per imparare ed esercitare la lingua.
Dopo aver esaminato molti video di YouTube e diversi materiali scritti, ho iniziato a utilizzare Rust per risolvere questo problema. Avevo tre domande principali: quanto è difficile creare un'applicazione Web, accedere SQLite dati e creare a livello di codice un'immagine PNG trasparente? Fortunatamente, le risposte a queste domande sono state più semplici del previsto.
Razzo
Per rispondere alla domanda sull'applicazione web, mi sono rivolto a Razzo. IL Iniziare pagina dalla documentazione online di Rocket mostra quanto sia facile configurare un'applicazione web di base. Avremo sicuramente bisogno di maggiore complessità per costruire il nostro server di tessere, ma il boilerplate sembra minimo e semplice. E, come si è scoperto, Rocket è molto facile da usare e adattare. Per me è un custode.
sqlx
Dopo alcuni minuti online, mi sono subito reso conto che la risposta più popolare all'accesso ai database SQLite era tramite il file sqlx pacchetto. Presenta un paradigma diverso da quello che usavo in Python ma molto più vicino a quello che usavo nella mia vita precedente quando sviluppavo in C#. Invece di strutture dati generiche o Panda DataFramesqui è necessario utilizzare strutture di dati fortemente tipizzate. Anche se è un po’ più laborioso lavorarci, porteranno un ulteriore livello di sanità mentale nella tua vita.
Figura 1 di seguito viene mostrato il primo esempio di codice completo che ho utilizzato per recuperare i dati dalla tabella dell'intervallo di livelli.
PNG
Creazione, disegno e salvataggio di file PNG utilizzando il file Immagine la cassa è facile. Il codice per creare una tessera trasparente è abbastanza semplice:
Ho utilizzato anche il colorgrad pacchetto per gestire il gradiente di colore per le tessere.
Prima di discutere il codice in dettaglio, esaminiamo il principio alla base del disegno dei riquadri della densità del traffico.
I riquadri della mappa sono generalmente costituiti da bitmap quadrate di 256×256. Possiamo affrontare ciascuna tessera combinandola X E sì coordinate, un livello di “zoom” o a quadkey codice. Ad ogni livello di zoom corrisponde un mosaico quadrato di tessere di diverse dimensioni. L'intera Terra è raffigurata su un'unica tessera al livello più alto. Ingrandendo, la tessera originale viene divisa in quattro tessere. Il seguente Figure 2 E 3 illustrare il processo di ingrandimento.
Se continuiamo a ingrandire e dopo otto iterazioni, ogni tessera risultante corrisponde a un pixel sulla prima tessera. Questa osservazione è l'intuizione che ci consente di calcolare e visualizzare le informazioni sulla densità del traffico sulle tessere.
Come descritto nel articolo precedentele informazioni sulle tessere vengono preparate e archiviate in un database. Fare riferimento a tale articolo per istruzioni su come generare il database di densità dal file Set di dati sull'energia del veicolo.
Ora possiamo parlare del codice del server Rust per generare, memorizzare nella cache e servire i riquadri. La presente soluzione segue da vicino la progettazione del precedente server di tessere. Figura 5 di seguito viene mostrato il punto di ingresso principale che decide se fornire una tessera dipinta o quella trasparente predefinita dopo l'analisi e l'accettazione dei parametri di query.
Come puoi vedere, il server risponde solo a livelli di zoom che vanno da uno a diciotto. Questa limitazione è stata inserita nel processo di generazione dei dati per il database della densità.
L'applicazione web disegna ciascuna tessera utilizzando la funzione elencata in Figura 6 sotto.
Come puoi vedere dall'elenco sopra, il processo di verniciatura delle piastrelle prevede tre passaggi. Innanzitutto, alla riga 12, raccogliamo le informazioni sulla densità per pixel del riquadro. Successivamente, recuperiamo l'intervallo di livelli del riquadro, ovvero i livelli di densità minimo e massimo per il livello di “zoom” del riquadro. Infine, alla riga 14, dipingiamo la bitmap della tessera. La funzione termina salvando la bitmap del riquadro nella cache dei file.
Dopo aver configurato correttamente il percorso del file del database, avvia il server delle tessere aprendo una finestra di terminale, passando alla directory del progetto Rust ed eseguendo il seguente comando:
cargo run --release
Successivamente è possibile aprire il client della mappa e configurare l'URI del layer delle tessere di densità. Figura 8 di seguito è mostrata la cella del codice di Jupyter Notebook per caricare la mappa interattiva:
E questo è tutto! Figura 9 di seguito viene visualizzato il risultato.
La mia prima incursione in Rust non è stata così difficile come mi aspettavo. Ho iniziato immergendomi nella letteratura disponibile e nei video di YouTube prima di provarci. Successivamente, mi sono assicurato che stavo aiutando con un ottimo IDE di JetBrains: RustRover. Sebbene sia ancora in modalità anteprima, ho trovato questo IDE utile e istruttivo quando utilizzo Rust. Tuttavia, starai benissimo anche se preferisci Codice di Visual Studio. Assicurati solo di avere i plugin autorizzati.
ero solito Grammaticale per rivedere la scrittura e accettò molti dei suoi suggerimenti di riscrittura.
L'intelligenza artificiale di JetBrains Assistant ha scritto parte del codice e l'ho usato anche per imparare Rust. È diventato un punto fermo del mio lavoro quotidiano sia con Rust che con Python.
L'Extended Vehicle Energy Dataset è concesso in licenza sotto Apache 2.0, come il suo creatore, the Set di dati sull'energia del veicolo.
Set di dati sull'energia del veicolo (GitHub)
Fonte: towardsdatascience.com