Dieses Dokument enthält eine Referenzarchitektur und ein Beispiel für die Erstellung von Kartendatenvisualisierungen mit Standortdaten in BigQuery und der Google Maps Platform Datasets API. Sie können z. B. offene kommunale Daten analysieren, eine Karte zur Telekommunikationsabdeckung erstellen oder die Bewegungen der Fahrzeugflotte visualisieren.
Visualisierungen für Kartendaten sind ein leistungsstarkes Tool, um Nutzer anzusprechen und räumliche Einblicke in Standortdaten zu erhalten. Standortdaten sind Daten, die Punkt-, Linien- oder Polygonmerkmale enthalten. Zum Beispiel helfen Wetterkarten Verbrauchern, Fahrten zu verstehen und zu planen und sich auf Stürme vorzubereiten. Business Intelligence-Karten helfen Nutzenden, Erkenntnisse aus ihrer Datenanalyse zu gewinnen, und Telekommunikationskarten helfen den Nutzenden, die Abdeckung und Qualität in einem bestimmten Einzugsgebiet.
Für App-Entwickler ist es jedoch schwierig, umfangreiche Kartendatenvisualisierungen zu erstellen, die leistungsstark und nutzerfreundlich sind. Große Daten müssen clientseitig in den Arbeitsspeicher geladen werden, was zu langen Kartenladezeiten führt. Das Bild muss auf allen Geräten, einschließlich Low-End-Smartphones mit Speicher- und GPU-Einschränkungen, gut funktionieren. Schließlich müssen die Entwickler eine große Daten-Rendering-Bibliothek auswählen, die portierbar, zuverlässig und mit großen Datenmengen leistungsfähig ist.
Referenzarchitektur
Die Entwicklung von Anwendungen mit umfangreichen Datenvisualisierungen erfordert zwei Hauptkomponenten.
- Kunden-Backend – alle Backend-Anwendungsdaten und wie Verarbeitung und Speicherung.
- Kundenclient: Die Benutzeroberfläche Ihrer App mit einer Komponente zur Kartenvisualisierung.
Im Folgenden sehen Sie ein Systemdiagramm, das zeigt, wie diese beiden Komponenten mit dem App-Nutzer, Google Cloud und der Google Maps Platform interagieren, um eine große App zur Datenvisualisierung zu erstellen.
Designaspekte
Beim Erstellen einer leistungsfähigen Datenvisualisierung mit Google Cloud und der Google Maps Platform sind einige Designüberlegungen zu beachten.
- Größe der Quelldaten und Aktualisierungshäufigkeit:
- Wenn die Quelldaten im GeoJSON-Format kleiner als 5 MB sind oder sehr häufig aktualisiert werden, z.B. eine Live-Wetterradarprognose erstellen, können Sie Daten als clientseitiges GeoJSON-Objekt in Ihrer App bereitstellen und mit einer deck.gl-Ebene rendern.
- Wenn Ihre Daten größer als 5 MB sind und nicht schneller als einmal pro Stunde aktualisiert werden, sollten Sie die Architektur der Datasets API in diesem Dokument in Betracht ziehen.
- Datasets unterstützen Dateien mit einer Größe von bis zu 350 MB.
- Wenn Ihre Daten größer als 350 MB sind, sollten Sie die Geometriedaten in der Quelldatei kürzen oder vereinfachen, bevor Sie sie an Datasets übergeben (siehe Datenbereinigung weiter unten).
- Schema & Format
<ph type="x-smartling-placeholder">
- </ph>
- Achten Sie darauf, dass Ihre Daten für jedes Element eine global eindeutige ID-Property haben. Mithilfe einer eindeutigen ID können Sie ein bestimmtes Element auswählen und gestalten oder Daten mit einem Element verknüpfen, um es zu visualisieren. So lässt sich beispielsweise ein ausgewähltes Element für das Nutzerereignis „Klick“ gestalten.
- Formatieren Sie Ihre Daten als CSV oder GeoJSON gemäß der Datasets API-Spezifikation mit gültigen Spaltennamen, Datentypen und Typen von GeoJSON-Objekten.
- Zum einfachen Erstellen von Datasets aus BigQuery erstellen Sie in Ihrem SQL-CSV-Export eine Spalte mit dem Namen
wkt
. Datasets unterstützen den Import von Geometrie aus einer CSV-Datei im Well-Known Text-Format (WKT) aus einer Spalte mit dem Namenwkt
. - Prüfen Sie, ob Ihre Daten gültige Geometrie und Datentypen haben. GeoJSON muss beispielsweise dem WGS84-Koordinatensystem, der Geometrie-Wundungsreihenfolge usw. entsprechen.
- Verwenden Sie ein Tool wie geojson-validate, um sicherzustellen, dass alle Geometrien in einer Quelldatei gültig sind, oder ogr2ogr, um eine Quelldatei in andere Formate oder Koordinatensysteme umzuwandeln.
- Datenbereinigung
<ph type="x-smartling-placeholder">
- </ph>
- Minimieren Sie die Anzahl der Eigenschaften von Elementen. Sie können einem Feature zur Laufzeit zusätzliche Attribute mit einem eindeutigen ID-Schlüssel verknüpfen (Beispiel).
- Verwenden Sie nach Möglichkeit ganzzahlige Datentypen für Eigenschaftsobjekte, um den Kachelspeicherplatz zu minimieren und dafür zu sorgen, dass die Kacheln in einer Client-App über HTTPS geladen werden können.
- Sehr komplexe Featuregeometrien zu vereinfachen und/oder aggregieren Sie können BigQuery-Funktionen wie ST_Simplify für komplexe Polygongeometrien verwenden, um die Größe der Quelldatei zu verringern und die Kartenleistung zu verbessern.
- Kacheln
<ph type="x-smartling-placeholder">
- </ph>
- Mit der Google Maps Datasets API werden aus Ihrer Quelldatendatei Kartenkacheln erstellt, um sie mit einem Maps SDK für das Web oder für Mobilgeräte zu verwenden.
- Kartenkacheln sind ein zoombasiertes Indexierungssystem, mit dem Daten effizienter in eine visuelle App geladen werden können.
- Bei niedrigeren Zoomstufen können auf Kartenkacheln dichte oder komplexe Elemente abgelegt werden. Verkleinert ein Nutzer einen Bundesstaat oder ein Land (z.B. z5-z12), kann dies anders aussehen als beim Heranzoomen einer Stadt oder eines Viertels (z.B. z13-z18).
Beispiel: Bahnstrecken in London
In diesem Beispiel wenden wir die Referenzarchitektur an, um mit der GCP und Google Maps eine Webanwendung zu erstellen, mit der alle Bahnstrecken in London anhand von Open Street Map-Daten (OSM) visualisiert werden.
Vorbereitung
- Zugriff auf BigQuery Sandbox und die Cloud Console
- Sie müssen ein GCP-Projekt und ein Rechnungskonto eingerichtet haben.
Schritt 1 – Daten in BigQuery abfragen
Rufen Sie Öffentliche BigQuery-Datasets auf. Das Dataset „bigquery-public-data“ Die Tabelle geo_openstreetmap.planet_features
enthält alle Open Street Map-Daten (OSM) des gesamten Globus, einschließlich aller möglichen Elemente. Alle Funktionen für Abfragen finden Sie im OSM Wiki, darunter amenity
, road
und landuse
.
Verwenden Sie Cloud Shell oder die BigQuery Cloud Console(https://console.cloud.google.com), um die Tabelle mit SQL abzufragen. Im folgenden Code-Snip wird mit dem Befehl bq query alle Bahnstrecken abgefragt, die nur nach London gefiltert wurden. Dazu werden ein Begrenzungsrahmen und die Funktion ST_Intersects() verwendet.
Führen Sie den folgenden Code-Snip aus, um diese Abfrage in Cloud Shell auszuführen. Aktualisieren Sie dabei die Projekt-ID, das Dataset und den Tabellennamen für Ihre Umgebung.
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)]
))
)'
Die Abfrage gibt Folgendes zurück:
- eine eindeutige Kennung für jedes Element
osm_id
- den
feature_type
, z.B. Punkte, Linien usw. - Der
name
des Elements, z.B.Paddington Station
- Der Typ
railway
, z.B. Haupt-, Tourismus-, Militär- usw. - Die
wkt
des Elements – Punkt, Linie oder Polygongeometrie im WKT-Format. WKT ist das Standarddatenformat von BigQuery-Geografiespalten, die in einer Abfrage zurückgegeben werden.
Hinweis: Wenn Sie die Abfrageergebnisse vor dem Erstellen eines Datasets visuell validieren möchten, können Sie die Daten in Looker Studio in einem Dashboard von BigQuery visualisieren.
Um die Tabelle in eine CSV-Datei in einem Google Cloud Storage-Bucket zu exportieren, verwenden Sie den Befehl bq extra in Cloud Shell:
bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv
Hinweis:Sie können jeden Schritt mit Cloud Scheduler automatisieren, um Ihre Daten regelmäßig zu aktualisieren.
Schritt 2: Datensatz aus Ihrer CSV-Datei erstellen
Erstellen Sie als Nächstes ein Google Maps Platform-Dataset aus der Abfrageausgabe in Google Cloud Storage (GCS). Mit der Datasets API können Sie ein Dataset erstellen und dann aus einer in GCS gehosteten Datei Daten in Ihr Dataset hochladen.
Aktivieren Sie zuerst die Maps Datasets API in Ihrem GCP-Projekt und lesen Sie die API-Dokumentation. Es gibt Python- und Node.js-Clientbibliotheken, mit denen die Datasets API über die Logik im Back-End Ihrer Anwendung aufgerufen werden kann. Darüber hinaus gibt es eine Datasets-GUI, mit der Sie Datasets manuell in der Cloud Console erstellen können.
Nachdem der Dataset-Upload abgeschlossen ist, können Sie sich eine Vorschau des Datasets auf der Datasets-GUI ansehen.
Schritt 4: Datensatz mit einer Karten-ID verknüpfen
Nachdem das Dataset erstellt wurde, kannst du eine Karten-ID mit einem verknüpften Kartenstil erstellen. Im Kartenstil-Editor können Sie eine Karten-ID und einen Stil mit dem Dataset verknüpfen. Hier können Sie auch cloudbasiertes Gestalten von Karteninhalten anwenden, um das Erscheinungsbild Ihrer Karte anzupassen.
Schritt 5: Kartenvisualisierung der Client-App erstellen
Schließlich können Sie den Datensatz mithilfe der Maps JS API in eine clientseitige App zur Datenvisualisierung einfügen. Initialisieren Sie Ihr Kartenobjekt mit der MapID, die im vorherigen Schritt mit Ihrem Dataset verknüpft ist. Legen Sie dann den Stil und die Interaktivität Ihrer Dataset-Ebene fest. Weitere Informationen finden Sie in einem vollständigen Leitfaden zu datengestützten Stilen mit Datasets.
Mit dem Maps JS API können Sie den Stil anpassen und Event-Handler für eine dynamische Änderung des Stils hinzufügen. Beispiele finden Sie in der Dokumentation. Im Folgenden definieren wir eine setStyle-Funktion, um den Punkt- und Linienelementstil für dieses Beispiel basierend auf dem Attribut "feature_type" zu erstellen.
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,
}
}
}
Hinweis: Fügen Sie der Karten-App immer eine Quellenangabe für Ihren Datensatz hinzu. Wenn Sie eine OSM-Zuordnung hinzufügen möchten, folgen Sie dem Zuordnungs-Codebeispiel in der Dokumentation und beachten Sie dabei die OSM-Richtlinien.
Wenn dieser Code oben in einer einseitigen Web-App initialisiert wird, liefert er folgendes visuelles Element der Kartendaten:
Von hier aus können Sie die Kartenvisualisierung in der Funktion setStyle() erweitern, indem Sie Logik zum Filtern von Elementen hinzufügen, Stile basierend auf der Nutzerinteraktion hinzufügen und mit dem Rest Ihrer Anwendung interagieren.
Fazit
In diesem Artikel haben wir eine Referenzarchitektur und eine Beispielimplementierung für eine Anwendung zur Visualisierung großer Daten mit Google Cloud und der Google Maps Platform besprochen. Mithilfe dieser Referenzarchitektur können Sie mit der Google Maps Datasets API Anwendungen zur Visualisierung von Standortdaten aus beliebigen Daten in BigQuery in der GCP erstellen, die auf jedem Gerät leistungsfähig sind.
Nächste Aktionen
Zum Weiterlesen:
- Dokumentation zur Google Maps Platform Datasets API
- Daten mit Datenantriebsstilen in Echtzeit ansehen
- Einführung in raumbezogene Analysen in BigQuery
- GeoJSON in BigQuery für raumbezogene Analysen verwenden
Beitragende
Hauptautoren:
- Ryan Baumann, Google Maps Platform Solutions Engineering Manager