Wizualizacja danych za pomocą Google Maps Platform i deck.gl

1. Zanim zaczniesz

Z tego ćwiczenia w Codelabs dowiesz się, jak utworzyć wizualizację danych geoprzestrzennych o dużej objętości za pomocą interfejsu Maps JavaScript API i deck.gl, czyli platformy do wizualizacji danych o otwartym kodzie źródłowym, która korzysta z akceleracji WebGL.

d01802e265548be1.png

Wymagania wstępne

Jakie zadania wykonasz

  • Integracja Google Maps Platform z deck.gl.
  • Importowanie zbioru danych do mapy z BigQuery.
  • Określ punkty danych na mapie.

Czego potrzebujesz

  • konto Google;
  • wybrany edytor tekstu lub IDE;
  • Podstawowa znajomość języków JavaScript, HTML i CSS

2. Konfigurowanie środowiska

Pierwsze kroki z Google Maps Platform

Jeśli nie korzystasz jeszcze z Google Maps Platform, wykonaj te czynności:

  1. Utwórz konto rozliczeniowe.
  2. Utwórz projekt.
  3. Włącz interfejsy API i pakiety SDK Google Maps Platform.
  4. Wygeneruj klucz interfejsu API.

Pobieranie Node.js

Jeśli nie masz jeszcze środowiska Node.js, otwórz https://nodejs.org/, a następnie pobierz i zainstaluj je na komputerze.

Node.js zawiera npm, czyli menedżera pakietów, który jest potrzebny do zainstalowania zależności na potrzeby tego laboratorium.

Konfigurowanie projektu startowego

Aby zaoszczędzić Ci czas, projekt początkowy tego ćwiczenia zawiera cały kod, który jest potrzebny do utworzenia instancji mapy.

Aby rozpocząć:

  1. Sklonuj lub pobierz to repozytorium.
  2. W wierszu poleceń przejdź do katalogu /starter, który zawiera podstawową strukturę plików potrzebną do ukończenia tego ćwiczenia.
  3. Zainstaluj zależności z npm, uruchamiając to polecenie:
npm install
  1. Uruchom projekt początkowy w przeglądarce za pomocą serwera deweloperskiego Webpack, wykonując to polecenie:
npm start
    The starter app opens in your browser and displays a map.
  1. Otwórz projekt w IDE i przejdź do katalogu /starter/src.
  2. Otwórz plik app.js.

Cały kod wpiszesz w tej sekcji kodu w pliku:

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

Nie będziesz nic robić z pozostałą częścią kodu w pliku, która wczytuje interfejs Maps JavaScript API i mapę:

