Questa pagina è stata tradotta dall'API Cloud Translation.

Visualizzare i dati con Google Maps Platform e deck.gl

1. Prima di iniziare

Questo codelab insegna a creare una visualizzazione dei dati geospaziali ad alto volume utilizzando l'API Maps JavaScript e deck.gl, un framework open source con accelerazione WebGL per la visualizzazione dei dati.

Prerequisiti

In questo lab proverai a:

Integra Google Maps Platform con deck.gl.
Importa un set di dati in una mappa da BigQuery.
Definisci i punti dati sulla mappa.

Che cosa ti serve

Un Account Google
Un editor di testo o un IDE di tua scelta
Conoscenza di base di JavaScript, HTML e CSS

2. Configura l'ambiente

Inizia a utilizzare Google Maps Platform

Se non hai mai utilizzato Google Maps Platform, procedi nel seguente modo:

Scarica Node.js

Se non lo hai già fatto, vai a https://nodejs.org/ e scarica e installa il runtime Node.js sul tuo computer.

Node.js include npm, un gestore di pacchetti che deve installare le dipendenze per questo codelab.

Configurare il progetto iniziale

Per farti risparmiare tempo, il progetto iniziale di questo codelab include tutto il codice boilerplate di cui hai bisogno per creare un'istanza di una mappa.

Per iniziare, procedi nel seguente modo:

Clona o scarica questo repository.
Dalla riga di comando, vai alla directory /starter, che contiene la struttura di base del file necessaria per completare questo codelab.
Installa le dipendenze da npm eseguendo questo comando:

npm install

Esegui il progetto iniziale nel browser con Webpack Dev Server eseguendo questo comando:

npm start

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

Apri il progetto nell'IDE e vai alla directory /starter/src.
Apri il file app.js.

Eseguirai tutte le operazioni di programmazione in questa sezione del codice del file:

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

Non intervieni con il resto del codice nel file, che carica l'API Maps JavaScript e la mappa:

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

Sostituisci YOUR API KEY con la chiave API effettiva, generata al momento della configurazione dell'ambiente:

const googleMapsAPIKey = 'YOUR API KEY';

3. Esportare i dati da BigQuery

BigQuery offre numerosi set di dati pubblici che puoi utilizzare a scopo di analisi dei dati o a scopo sperimentale.

Utilizza BigQuery per esportare un set di dati disponibile pubblicamente che include dati sulla posizione di Citi Bike di New York, un programma di bike sharing con 14.500 biciclette e 900 località, seguendo questi passaggi:

Vai a Cloud Console.
Fai clic su Menu di navigazione > BigQuery.
Nell'Editor query, inserisci la query seguente e fai clic su Esegui.

SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`

Al termine della query, fai clic su Salva risultati, quindi seleziona JSON (file locale) per esportare il set di risultati. Assegna al file il nome stations.json e salvalo nella directory /src.

Ora che hai ottenuto i tuoi dati, puoi creare la tua prima visualizzazione con deck.gl.

4. Definisci la visualizzazione

deck.gl è un framework di visualizzazione di dati open source che utilizza WebGL per produrre rendering 2D e 3D ad alta risoluzione di set di dati estremamente grandi. Può gestire centinaia di migliaia di punti dati e, se ottimizzato, ne può gestire anche milioni.

Per creare una visualizzazione, hai bisogno di due classi: GoogleMapsOverlay e una dei molti livelli di visualizzazione di deck.gl.

Per iniziare, crea un'istanza di ScatterplotLayer, che visualizza i punti dati come cerchi sulla mappa:

Importa la classe ScatterplotLayer deck.gl's aggiungendo quanto segue alla parte superiore di app.js:

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

Imposta le proprietà del livello scegliendo tra i due tipi di proprietà disponibili per il livello a dispersione di deck.gl's.

Le proprietà del selettore offrono la visualizzazione delle informazioni necessarie per il rendering, come la posizione e il raggio dei punti dati. Le proprietà dello stile consentono di personalizzare lo stile della visualizzazione.

Di seguito è riportata un'analisi dettagliata delle proprietà che utilizzi nel seguente snippet di codice:

id consente al renderer di identificare livelli per vari motivi, tra cui modifiche di colori e altri aggiornamenti alla visualizzazione. Tutti i livelli deck.gl richiedono un ID univoco da assegnare.
data specifica l'origine dati della visualizzazione. Impostala su ‘./stations.json' per utilizzare il set di dati esportato da BigQuery.
getPosition recupera la posizione di ciascun oggetto dall'origine dati. Nota che il valore della proprietà è una funzione. deck.gl utilizza la funzione per eseguire l'iterazione su ogni riga del set di dati. La funzione comunica al renderer come accedere alla latitudine e longitudine del punto dati in ogni riga. In questo set di dati, i dati in ogni riga sono un oggetto JSON con la posizione impostata nelle proprietà della latitudine e della longitudine, quindi la funzione che fornisci a getPosition è pari a d => [parseFloat(d.longitude), parseFloat(d.latitude)].
getRadius definisce il raggio di ogni oggetto in metri. In questo caso, il raggio è impostato su d => parseInt(d.capacity), pertanto le dimensioni dei punti dati si basano sulla capacità di ciascuna stazione.
stroked imposta se i punti dati sottoposti a rendering hanno un tratto sui bordi esterni.
getFillColor imposta il colore di riempimento di ogni punto dati come codice colore RGB.
getLineColor imposta il colore del tratto di ciascun punto dati come codice colore RGB.
radiusMinPixels imposta la larghezza minima dei pixel per ogni punto dati. A mano a mano che gli utenti aumentano o diminuiscono lo zoom, deck.gl ridimensiona automaticamente la scala dei punti dati per mantenere chiaramente la visualizzazione visibile sulla mappa. Questa proprietà ti consente di controllare in che misura avviene il ridimensionamento.
radiusMaxPixels imposta la larghezza massima in pixel per ogni punto dati.

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

Crea un'istanza della classe ScatterplotLayer deck.gl's:

const scatterplotLayer = new ScatterplotLayer(layerOptions);

Una volta completata questa sezione, il tuo codice sarà simile al seguente:

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. Applica la visualizzazione alla mappa

Ora puoi applicare la tua istanza di ScatterplotLayer alla mappa con la classe GoogleMapsOverlay, che utilizza l'API Maps JavaScript API OverlayView per inserire un contesto WebGL sopra la mappa.

Una volta attivata, puoi passare uno qualsiasi dei livelli di visualizzazione di deck.gl&s a GoogleMapsOverlay, che visualizza il livello e lo sincronizza con la mappa.

Per applicare il ScatterplotLayer alla mappa, procedi nel seguente modo:

Importa la classe GoogleMapsOverlay di deck.gl's:

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

Crea un'istanza della classe GoogleMapsOverlay e trasmetti l'istanza scatterplotLayer creata in precedenza nella proprietà layers di un oggetto:

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

Applica l'overlay alla mappa:

 googleMapsOverlay.setMap(map);

Una volta completata questa sezione, il tuo codice sarà simile al seguente:

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

Torna al tuo browser, dove dovresti vedere una fantastica visualizzazione dei dati di tutte le stazioni di Citi Bike a New York.

6. Complimenti

Complimenti! Hai prodotto una visualizzazione dei dati ad alto volume dei dati di Citi Bike di New York City con Google Maps Platform e deck.gl.

Scopri di più

L'API Maps JavaScript ti consente di accedere a tutto ciò che Google Maps Platform offre per il Web. Scopri di più sull'utilizzo di Google Maps Platform sul Web controllando questi link:

deck.gl offre numerosi livelli di visualizzazione dei dati utilizzabili per mostrare i dati agli utenti. Scopri di più sull'utilizzo di deck.gl con l'API Maps JavaScript consultando questi link: