Diese Seite wurde von der Cloud Translation API übersetzt.

Daten mit der Google Maps Platform und deck.gl visualisieren

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie mit der Maps JavaScript API und deck.gl, einem Open-Source-Framework zur Datenvisualisierung mit WebGL-Beschleunigung, eine Visualisierung von Geodaten mit hohem Volumen erstellen.

Vorbereitung

Aufgaben

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

Voraussetzungen

Ein Google-Konto
Ein Texteditor oder eine IDE Ihrer Wahl
Grundkenntnisse in JavaScript, HTML und CSS

2. Umgebung einrichten

Einstieg in die Google Maps Platform

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

Node.js herunterladen

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

Node.js enthält npm, einen Paketmanager, den Sie zum Installieren der Abhängigkeiten für dieses Codelab benötigen.

Startprojekt einrichten

Damit Sie Zeit sparen, enthält das Starterprojekt für dieses Codelab den gesamten Boilerplate-Code, den Sie zum Instanziieren einer Karte benötigen.

So funktionierts:

Klonen oder laden Sie dieses Repository herunter.
Wechseln Sie über die Befehlszeile zum Verzeichnis /starter, das die grundlegende Dateistruktur enthält, die Sie für dieses Codelab benötigen.
Installieren Sie Abhängigkeiten von npm, indem Sie den folgenden Befehl ausführen:

npm install

Führen Sie das Starterprojekt in Ihrem Browser mit dem Webpack Dev Server aus, indem Sie den folgenden Befehl ausführen:

npm start

    The starter app opens in your browser and displays a map.

Öffnen Sie das Projekt in Ihrer IDE und wechseln Sie zum Verzeichnis /starter/src.
Öffnen Sie die Datei app.js.

Sie schreiben den gesamten Code in diesen Abschnitt der Datei:

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

Mit dem restlichen Code in der Datei, mit dem die Maps JavaScript API und die Karte geladen werden, müssen Sie nichts tun:

/* 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);
}

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.

So exportieren Sie mit BigQuery ein öffentlich verfügbares Dataset mit Standortdaten für Citi Bike in New York City, ein Bikesharing-Programm mit 14.500 Fahrrädern und 900 Standorten:

Rufen Sie die Cloud Console auf.
Klicken Sie auf das Navigationsmenü > BigQuery.
Geben Sie im 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`

Klicken Sie nach Abschluss der Abfrage auf Ergebnisse speichern und wählen Sie dann JSON (lokale Datei) aus, um das Ergebnisset zu exportieren. Benennen Sie die Datei stations.json und speichern Sie sie im Verzeichnis /src.

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 zur Datenvisualisierung, das WebGL verwendet, um hochauflösende 2D- und 3D-Renderings von extrem großen Datasets zu erstellen. Es kann Hunderttausende von Datenpunkten verarbeiten und bei Optimierung sogar Millionen.

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

Erstellen Sie zuerst eine Instanz von ScatterplotLayer, mit der Datenpunkte als Kreise auf der Karte gerendert werden:

Importieren Sie die ScatterplotLayer-Klasse von deck.gl, indem Sie oben in app.js Folgendes hinzufügen:

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

Legen Sie die Eigenschaften der Ebene fest, indem Sie einen der beiden für die Scatterplot-Ebene von deck.gl verfügbaren Eigenschaftstypen auswählen.

Setter-Properties liefern der Visualisierung die Informationen, die sie zum Rendern benötigt, z. B. die Position und den Radius von Datenpunkten. Mit den Styler-Eigenschaften können Sie den Stil der Visualisierung anpassen.

Hier 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. für Neudarstellungen und andere Aktualisierungen der Visualisierung. Alle deck.gl-Ebenen erfordern eine eindeutige ID, die Sie zuweisen.
data gibt die Datenquelle der Visualisierung an. Legen Sie den Wert auf ‘./stations.json' fest, um das Dataset zu verwenden, das Sie aus BigQuery exportiert haben.
getPosition ruft die Position der einzelnen Objekte aus der Datenquelle ab. Der Wert der Eigenschaft ist eine Funktion. deck.gl verwendet die Funktion, um jede Zeile im Datensatz zu durchlaufen. Die Funktion gibt an, wie der Renderer auf den Breiten- und Längengrad des Datenpunkts in jeder Zeile zugreifen kann. In diesem Dataset sind die Daten in jeder Zeile ein JSON-Objekt, in dem die Position in den Attributen „latitude“ und „longitude“ festgelegt ist. Die Funktion, die Sie für getPosition angeben, ist also d => [parseFloat(d.longitude), parseFloat(d.latitude)].
getRadius definiert den Radius jedes Objekts in Metern. In diesem Fall wird der Radius auf d => parseInt(d.capacity) festgelegt, wodurch die Größe der Datenpunkte anhand der Kapazität der einzelnen Stationen bestimmt wird.
Mit stroked wird festgelegt, ob die gerenderten Datenpunkte einen Strich an ihren Außenkanten haben.
Mit getFillColor wird die Füllfarbe der einzelnen Datenpunkte als RGB-Farbcode festgelegt.
Mit getLineColor wird die Strichfarbe der einzelnen Datenpunkte als RGB-Farbcode festgelegt.
Mit radiusMinPixels wird die Mindestbreite in Pixeln für jeden Datenpunkt festgelegt. Wenn Nutzer hinein- und herauszoomen, wird die Skalierung der Datenpunkte von deck.gl automatisch angepasst, damit die Visualisierung auf der Karte gut sichtbar bleibt. Mit diesem Attribut können Sie steuern, in welchem Umfang die Größenanpassung erfolgt.
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
};

Erstellen Sie eine Instanz der ScatterplotLayer-Klasse von deck.gl:

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 können Sie Ihre ScatterplotLayer-Instanz mit der GoogleMapsOverlay-Klasse auf die Karte anwenden. Diese Klasse verwendet die Maps JavaScript API OverlayView API, um einen WebGL-Kontext über die Karte zu legen.

Anschließend können Sie beliebige Visualisierungsebenen von deck.gl an GoogleMapsOverlay übergeben. Dadurch wird die Ebene gerendert und mit der Karte synchronisiert.

So wenden Sie Ihre ScatterplotLayer auf die Karte an:

Importieren Sie die GoogleMapsOverlay-Klasse von deck.gl:

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

Erstellen Sie eine Instanz der Klasse GoogleMapsOverlay und übergeben Sie ihr die scatterplotLayer-Instanz, die Sie zuvor in der layers-Eigenschaft eines Objekts erstellt haben:

const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });

Wenden Sie das Overlay auf die Karte an:

 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 sollte eine beeindruckende Datenvisualisierung aller Citi Bike-Stationen in New York City zu sehen sein.

6. Glückwunsch

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

Weitere Informationen

Mit der Maps JavaScript API haben Sie Zugriff auf alle Google Maps Platform-Funktionen für das Web. Weitere Informationen zur Verwendung der Google Maps Platform im Web finden Sie unter den folgenden Links:

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