/* 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. Zastąp YOUR API KEY rzeczywistym kluczem interfejsu API, który został wygenerowany podczas konfigurowania środowiska:
const googleMapsAPIKey = 'YOUR API KEY';

3. Eksportowanie danych z BigQuery

BigQuery udostępnia wiele publicznych zbiorów danych, których możesz używać do analizy danych lub celów eksperymentalnych.

Aby wyeksportować publicznie dostępny zbiór danych zawierający dane o lokalizacji rowerów publicznych Citi Bike w Nowym Jorku (program rowerów publicznych obejmujący 14 500 rowerów i 900 lokalizacji), wykonaj te czynności:

  1. Otwórz konsolę Cloud.
  2. Kliknij menu nawigacyjne41e8e87b85b0f93.png > BigQuery.
  3. W Edytorze zapytań wpisz to zapytanie i kliknij Uruchom:
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. Po zakończeniu zapytania kliknij Zapisz wyniki, a następnie wybierz JSON (plik lokalny), aby wyeksportować zestaw wyników. Nadaj plikowi nazwę stations.json i zapisz go w katalogu /src.

2f4932829f7e1f78.png

Gdy masz już dane, możesz utworzyć pierwszą wizualizację za pomocą deck.gl.

4. Określ wizualizację

deck.gl to platforma open source do wizualizacji danych, która wykorzystuje WebGL do tworzenia renderowanych w wysokiej rozdzielczości obrazów 2D i 3D bardzo dużych zbiorów danych. Może obsługiwać setki tysięcy punktów danych, a po optymalizacji nawet miliony.

Aby utworzyć wizualizację, potrzebujesz 2 klas: GoogleMapsOverlay i jednej z wielu warstw wizualizacji deck.gl.

Na początek utwórz instancję ScatterplotLayer, która renderuje punkty danych jako okręgi na mapie:

  1. Zaimportuj klasę ScatterplotLayer z deck.gl, dodając ten kod na początku pliku app.js:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. Ustaw właściwości warstwy, wybierając jeden z 2 typów właściwości dostępnych w warstwie wykresu punktowego deck.gl.

Właściwości ustawiające dostarczają wizualizacji informacji potrzebnych do renderowania, takich jak pozycja i promień punktów danych. Właściwości stylizatora umożliwiają dostosowanie stylu wizualizacji.

Oto opis właściwości używanych w tym fragmencie kodu:

  • id umożliwia renderującemu identyfikowanie warstw z różnych powodów, np. w przypadku ponownego rysowania i innych aktualizacji wizualizacji. Wszystkie warstwy deck.gl wymagają unikalnego identyfikatora, który przypisujesz.
  • data określa źródło danych wizualizacji. Ustaw wartość ‘./stations.json', aby używać zbioru danych wyeksportowanego z BigQuery.
  • getPosition pobiera pozycję każdego obiektu ze źródła danych. Zwróć uwagę, że wartością właściwości jest funkcja. deck.gl używa tej funkcji do iteracji po każdym wierszu w zbiorze danych. Funkcja informuje moduł renderujący, jak uzyskać dostęp do szerokości i długości geograficznej punktu danych w każdym wierszu. W tym zbiorze danych dane w każdym wierszu są obiektem JSON z pozycją ustawioną we właściwościach szerokości i długości geograficznej, więc funkcja, którą podajesz do getPosition, to d => [parseFloat(d.longitude), parseFloat(d.latitude)].
  • getRadius określa promień każdego obiektu w metrach. W tym przypadku promień jest ustawiony na d => parseInt(d.capacity), co określa rozmiar punktów danych na podstawie pojemności każdej stacji.
  • stroked określa, czy renderowane punkty danych mają obrys na zewnętrznych krawędziach.
  • getFillColor ustawia kolor wypełnienia każdego punktu danych jako kod koloru RGB.
  • getLineColor ustawia kolor obrysu każdego punktu danych jako kod koloru RGB.
  • radiusMinPixels ustawia minimalną szerokość w pikselach dla każdego punktu danych. Gdy użytkownicy powiększają i pomniejszają mapę, deck.gl automatycznie zmienia rozmiar punktów danych, aby wizualizacja była dobrze widoczna. Ta właściwość pozwala kontrolować zakres zmiany rozmiaru.
  • radiusMaxPixels ustawia maksymalną szerokość w pikselach dla każdego punktu danych.
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. Utwórz instancję klasy ScatterplotLayer w deck.gl:
const scatterplotLayer = new ScatterplotLayer(layerOptions);

Po zakończeniu tej sekcji kod powinien wyglądać tak:

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. Zastosuj wizualizację na mapie

Teraz możesz zastosować instancję ScatterplotLayer do mapy za pomocą klasy GoogleMapsOverlay, która używa interfejsu Maps JavaScript API OverlayView do wstrzykiwania kontekstu WebGL na mapę.

Gdy to zrobisz, możesz przekazać dowolną warstwę wizualizacji deck.gl do komponentu GoogleMapsOverlay, który renderuje warstwę i synchronizuje ją z mapą.

Aby zastosować ScatterplotLayer na mapie, wykonaj te czynności:

  1. Importuj klasę GoogleMapsOverlay deck.gl:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. Utwórz instancję klasy GoogleMapsOverlay i przekaż do niej instancję scatterplotLayer utworzoną wcześniej we właściwości layers obiektu:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. Zastosuj nakładkę na mapie:
 googleMapsOverlay.setMap(map);

Po zakończeniu tej sekcji kod powinien wyglądać tak:

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

Wróć do przeglądarki. Powinna się w niej wyświetlać atrakcyjna wizualizacja danych wszystkich stacji Citi Bike w Nowym Jorku.

d01802e265548be1.png

6. Gratulacje

Gratulacje! Przygotowano wizualizację dużych ilości danych dotyczących rowerów Citi Bike w Nowym Jorku za pomocą Google Maps Platform i deck.gl.

Więcej informacji

Interfejs Maps JavaScript API zapewnia dostęp do wszystkich funkcji Google Maps Platform dostępnych w internecie. Więcej informacji o korzystaniu z Google Maps Platform w internecie znajdziesz pod tymi linkami:

deck.gl oferuje wiele warstw wizualizacji danych, których możesz używać do wyświetlania danych użytkownikom. Więcej informacji o używaniu deck.gl z interfejsem Maps JavaScript API znajdziesz w tych artykułach: