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.
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:
- Utwórz konto rozliczeniowe.
- Utwórz projekt.
- Włącz interfejsy API i pakiety SDK Google Maps Platform.
- 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ąć:
- Sklonuj lub pobierz to repozytorium.
- W wierszu poleceń przejdź do katalogu
/starter
, który zawiera podstawową strukturę plików potrzebną do ukończenia tego ćwiczenia. - Zainstaluj zależności z npm, uruchamiając to polecenie:
npm install
- 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.
- Otwórz projekt w IDE i przejdź do katalogu
/starter/src
. - 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);
}
- 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:
- Otwórz konsolę Cloud.
- Kliknij menu nawigacyjne
> BigQuery.
- W Edytorze zapytań wpisz to zapytanie i kliknij Uruchom:
SELECT
longitude,
latitude,
name,
capacity
FROM
`bigquery-public-data.new_york_citibike.citibike_stations`
- 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
.
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:
- Zaimportuj klasę
ScatterplotLayer
z deck.gl, dodając ten kod na początku plikuapp.js
:
import { ScatterplotLayer } from '@deck.gl/layers';
- 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.j
son', 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 dogetPosition
, tod => [parseFloat(d.longitude), parseFloat(d.latitude)]
.getRadius
określa promień każdego obiektu w metrach. W tym przypadku promień jest ustawiony nad => 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
};
- 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:
- Importuj klasę
GoogleMapsOverlay
deck.gl:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
- Utwórz instancję klasy
GoogleMapsOverlay
i przekaż do niej instancjęscatterplotLayer
utworzoną wcześniej we właściwościlayers
obiektu:
const googleMapsOverlay = new GoogleMapsOverlay({
layers: [scatterplotLayer]
});
- 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.
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: