Daten mit der Google Maps Platform und deck.gl visualisieren

Daten mit der Google Maps Platform und deck.gl visualisieren

Informationen zu diesem Codelab

subjectZuletzt aktualisiert: Mai 11, 2022
account_circleVerfasst von einem Google-Mitarbeiter

1. Hinweis

In diesem Codelab lernen Sie, wie Sie mit der Maps JavaScript API und deck.gl, einem Open-Source-Open-Source-Framework mit WebGL-beschleunigter Datenvisualisierung, eine raumübergreifende Datenvisualisierung erstellen.

d01802e265548be1.png

Vorbereitung

Aufgaben

  • Google Maps Platform mit deck.gl integrieren
  • Dataset in eine Karte aus BigQuery importieren
  • Definieren Sie die Datenpunkte auf der Karte.

Voraussetzungen

  • Ein Google-Konto
  • Texteditor oder IDE deiner Wahl
  • Grundkenntnisse in JavaScript, HTML und CSS

2. Umgebung einrichten

Einführung in Google Maps Platform

Wenn Sie die Google Maps Platform noch nicht verwendet haben, gehen Sie so vor:

  1. Erstellen Sie ein Rechnungskonto.
  2. Ein Projekt erstellen
  3. Aktivieren Sie die APIs und SDKs der Google Maps Platform.
  4. Generieren Sie den API-Schlüssel.

Node.js herunterladen

Wenn Sie dies noch nicht getan haben, rufen Sie https://xxxxxx.org/ auf, laden Sie die Node.js-Laufzeit auf Ihren Computer herunter und installieren Sie sie.

Node.js enthält npm, einen Paketmanager, den Sie installieren müssen, um die Abhängigkeiten für dieses Codelab zu installieren.

Startprojekt einrichten

Um Zeit zu sparen, enthält das Starter-Projekt für dieses Codelab den Standardtext, mit dem Sie eine Karte instanziieren können.

Die App lässt sich so aktivieren:

  1. Klonen oder laden Sie dieses Repository herunter.
  2. Rufen Sie in der Befehlszeile das Verzeichnis /starter auf, das die grundlegende Dateistruktur enthält, die Sie für dieses Codelab benötigen.
  3. Installieren Sie Abhängigkeiten aus npm mit dem folgenden Befehl:
npm install
  1. Führen Sie das Startprojekt in Ihrem Browser mit Webpack Dev Server aus. Führen Sie dazu den folgenden Befehl aus:
npm start

    The starter app opens in your browser and displays a map.
  1. Öffnen Sie das Projekt in Ihrer IDE und rufen Sie das Verzeichnis /starter/src auf.
  2. Öffnen Sie die Datei app.js.

Sie programmieren in diesem Abschnitt des Codes der Datei:

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

Mit dem Rest des Codes in der Datei wird die Maps JavaScript API und die Karte geladen:

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}
  1. Ersetzen Sie YOUR API KEY durch Ihren tatsächlichen API-Schlüssel, den Sie bei der Einrichtung Ihrer Umgebung generiert haben:
const googleMapsAPIKey = 'YOUR API KEY';

3. Daten aus BigQuery exportieren

BigQuery bietet viele öffentliche Datasets, die Sie für Datenanalysen oder experimentelle Zwecke verwenden können.

Verwenden Sie BigQuery, um einen öffentlich verfügbaren Datensatz mit Standortdaten für das New York City Citi Bike zu exportieren, ein Bike-Sharing-Programm mit 14.500 Fahrrädern und 900 Standorten. Gehen Sie dazu so vor:

  1. Öffnen Sie die Cloud Console.
  2. Klicken Sie auf Navigationsmenü 41e8e87b85b0f93 > BigQuery.
  3. Geben Sie in den Abfrageeditor die folgende Abfrage ein und klicken Sie auf Ausführen:
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. Klicken Sie nach Abschluss der Abfrage auf Ergebnisse speichern und wählen Sie dann JSON (lokale Datei) aus, um den Ergebnissatz zu exportieren. Benennen Sie die Datei stations.json und speichern Sie sie im Verzeichnis /src.

2f4932829f7e1f78.png

Nachdem Sie Ihre Daten abgerufen haben, können Sie Ihre erste Visualisierung mit deck.gl erstellen.

4. Visualisierung definieren

deck.gl ist ein Open-Source-Framework für die Datenvisualisierung, mit dem sich WebGL nutzen lässt, um hochauflösende 2D- und 3D-Darstellungen extrem großer Datasets zu erstellen. Es kann Hunderttausende von Datenpunkten verarbeiten und, wenn deine Website optimiert ist, sogar Millionen verarbeiten.

Zum Erstellen einer Visualisierung benötigen Sie zwei Klassen: GoogleMapsOverlay und eine der vielen Visualisierungsebenen.

Erstelle zuerst eine Instanz von ScatterplotLayer. Dadurch werden Datenpunkte als Kreise auf der Karte gerendert:

  1. Fügen Sie oben in app.js die Klasse ScatterplotLayer deck.gl&s ein:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. Lege die Eigenschaften der Ebene fest, indem du die beiden Eigenschaften für die Streudiagrammebene von deck.gl auswählst.

