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

Informacje o tym ćwiczeniu (w Codelabs)

Ostatnia aktualizacja: maj 11, 2022

Dokument stworzony przez pracownika Google

Ta strona została przetłumaczona przez Cloud Translation API.

1. Zanim zaczniesz

Z tego ćwiczenia dowiesz się, jak stworzyć wizualizację danych geoprzestrzennych w dużej ilości za pomocą interfejsu Maps JavaScript API i taras.gl, oprogramowania typu open-source z akceleracją i wizualizacją danych przy użyciu WebGL.

Wymagania wstępne

Jakie zadania wykonasz:

Integracja Google Maps Platform z Thull.gl
Zaimportuj zbiór danych z mapy do BigQuery.
Określ punkty danych na mapie.

Czego potrzebujesz

Konto Google
Twój wybrany edytor tekstu lub IDE
Podstawowa wiedza o JavaScripcie, HTML i CSS

2. Konfigurowanie środowiska

Pierwsze kroki z Google Maps Platform

Jeśli korzystasz z Google Maps Platform po raz pierwszy, wykonaj te czynności:

Pobierz Node.js

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

Node.js zawiera npm, menedżera pakietów, który musi zainstalować zależności dla tego ćwiczenia z programowania.

Skonfiguruj projekt startowy

Aby zaoszczędzić czas, projekt startowy tego ćwiczenia z programowania będzie zawierał cały powtarzalny kod potrzebny do utworzenia instancji mapy.

Aby zacząć go używać, wykonaj te czynności:

Skopiuj lub pobierz to repozytorium.
W wierszu poleceń przejdź do katalogu /starter, który zawiera podstawową strukturę pliku potrzebnego do ukończenia tego ćwiczenia z programowania.
Zainstaluj zależności od npm, uruchamiając następujące polecenie:

npm install

Uruchom projekt startowy w przeglądarce, korzystając z Webpack Dev Server, uruchamiając następujące polecenie:

npm start

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

Otwórz projekt w IDE-ID i przejdź do katalogu /starter/src.
Otwórz plik app.js.

Całe kodowanie należy wykonać w tej sekcji kodu:

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

Z pozostałym fragmentem kodu nie zostanie wykonana żadna część kodu, która spowoduje załadowanie interfejsu Maps JavaScript API i mapy:

/* 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 wygenerowanym podczas konfigurowania środowiska:

const googleMapsAPIKey = 'YOUR API KEY';

3. Eksportowanie danych z BigQuery

BigQuery oferuje wiele publicznych zbiorów danych, których możesz używać do analizy danych lub eksperymentów.

Użyj narzędzia BigQuery do wyeksportowania publicznie dostępnego zbioru danych, który zawiera dane o lokalizacji dla Citi Bikes w Nowym Jorku, w ramach programu dotyczącego 14 500 rowerów i 900 lokalizacji:

Otwórz Cloud Console.
Kliknij Menu nawigacyjne i 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 wyszukiwania kliknij Zapisz wyniki, a następnie wybierz JSON (plik lokalny), aby wyeksportować zestaw wyników. Nazwij plik stations.json i zapisz go w katalogu /src.

Po zebraniu danych możesz utworzyć swoją pierwszą wizualizację z talii.gl

4. Definiowanie wizualizacji

Talia to rozwiązanie typu open source do wizualizacji danych, które wykorzystuje WebGL do generowania bardzo dużych zbiorów danych w 2D i 3D. Może obsłużyć setki tysięcy punktów danych, a w przypadku optymalizacji jest w stanie obsłużyć ich miliony.

Aby utworzyć wizualizację, potrzebujesz 2 klas – jednej i wielu warstw wizualizacji.GoogleMapsOverlay

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

Zaimportuj klasę ScatterplotLayer z talii.gl' dodając u góry strony app.js ten element:

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

Wybierz właściwości warstwy i wybierz spośród 2 rodzajów właściwości dostępnych w warstwie z informacjami rozproszonymi.

Właściwości setera określają wizualizację danych potrzebnych do wyrenderowania, np. pozycję i promień punktów danych. Właściwości stylu pozwalają dostosować styl wizualizacji.

Oto zestawienie właściwości używanych w poniższym fragmencie kodu:

id umożliwia mechanizmowi renderowania rozpoznawanie warstw z różnych powodów, takich jak ponowne renderowania czy inne aktualizacje wizualizacji. Wszystkie warstwyTor.gl wymagają unikalnego identyfikatora, który przypisujesz.
data określa źródło danych wizualizacji. Ustaw w nim wartość ‘./stations.json' aby użyć zbioru danych wyeksportowanego z BigQuery.
getPosition pobiera pozycję źródła danych ze źródła. Zauważ, że wartość właściwości jest funkcją. Terra.gl używa jej do iterowania każdego wiersza zbioru danych. Funkcja informuje mechanizm renderowania, jak uzyskać szerokość i długość geograficzną 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 podana w polu 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), który określa rozmiar punktów danych na podstawie pojemności poszczególnych stacji.
stroked określa, czy wyrenderowane punkty danych mają kreski na zewnętrznych krawędziach.
getFillColor ustawia kolor wypełnienia każdego punktu danych jako kod koloru RGB.
getLineColor ustawia kolor kreski 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ę,Tor.gl automatycznie zmienia rozmiar punktów danych, aby wizualizacja była wyraźnie widoczna na mapie. Ta właściwość pozwala kontrolować zakres zmiany rozmiaru.
radiusMaxPixels ustawia maksymalną szerokość pikseli 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 wystąpienie klasy ScatterplotLayer.com:

const scatterplotLayer = new ScatterplotLayer(layerOptions);

Gdy wypełnisz tę sekcję, Twój 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. Stosowanie wizualizacji na mapie

Teraz możesz zastosować swoje wystąpienie ScatterplotLayer na mapie za pomocą klasy GoogleMapsOverlay, która korzysta z interfejsu API JavaScript JavaScript Map Google OverlayView, aby umieścić kontekst WebGL na mapie.

Po wykonaniu tych czynności możesz przekazać dowolne warstwy wizualizacji z padu Terra.gl&#39 do GoogleMapsOverlay, co spowoduje wyrenderowanie warstwy i zsynchronizowanie jej z mapą.

Aby dodać do swojej mapy obiekt ScatterplotLayer, wykonaj następujące czynności:

Importowanie klasy GoogleMapsOverlay z taras.gl&#39

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

Utwórz instancję klasy GoogleMapsOverlay i przekaż mu utworzoną wcześniej instancję scatterplotLayer we właściwości layers obiektu:

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

Zastosuj nakładkę na mapie:

 googleMapsOverlay.setMap(map);

Gdy wypełnisz tę sekcję, Twój 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, w której możesz zobaczyć świetną wizualizację danych wszystkich stacji Citi Bike w Nowym Jorku.

6. Gratulacje

Gratulacje! Dzięki Google Maps Platform i taras.gl udało Ci się wygenerować dużo danych dotyczących Nowego Miasta Citi Bikes.

Więcej informacji

Interfejs Maps JavaScript API zapewnia dostęp do wszystkich funkcji internetowych Google Maps Platform. Aby dowiedzieć się więcej o korzystaniu z Google Maps Platform w internecie, kliknij te linki:

AppSheet.gl oferuje wiele warstw wizualizacji danych, których możesz używać do wyświetlania danych użytkownikom. Aby dowiedzieć się więcej o korzystaniu z talii.gl za pomocą interfejsu Maps JavaScript API, kliknij te linki:

Zgłoś pomyłkę