Questa pagina è stata tradotta dall'API Cloud Translation.

Visualizzare i dati con Google Maps Platform e deck.gl

1. Prima di iniziare

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

Prerequisiti

In questo lab proverai a:

Integra Google Maps Platform con deck.gl.
Importare 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 a 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, segui questi passaggi:

Scarica Node.js

Se non lo hai ancora fatto, vai alla pagina https://nodejs.org/, scarica e installa il runtime Node.js sul computer.

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

Configura il progetto iniziale

Per farti risparmiare tempo, il progetto iniziale per questo codelab include tutto il codice boilerplate necessario 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 dei file necessaria per completare questo codelab.
Installa le dipendenze da npm eseguendo il seguente 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.

In questa sezione del codice del file:

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

Non dovrai fare nulla 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, che hai generato durante la configurazione dell'ambiente:

const googleMapsAPIKey = 'YOUR API KEY';

3. Esportare dati da BigQuery

BigQuery offre molti set di dati pubblici che puoi utilizzare per l'analisi dei dati o a scopo sperimentale.

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

Vai alla console Cloud.
Fai clic sul menu di navigazione > BigQuery.
Nell'editor di query, inserisci la seguente query 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 dati, puoi creare la prima visualizzazione con deck.gl.

4. Definisci la visualizzazione

deck.gl è un framework di visualizzazione 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, anche milioni.

Per creare una visualizzazione, sono necessarie due classi: GoogleMapsOverlay e uno dei numerosi livelli di visualizzazione di deck.gl.

Per iniziare, crea un'istanza di ScatterplotLayer, che esegue il rendering dei punti dati come cerchi sulla mappa:

Importa la classe ScatterplotLayer di deck.gl aggiungendo quanto segue all'inizio 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 scatterplot di deck.gl.

Le proprietà setter forniscono alla visualizzazione le informazioni necessarie per il rendering, come la posizione e il raggio dei punti dati. Le proprietà dello strumento di stile ti consentono di personalizzare lo stile della visualizzazione.

Di seguito è riportata una suddivisione delle proprietà utilizzate nel seguente snippet di codice:

id consente al renderer di identificare i livelli per vari motivi, ad esempio ridisegni e altri aggiornamenti della visualizzazione. Tutti i livelli deck.gl richiedono un ID univoco, che devi assegnare.
data specifica l'origine dati della visualizzazione. Imposta il valore su ‘./stations.json' per utilizzare il set di dati esportato da BigQuery.
getPosition recupera la posizione di ogni oggetto dall'origine dati. Tieni presente che il valore della proprietà è una funzione. deck.gl utilizza la funzione per scorrere ogni riga del set di dati. La funzione indica al renderer come accedere alla latitudine e alla longitudine del punto dati in ogni riga. In questo set di dati, i dati di ogni riga sono un oggetto JSON con la posizione impostata nelle proprietà di latitudine e longitudine, quindi la funzione fornita a getPosition è 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), che determina la dimensione dei punti dati in base alla capacità di ciascuna stazione.
stroked determina se i punti dati visualizzati 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 ogni punto dati come codice colore RGB.
radiusMinPixels imposta la larghezza minima in pixel per ogni punto dati. Man mano che gli utenti aumentano e diminuiscono lo zoom, deck.gl ridimensiona automaticamente la scala dei punti dati per mantenere la visualizzazione chiaramente visibile sulla mappa. Questa proprietà ti consente di controllare la misura in cui si verifica 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 di deck.gl:

const scatterplotLayer = new ScatterplotLayer(layerOptions);

Una volta completata questa sezione, il codice dovrebbe avere questo aspetto:

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 l'istanza ScatterplotLayer alla mappa con la classe GoogleMapsOverlay, che utilizza l'API Maps JavaScript OverlayView per inserire un contesto WebGL sopra la mappa.

Una volta configurato, puoi passare uno qualsiasi dei livelli di visualizzazione di deck.gl a GoogleMapsOverlay, che esegue il rendering del livello e lo sincronizza con la mappa.

Per applicare il tuo ScatterplotLayer alla mappa:

Importa la classe GoogleMapsOverlay di deck.gl:

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

Crea un'istanza della classe GoogleMapsOverlay e trasmettila all'istanza scatterplotLayer che hai creato 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 codice dovrebbe avere questo aspetto:

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 browser, dove dovresti vedere una visualizzazione dei dati fantastica di tutte le stazioni Citi Bike di New York City.

6. Complimenti

Complimenti! Hai prodotto una visualizzazione di dati ad alto volume dei dati di Citi Bike di New York 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ù su come utilizzare Google Maps Platform sul web consultando questi link:

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

Documentazione del sottomodulo deck.glGoogleMapsOverlay
Documenti sul livello a dispersione
Demo di Google Maps Platform e deck.gl e codice sorgente delle demo