Questo documento fornisce un'architettura di riferimento ed esempi per la creazione di visualizzazioni di dati delle mappe con dati sulla posizione in Google Cloud BigQuery e nell'API Dataset di Google Maps Platform, ad esempio l'analisi dei dati comunali aperti, la creazione di una mappa di copertura delle telecomunicazioni o la visualizzazione delle tracce del movimento della flotta di veicoli mobili.
Le visualizzazioni dei dati delle mappe sono un potente strumento per coinvolgere gli utenti e scoprire insight spaziali nei dati sulla posizione. I dati sulla posizione sono dati che hanno elementi punto, linea o poligono. Ad esempio, le mappe meteorologiche aiutano i consumatori a comprendere e pianificare i viaggi e a prepararsi alle tempeste; le mappe di business intelligence aiutano gli utenti a scoprire insight dall'analisi dei dati e le mappe delle telecomunicazioni aiutano gli utenti a comprendere la copertura e la qualità dei loro provider in una determinata area di servizio.
Tuttavia, è difficile per gli sviluppatori di app creare visualizzazioni di dati delle mappe di grandi dimensioni che siano performanti e offrano un'ottima esperienza utente. I dati di grandi dimensioni devono essere caricati nella memoria lato client, causando tempi di caricamento della prima mappa lenti. La visualizzazione deve essere performante su tutti i dispositivi, inclusi gli smartphone di fascia bassa che hanno vincoli di memoria e GPU. Infine, gli sviluppatori devono scegliere una libreria di rendering di dati di grandi dimensioni che sia portatile, affidabile e performante con dati di grandi dimensioni.
Architettura di riferimento
Lo sviluppo di app con visualizzazioni di dati di grandi dimensioni richiede due componenti principali.
- Backend del cliente : tutti i dati dell'app e i servizi di backend, come l'elaborazione e l'archiviazione.
- Client del cliente : l'interfaccia utente dell'app con un componente di visualizzazione della mappa.
Di seguito è riportato un diagramma di sistema che mostra come questi due componenti interagiscono con l'utente dell'app, Google Cloud e Google Maps Platform per creare un'app di visualizzazione di dati di grandi dimensioni.
Note sul layout
Esistono una serie di considerazioni sul layout da seguire per creare una visualizzazione di dati performante utilizzando Google Cloud e Google Maps Platform.
- Dimensioni e frequenza di aggiornamento dei dati di origine.
- Se i dati di origine in formato GeoJSON sono inferiori a 5 MB o vengono aggiornati molto frequentemente, ad es. una previsione radar meteorologica in tempo reale, valuta la possibilità di pubblicare i dati come oggetto GeoJSON lato client nella tua app ed eseguirne il rendering con un layer deck.gl.
- Se i dati hanno dimensioni superiori a 5 MB e vengono aggiornati al massimo una volta all'ora, valuta la possibilità di utilizzare l'architettura dell'API Dataset descritta in questo documento.
- I set di dati supportano file di dimensioni fino a 350 MB.
- Se i dati hanno dimensioni superiori a 350 MB, valuta la possibilità di eliminare o semplificare i dati di geometria nel file di origine prima di passarli ai set di dati (vedi Eliminazione 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 un elemento specifico o di unire i dati a un elemento da visualizzare, ad esempio applicando uno stile a un elemento selezionato nell'evento utente "click".
- Formatta i dati come CSV o GeoJSON in base alle specifiche dell'API Dataset con nomi di colonne, tipi di dati e tipi di oggetti GeoJSON validi.
- Per creare facilmente set di dati da BigQuery, crea una colonna denominata
wktnell'esportazione CSV SQL. I set di dati supportano l'importazione della geometria da un file CSV in formato Well-Known Text (WKT) da una colonna denominatawkt. - Verifica che i dati siano di geometria e tipi di dati validi. Ad esempio, GeoJSON deve essere nel sistema di coordinate WGS84, nell'ordine di avvolgimento della geometria e così via.
- Utilizza uno strumento come geojson-validate per assicurarti che tutte le geometrie in un file di origine siano valide o ogr2ogr per trasformare un file di origine tra formati o sistemi di coordinate.
- Eliminazione dei dati
- Riduci al minimo il numero di proprietà degli elementi. Puoi unire proprietà aggiuntive a un elemento in fase di runtime su una chiave identificatore univoca (esempio).
- Utilizza i tipi di dati interi per gli oggetti proprietà, ove possibile, per ridurre al minimo lo spazio di archiviazione dei riquadri, mantenendo i riquadri performanti per il caricamento tramite HTTPS in un'app client.
- Semplifica e/o aggrega le geometrie degli elementi molto complesse; valuta la possibilità di utilizzare funzioni BigQuery come ST_Simplify sulle geometrie dei poligoni complessi per ridurre le dimensioni del file di origine e migliorare le prestazioni della mappa.
- Riquadri
- L'API Dataset di Google Maps crea riquadri mappa dal file di dati di origine da utilizzare 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 per caricare i dati in un'app visiva.
- I riquadri mappa potrebbero eliminare gli elementi densi o complessi a livelli di zoom inferiori. Quando un utente esegue lo zoom indietro su uno stato o un paese (ad es. z5-z12), l'aspetto potrebbe essere diverso rispetto a quando esegue lo zoom su una città o un quartiere (ad es. 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 visualizza tutte le ferrovie di Londra dai dati di Open Street Map (OSM).
Prerequisiti
- Accesso a BigQuery Sandbox e alla console Cloud
- Assicurati di aver 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 contengono
i dati di Open Street Map
(OSM) dell'intero globo, inclusi tutti gli elementi possibili. Scopri tutti gli elementi disponibili
per le query nella wiki
di OSM, tra cui amenity, road e landuse.
Utilizza Cloud Shell o la console Cloud BigQuery per eseguire query sulla tabella utilizzando SQL. Lo snippet di codice riportato di seguito utilizza il comando bq query per eseguire query su tutte le ferrovie filtrate solo su Londra utilizzando un riquadro di delimitazione e la funzione ST_Intersects().
Per eseguire questa query da Cloud Shell, esegui lo snippet di codice seguente, 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 elemento
osm_id - Il
feature_type, ad es. punti, linee e così via - Il
namedell'elemento, ad es.Paddington Station - Il tipo di
railway, ad es. principale, turistico, militare e così via - Il
wktdell'elemento: geometria punto, linea o poligono in formato WKT. WKT è il formato di dati standard restituito dalle colonne di BigQuery Geography 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 da BigQuery utilizzando Looker Studio.
Per esportare la tabella in un file CSV in un bucket Cloud Storage, utilizza il bq extract comando 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 regolarmente i dati.
Passaggio 2: crea un set di dati dal file CSV
Poi crea un set di dati di Google Maps Platform dall'output della query su Google Cloud Storage (GCS). Utilizzando l'APIDatasets, puoi creare un set di dati e poi caricare i dati nel tuo set di dati da un file ospitato su GCS.
Per iniziare, attiva l'API Dataset di Maps nel tuo progetto Google Cloud e consulta la documentazione dell'API . Sono disponibili librerie client Node.js e Node.js per chiamare l'API Dataset dalla logica nel backend dell'app. Inoltre, è disponibile una GUI Dataset per creare manualmente i set di dati nella console Cloud.
Al termine del caricamento del set di dati, puoi visualizzarne l'anteprima nella GUI Dataset.
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 mappa associato. Nell'editor di stili mappa, puoi associare un mapId e uno stile al set di dati. Qui puoi anche applicare la personalizzazione delle mappe basata 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 di dati lato client utilizzando l'API Maps JavaScript. Inizializza l'oggetto mappa utilizzando il mapID associato al set di dati del passaggio precedente. Poi imposta lo stile e l'interattività del layer del set di dati. Per maggiori dettagli, consulta la guida completa alla personalizzazione basata 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 JavaScript. Consulta gli esempi nella documentazione. Di seguito definiremo una funzione setStyle per creare lo stile dell'elemento 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,
}
}
}
Questo codice, quando inizializzato in un'app web su singola pagina, produce la seguente visualizzazione dei dati della mappa:
Da qui, puoi estendere la visualizzazione della mappa nella funzione setStyle() aggiungendo la logica per filtrare gli elementi, aggiungere uno stile in base all'interazione dell'utente e interagire con il resto dell'applicazione.
Conclusione
In questo documento abbiamo discusso un'architettura di riferimento e un'implementazione di esempio di un'applicazione di visualizzazione di dati di grandi dimensioni utilizzando Google Cloud e Google Maps Platform. Utilizzando questa architettura di riferimento, puoi creare app di visualizzazione di dati sulla posizione da qualsiasi dato in Google Cloud BigQuery che siano performanti su qualsiasi dispositivo utilizzando l'API Dataset di Google Maps.
Azioni successive
Visita anche:
- Documentazione dell'API Dataset di Google Maps Platform
- Visualizzare i dati in tempo reale con gli stili basati sui dati
- Introduzione all'analisi geospaziale in BigQuery
- Utilizzo di GeoJSON in BigQuery per l'analisi geospaziale
Collaboratori
Autori principali:
- Ryan Baumann, Google Maps Platform Solutions Engineering Manager