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

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

• Interfejs Maps JavaScript API
• Podstawy Google Maps Platform: warsztaty z programowaniem JavaScript

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:

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.

Uwaga: te linki prowadzą do dokumentacji i filmów, które możesz wykonać na każdym etapie.

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:

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

npm install

4. 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.

5. Otwórz projekt w IDE-ID i przejdź do katalogu /starter/src.
6. 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);
}

7. 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:

1. Otwórz Cloud Console.
2. Kliknij Menu nawigacyjne i 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`

4. 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:

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

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

2. 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
};

3. 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:

1. Importowanie klasy GoogleMapsOverlay z taras.gl&#39

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

2. 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]
  });

3. 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:

• Dokumentacja Maps JavaScript API
• Podstawy Google Maps Platform: warsztaty z programowaniem JavaScript

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:

• GoogleMapsOverlay Dokumentacja modułu podrzędnego Dec.gl
• Dokumentacja warstwy rozproszonych
• Wersje demonstracyjne Google Maps Platform i shill.gl oraz prezentacje