Über die Setter-Eigenschaften erhalten Nutzer die Informationen, die sie rendern müssen, etwa die Position und den Radius der Datenpunkte. Mit Styler-Eigenschaften kannst du den Visualisierungsstil anpassen.

Hier sehen Sie eine Aufschlüsselung der Properties, die Sie im folgenden Code-Snippet verwenden:

  • Mit id kann der Renderer Ebenen aus verschiedenen Gründen identifizieren, z. B. mit Überstrichen oder anderen Aktualisierungen der Visualisierung. Alle deck.gl-Ebenen benötigen eine eindeutige ID, die Sie zuweisen.
  • data gibt die Datenquelle der Visualisierung an. Setzen Sie es auf ‘./stations.json', um das aus BigQuery exportierte Dataset zu verwenden.
  • getPosition ruft die Position jedes Objekts aus der Datenquelle ab. Beachten Sie, dass der Wert der Eigenschaft eine Funktion ist. deck.gl verwendet die Funktion, um über jede Zeile im Dataset zu iterieren. Die Funktion teilt dem Renderer mit, wie der Breiten- und Längengrad des Datenpunkts in jeder Zeile abgerufen werden soll. In diesem Dataset sind die Daten in jeder Zeile ein JSON-Objekt, in dem die Position in den Breiten- und Längengradeigenschaften angegeben wird. Die Funktion, die Sie getPosition zur Verfügung stellen, ist also d => [parseFloat(d.longitude), parseFloat(d.latitude)].
  • getRadius definiert den Radius jedes Objekts in Metern. In diesem Fall ist der Radius auf d => parseInt(d.capacity) festgelegt. Dadurch wird die Größe der Datenpunkte basierend auf der Kapazität der einzelnen Sender festgelegt.
  • Mit stroked wird festgelegt, ob die gerenderten Datenpunkte an den äußeren Rändern einen Strich haben.
  • Mit getFillColor wird die Füllfarbe jedes Datenpunkts als RGB-Farbcode festgelegt.
  • Mit getLineColor wird die Strichfarbe jedes Datenpunkts als RGB-Farbcode festgelegt.
  • Mit radiusMinPixels wird die minimale Pixelbreite für jeden Datenpunkt festgelegt. Durch das Heran- und Herauszoomen von deck.gl wird die Größe der Datenpunkte automatisch angepasst, damit die Visualisierung auf der Karte deutlich sichtbar ist. Mit diesem Attribut legen Sie fest, wie stark diese Größenänderung erfolgen soll.
  • Mit radiusMaxPixels wird die maximale Pixelbreite für jeden Datenpunkt festgelegt.
const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],    
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};
  1. Erstelle eine Instanz der Klasse „deck.gl's“ ScatterplotLayer:
const scatterplotLayer = new ScatterplotLayer(layerOptions);

Nachdem Sie diesen Abschnitt abgeschlossen haben, sollte Ihr Code so aussehen:

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5. Visualisierung auf die Karte anwenden

Jetzt kannst du deine ScatterplotLayer-Instanz mit der GoogleMapsOverlay-Klasse auf die Karte anwenden. Dabei wird die Maps JavaScript API OverlayView API verwendet, um einen WebGL-Kontext über die Karte einzufügen.

Sobald diese Elemente vorhanden sind, kannst du die Visualisierungsebenen von deck.gl.GoogleMapsOverlay an GoogleMapsOverlay übergeben. Dadurch wird die Ebene gerendert und mit der Karte synchronisiert.

So wendest du dein ScatterplotLayer-Element auf die Karte an:

  1. Deck.gl's-GoogleMapsOverlay-Klasse importieren:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. Erstelle eine Instanz der Klasse GoogleMapsOverlay und übergib die Instanz scatterplotLayer, die du zuvor in der Property layers eines Objekts erstellt hast:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. Overlay auf die Karte anwenden:
 googleMapsOverlay.setMap(map);

Nachdem Sie diesen Abschnitt abgeschlossen haben, sollte Ihr Code so aussehen:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

Kehren Sie zu Ihrem Browser zurück. Dort sollten Sie eine erstklassige Datenvisualisierung aller Citi Bike-Stationen in New York sehen.

d01802e265548be1.png

6. Glückwunsch

Glückwunsch! Sie haben mit der Google Maps Platform und deck.gl eine umfassende Datenvisualisierung der Daten von New York City Citi Bike erstellt.

Weitere Informationen

Mit der Maps JavaScript API erhältst du Zugriff auf alle Angebote der Google Maps Platform für das Web. Weitere Informationen zur Google Maps Platform im Web finden Sie unter den folgenden Links:

deck.gl bietet zahlreiche Ebenen von Datenvisualisierungen, mit denen Sie Daten für Ihre Nutzer anzeigen können. Weitere Informationen zur Verwendung von deck.gl mit der Maps JavaScript API finden Sie unter den folgenden Links:

bug_report Fehler melden