Questo documento fornisce un'architettura di riferimento e un esempio per creare visualizzazioni di dati delle mappe con dati sulla posizione in BigQuery di Google Cloud Platform e nell'API Datasets di Google Maps Platform, come l'analisi di dati comunali aperti, la creazione di una mappa di copertura delle telecomunicazioni o la visualizzazione di tracce dei movimenti della flotta di veicoli mobili.
Le visualizzazioni dei dati della mappa sono un potente strumento per coinvolgere gli utenti e scoprire informazioni spaziali nei dati sulla posizione. I dati sulla posizione sono dati che includono elementi punti, linee o poligoni. Ad esempio, le mappe meteorologiche aiutano i consumatori a comprendere e pianificare i viaggi e a prepararsi per i temporali; le mappe di business intelligence aiutano gli utenti a ricavare informazioni dall'analisi dei dati, mentre le mappe delle telecomunicazioni aiutano gli utenti a conoscere i dati dei loro fornitori di copertura e qualità in una determinata area coperta dal servizio.
Tuttavia, per gli sviluppatori di app è difficile realizzare visualizzazioni di dati delle mappe di grandi dimensioni che siano ad alte prestazioni e offrano un'esperienza utente ottimale. Devono essere caricati dati di grandi dimensioni sul lato client di memoria, il che causa i tempi di caricamento della prima mappa lenti. L'immagine deve essere ad alte prestazioni su tutti i dispositivi, inclusi i telefoni cellulari di fascia bassa, con vincoli di memoria e GPU. Infine, gli sviluppatori devono scegliere una libreria di rendering dei dati di grandi dimensioni, portabile, affidabile e performante con grandi volumi di dati.
Architettura di riferimento
Lo sviluppo di app con visualizzazioni di dati di grandi dimensioni richiede due componenti principali.
- Backend cliente - Tutti i dati dell'app di backend e come l'elaborazione e l'archiviazione.
- Client del cliente: l'interfaccia utente della tua app con un componente di visualizzazione della mappa.
Di seguito è riportato un diagramma di sistema di come questi due componenti interagiscono con l'utente dell'app, Google Cloud e Google Maps Platform, per creare un'app di visualizzazione dei dati di grandi dimensioni.
Note sul layout
Per ottenere una visualizzazione dei dati ad alte prestazioni utilizzando Google Cloud e Google Maps Platform, devi considerare una serie di considerazioni di progettazione.
- Dimensioni dei dati di origine e frequenza di aggiornamento.
- Se i dati di origine in formato geoJSON sono <5 MB o vengono aggiornati molto spesso, ad esempio una previsione radar meteo in tempo reale, valuta la possibilità di fornire i dati come oggetto geoJSON sul lato client della tua app ed eseguire il rendering con un livello deck.gl.
- Se i dati hanno dimensioni superiori a 5 MB e gli aggiornamenti non vengono eseguiti più di una volta all'ora, considera l'architettura dell'API Datasets in questo documento.
- I set di dati supportano file fino a 350 MB di dimensione.
- Se i dati superano i 350 MB, ti consigliamo di eliminare o semplificare i dati geometrici nel file di origine prima di passarli ai set di dati (consulta la sezione relativa alla riduzione dei dati di seguito).
- Schema e formato
- .
- Assicurati che i dati abbiano una proprietà ID univoca a livello globale per ogni elemento. Un ID univoco ti consente di selezionare e applicare uno stile a una caratteristica specifica o di unire i dati a una caratteristica da visualizzare, ad esempio per definire lo stile di una caratteristica selezionata nell'evento utente "clic".
- Formatta i dati come CSV o GeoJSON in base alle specifiche dell'API Datasets con nomi di colonna, tipi di dati e tipi di oggetti GeoJSON validi.
- Per creare facilmente set di dati da BigQuery, crea una colonna denominata
wkt
nell'esportazione CSV SQL. I set di dati supportano l'importazione della geometria da un file CSV in formato Testo ben noto (WKT) da una colonna denominatawkt
. - Verifica che la geometria e i tipi di dati siano validi. Ad esempio, GeoJSON deve trovarsi nel sistema di coordinate WGS84, nell'ordine di avvolgimento geometrico e così via.
- Usa uno strumento come geojson-validate per assicurarti che tutte le geometrie in un file di origine siano valide oppure ogr2ogr per trasformare un file di origine tra formati o sistemi di coordinate.
- Eliminazione dei dati
- .
- Riduci al minimo il numero di proprietà delle caratteristiche. Puoi unire proprietà aggiuntive a una funzionalità in fase di runtime in una chiave di identificatore univoco (esempio).
- Se possibile, utilizza tipi di dati interi per gli oggetti delle proprietà per ridurre al minimo lo spazio di archiviazione dei riquadri, in modo da garantire il caricamento dei riquadri tramite HTTPS in un'app client.
- semplificare e/o aggregare geometrie di caratteristiche molto complesse; valuta la possibilità di utilizzare funzioni di BigQuery come ST_Simplify su geometrie poligonali complesse per ridurre le dimensioni del file di origine e migliorare le prestazioni delle mappe.
- Riquadri
- .
- L'API Google Maps Datasets crea riquadri delle mappe dal file di dati di origine per utilizzarli con un SDK di Maps per web o mobile.
- I riquadri mappa sono un sistema di indicizzazione basato sullo zoom che offre modi più efficienti di caricare i dati in un'app visiva.
- I riquadri della mappa potrebbero mostrare elementi densi o complessi a livelli di zoom inferiori. Quando un utente riduce lo zoom su una provincia o un paese (ad esempio z5-z12) potrebbe avere un aspetto diverso rispetto a quando lo zoom viene spostato su una città o un quartiere (ad esempio z13-z18).
Esempio - Ferrovie a Londra
In questo esempio, applicheremo l'architettura di riferimento per creare un'applicazione web con Google Cloud e Google Maps che visualizzi tutte le ferrovie di Londra a partire dai dati di Open Street Map (OSM).
Prerequisiti
- Accesso alla sandbox di BigQuery e alla console Cloud
- Assicurati di avere configurato un progetto Google Cloud e un account di fatturazione.
Passaggio 1 - Esegui query sui dati in BigQuery
Vai a Set di dati pubblici di BigQuery. Il set di dati "bigquery-public-data" e la tabella geo_openstreetmap.planet_features
contiene i dati di tutto il mondo di Open Street Map (OSM), tra cui tutte le possibili caratteristiche. Scopri tutte le funzionalità disponibili per eseguire query nel Wiki di OSM, tra cui amenity
, road
e landuse
.
Usa Cloud Shell o la console Cloud di BigQuery(https://console.cloud.google.com) per eseguire query sulla tabella tramite SQL. Lo snip di codice riportato di seguito utilizza il comando bq query per interrogare tutte le linee ferroviarie filtrate solo per Londra utilizzando un riquadro di delimitazione e la funzione ST_Intersects().
Per eseguire questa query da Cloud Shell, esegui questo snip di codice, aggiornando l'ID progetto, il set di dati e il nome della tabella per il tuo ambiente.
bq query --use_legacy_sql=false \
--destination_table PROJECTID:DATASET.TABLENAME \
--replace \
'SELECT
osm_id,
feature_type,
(SELECT value
FROM unnest(all_tags)
WHERE KEY = "name") AS name,
(SELECT value
FROM unnest(all_tags)
WHERE KEY = "railway") AS railway,
geometry as wkt
FROM bigquery-public-data.geo_openstreetmap.planet_features
WHERE ("railway") IN (SELECT key FROM unnest(all_tags))
AND ST_Intersects(
geometry,
ST_MakePolygon(ST_MakeLine(
[ST_GeogPoint(-0.549370, 51.725346),
ST_GeogPoint(-0.549370, 51.2529407),
ST_GeogPoint(0.3110581, 51.25294),
ST_GeogPoint(0.3110581, 51.725346),
ST_GeogPoint(-0.549370, 51.725346)]
))
)'
La query restituisce:
- un identificatore univoco per ogni caratteristica
osm_id
feature_type
, ad esempio punti, linee, ecc.- Il
name
della funzionalità, ad esempioPaddington Station
- Il tipo di
railway
, ad esempio principale, turismo, militare ecc. - Il
wkt
dell'elemento: geometria di punto, linea o poligono in formato WKT. WKT è il formato dei dati standard che le colonne dell'area geografica di BigQuery restituiscono in una query.
Nota: per convalidare visivamente i risultati della query prima di creare un set di dati, puoi visualizzare rapidamente i dati in una dashboard di BigQuery utilizzando Looker Studio.
Per esportare la tabella in un file CSV in un bucket Google Cloud Storage, utilizza il comando bq estrapola in Cloud Shell:
bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv
Nota: puoi automatizzare ogni passaggio utilizzando Cloud Scheduler per aggiornare i dati regolarmente.
Passaggio 2 - Crea un set di dati dal file CSV
Poi crea un set di dati Google Maps Platform dall'output della query su Google Cloud Storage (GCS). Con l'API Datasets puoi creare un set di dati e poi caricare i dati nel set di dati da un file ospitato su GCS.
Per iniziare, abilita l'API Maps Datasets sul tuo progetto Google Cloud ed esamina la documentazione API. Esistono librerie client Python e Node.js per chiamare l'API Datasets dalla logica nel backend della tua app. Inoltre, è disponibile una GUI dei set di dati per creare manualmente i set di dati nella console Cloud.
Al termine del caricamento del set di dati, puoi visualizzarne l'anteprima nella GUI del set di dati.
Passaggio 4: associa il set di dati a un ID mappa
Una volta creato il set di dati, puoi creare un ID mappa con uno stile di mappa associato. Nell'editor Stile mappa, puoi associare un MapId e uno stile al set di dati. Qui puoi anche applicare gli stili delle mappe basati su cloud per personalizzare l'aspetto della mappa.
Passaggio 5 - Crea la visualizzazione della mappa dell'app client
Infine, puoi aggiungere il set di dati a un'app di visualizzazione dei dati lato client utilizzando l'API Maps JS. Inizializza l'oggetto mappa utilizzando il mapID associato al tuo set di dati nel passaggio precedente. Imposta quindi lo stile e l'interattività del livello Dataset. Per saperne di più, consulta la guida completa agli stili basati sui dati con i set di dati.
Puoi personalizzare lo stile, aggiungere gestori di eventi per modificare lo stile in modo dinamico e altro ancora utilizzando l'API Maps JS. Guarda alcuni esempi nella documentazione. Di seguito definiremo una funzione setStyle per creare lo stile delle caratteristiche di punto e linea per questo esempio in base all'attributo "feature_type".
function setStyle(params) {
const map.getDatasetFeatureLayer("your-dataset-id");
const datasetFeature = params.feature;
const type = datasetFeature.datasetAttributes["feature_type"];
if (type == "lines") {
return {
fillColor: "blue",
strokeColor: "blue",
fillOpacity: 0.5,
strokeWeight: 1,
}
} else if (type == "points") {
return {
fillColor: "black",
strokeColor: "black",
strokeOpacity: 0.5,
pointRadius: 2,
fillOpacity: 0.5,
strokeWeight: 1,
}
}
}
Nota: assicurati di aggiungere sempre l'attribuzione per il set di dati all'app della mappa. Per aggiungere l'attribuzione OSM, segui l'esempio del codice di attribuzione riportato nella documentazione in conformità alle linee guida OSM.
Il codice riportato sopra, se inizializzato in un'app web a pagina singola, restituisce la seguente immagine di dati della mappa:
Da qui, puoi estendere la visualizzazione della mappa nella funzione setStyle() aggiungendo una logica per filtrare le caratteristiche, aggiungendo stili in base all'interazione dell'utente e interagendo con il resto dell'applicazione.
Conclusione
In questo articolo abbiamo parlato di un'architettura di riferimento e di un'implementazione di esempio di una grande applicazione di visualizzazione dei dati utilizzando Google Cloud e Google Maps Platform. Utilizzando questa architettura di riferimento, puoi creare app di visualizzazione dei dati sulla posizione a partire da qualsiasi dato in BigQuery su Google Cloud con prestazioni elevate su qualsiasi dispositivo utilizzando l'API Google Maps Datasets.
Azioni successive
Visita anche:
- Documentazione sull'API Google Maps Platform Datasets
- Visualizza i dati in tempo reale con gli stili di unità di dati
- Introduzione all'analisi geospaziale in BigQuery
- Utilizzare GeoJSON in BigQuery per l'analisi geospaziale
Collaboratori
Autori principali:
- Ryan Baumann, Solutions Engineering Manager di Google Maps Platform