Livello dati

Seleziona la piattaforma: Android iOS JavaScript

Il livello Dati di Google Maps fornisce un contenitore per dati geospaziali arbitrari. Puoi utilizzare il livello dati per archiviare i tuoi dati personalizzati o per visualizzare i dati GeoJSON su una mappa di Google.

Panoramica

Guarda questo video DevBytes per scoprire di più sul livello dati.

Con l'API JavaScript di Maps puoi eseguire il markup di una mappa con una varietà di overlay, come indicatori, polilinee, poligoni e così via. Ogni annotazione combina informazioni sugli stili con dati sulla posizione. La classe google.maps.Data è un contenitore per dati geospaziali arbitrari. Anziché aggiungere questi overlay, puoi utilizzare il livello Dati per aggiungere alla mappa dati geografici arbitrari. Se i dati contengono geometrie, come punti, linee o poligoni, per impostazione predefinita l'API li mostrerà come indicatori, polilinee e poligoni. Puoi applicare uno stile a queste funzionalità come faresti con un normale overlay oppure applicare regole di stile in base ad altre proprietà contenute nel tuo set di dati.

La classe google.maps.Data ti consente di:

  • Disegna poligoni sulla mappa.
  • Aggiungi dati GeoJSON alla tua mappa.
    GeoJSON è uno standard per i dati geospaziali su internet. La classe Data segue la struttura di GeoJSON nella rappresentazione dei dati e consente di visualizzare facilmente i dati GeoJSON. Utilizza il metodo loadGeoJson() per importare facilmente i dati GeoJSON e visualizzare punti, linee e poligoni.
  • Utilizza google.maps.Data per modellare dati arbitrari.
    La maggior parte delle entità reali ha altre proprietà associate. Ad esempio, i negozi hanno orari di apertura, le strade hanno una velocità di traffico e ogni gruppo di Guida storiche ha un territorio per la vendita di biscotti. Con google.maps.Data, puoi modellare queste proprietà e applicare stili ai dati di conseguenza.
  • Scegli come rappresentare i dati e ripensaci al volo.
    Il livello di dati ti consente di prendere decisioni sulla visualizzazione e sull'interazione dei dati. Ad esempio, quando esamini una mappa di minimarket, potresti scegliere di visualizzare solo i negozi che vendono biglietti per i trasporti pubblici.

Disegna un poligono

La classe Data.Polygon gestisce il percorso a spirale del poligono. Puoi passare un array di uno o più cerchi lineari, definiti come coordinate di latitudine/longitudine. Il primo anello lineare definisce il confine esterno del poligono. Se specifichi più di un anello lineare, il secondo anello e quelli successivi vengono utilizzati per definire i percorsi interni (buchi) nel poligono.

L'esempio seguente crea un poligono rettangolare con due fori:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

Carica GeoJSON

GeoJSON è uno standard comune per la condivisione di dati geospaziali su internet. È leggero e facilmente leggibile, il che lo rende ideale per la condivisione e la collaborazione. Con il livello di dati, puoi aggiungere dati GeoJSON a una mappa di Google in una sola riga di codice.

map.data.loadGeoJson('google.json');

Ogni mappa ha un oggetto map.data che funge da livello di dati per dati geospaziali arbitrari, tra cui GeoJSON. Puoi caricare e visualizzare un file GeoJSON chiamando il metodo loadGeoJSON() dell'oggetto data. L'esempio seguente mostra come aggiungere una mappa e caricare dati GeoJSON esterni.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
Visualizza esempio

Prova Sample

GeoJSON di esempio

La maggior parte degli esempi in questa pagina utilizza un file GeoJSON comune. Questo file definisce i sei caratteri di "Google" come poligoni sull'Australia. Non esitare a copiare o modificare questo file durante il test del livello di dati.

Nota: per caricare un file JSON da un altro dominio, questo deve avere attivato la condivisione di risorse cross-origin.

Il testo completo del file è visibile di seguito espandendo la piccola freccia accanto alle parole google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

Dati GeoJSON dello stile

Utilizza il metodo Data.setStyle() per specificare l'aspetto dei dati. Il metodo setStyle() accetta un valore letterale dell'oggetto StyleOptions o una funzione che calcola lo stile per ogni funzionalità.

Regole di stile semplici

Il modo più semplice per applicare uno stile agli elementi è passare un valore letterale dell'oggetto StyleOptions a setStyle(). Verrà impostato un unico stile per ogni elemento della raccolta. Tieni presente che ogni tipo di funzionalità è in grado di visualizzare solo un sottoinsieme delle opzioni disponibili. Ciò significa che è possibile combinare stili per diversi tipi di elementi in un singolo letterale oggetto. Ad esempio, lo snippet riportato di seguito imposta sia un icon personalizzato, che influisce solo sulle geometrie dei punti, sia fillColor, che influisce solo sui poligoni.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Per ulteriori informazioni sulle combinazioni di stili/funzionalità valide, consulta Opzioni stile.

Di seguito è riportato un esempio di impostazione del colore del tratto e del riempimento per diverse funzionalità utilizzando un valore letterale dell'oggetto StyleOptions. Tieni presente che ogni poligono ha lo stesso stile.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Regole di stile dichiarative

Se vuoi aggiornare lo stile di un numero elevato di overlay, ad esempio indicatori o polilinee, in genere devi eseguire l'iterazione di ogni overlay sulla mappa e impostarne lo stile singolarmente. Con il livello di dati, puoi impostare regole declaratively che verranno applicate all'intero set di dati. Quando vengono aggiornati i dati o le regole, lo stile viene applicato automaticamente a ogni funzionalità. Puoi utilizzare una proprietà di funzionalità per personalizzarne lo stile.

Ad esempio, il codice seguente imposta il colore di ogni carattere nel nostro google.json esaminandone la posizione nel set di caratteri ASCII. In questo caso abbiamo codificato la posizione del carattere insieme ai dati.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Rimuovere gli stili

Se vuoi rimuovere gli stili applicati, passa un literal oggetto vuoto al metodo setStyles().

// Remove custom styles.
map.data.setStyle({});

Verranno rimossi tutti gli stili personalizzati che hai specificato e le funzionalità verranno visualizzate utilizzando gli stili predefiniti. Se invece non vuoi più visualizzare le funzionalità, imposta la proprietà visible di StyleOptions su false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Sostituire gli stili predefiniti

Le regole di stile vengono in genere applicate a ogni elemento del livello di dati. Tuttavia, a volte potresti voler applicare regole di stile speciali a funzionalità specifiche. Ad esempio, per evidenziare una funzionalità al clic.

Per applicare regole di stile speciali, utilizza il metodo overrideStyle(). Le proprietà modificate con il metodo overrideStyle() vengono applicate in aggiunta agli stili globali già specificati in setStyle(). Ad esempio, il codice riportato di seguito modificherà il colore di riempimento di un poligono al clic, ma non imposterà altri stili.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Chiama il metodo revertStyle() per rimuovere tutte le sostituzioni di stile.

Opzioni per lo stile

Le opzioni disponibili per lo stile di ogni elemento dipendono dal tipo di elemento. Ad esempio, fillColor verrà visualizzato solo nelle geometrie poligonali, mentre icon verrà visualizzato solo in una geometria di punti. Ulteriori informazioni sono disponibili nella documentazione di riferimento per StyleOptions.

Disponibile su tutte le geometrie

  • clickable: se true, la funzionalità riceve eventi del mouse e tocco
  • visible: se true, la funzionalità è visibile.
  • zIndex: tutte le funzionalità vengono visualizzate sulla mappa in ordine di zIndex, con i valori più alti visualizzati prima delle funzionalità con valori più bassi. Gli indicatori vengono sempre visualizzati davanti a linee e poligoni.

Disponibile per le geometrie dei punti

  • cursor: cursore del mouse da mostrare al passaggio del mouse.
  • icon: icona da mostrare per la geometria del punto.
  • shape: definisce la mappa di immagini utilizzata per il rilevamento dei hit.
  • title: testo del testo in sovrapposizione.

Disponibile per le geometrie di linea

  • strokeColor: il colore del tratto. Sono supportati tutti i colori CSS3, ad eccezione dei colori con nome estesi.
  • strokeOpacity: l'opacità del tratto compresa tra 0,0 e 1,0.
  • strokeWeight: la larghezza del tratto in pixel.

Disponibile per le geometrie poligonali

  • fillColor: il colore di riempimento. Sono supportati tutti i colori CSS3, ad eccezione dei colori con nome estesi.
  • fillOpacity: l'opacità del riempimento compresa tra 0.0 e 1.0.
  • strokeColor: il colore del tratto. Sono supportati tutti i colori CSS3, ad eccezione dei colori con nome estesi.
  • strokeOpacity: l'opacità del tratto compresa tra 0,0 e 1,0.
  • strokeWeight: la larghezza del tratto in pixel.

Aggiungi gestori di eventi

Le funzionalità rispondono a eventi, ad esempio mouseup o mousedown. Puoi aggiungere ascoltatori di eventi per consentire agli utenti di interagire con i dati sulla mappa. Nell'esempio riportato di seguito, aggiungiamo un evento mouseover che mostra le informazioni sulla funzionalità sotto il cursore del mouse.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Eventi del livello dati

I seguenti eventi sono comuni a tutte le funzionalità, indipendentemente dal tipo di geometria:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Puoi trovare ulteriori informazioni su questi eventi nella documentazione di riferimento per la classe google.maps.data.

Modificare l'aspetto in modo dinamico

Puoi impostare lo stile del livello di dati passando al metodo google.maps.data.setStyle() una funzione che calcola lo stile di ogni elemento. Questa funzione viene chiamata ogni volta che le proprietà di una funzionalità vengono aggiornate.

Nell'esempio seguente, aggiungiamo un listener di eventi per l'evento click che aggiorna la proprietà isColorful della funzionalità. Lo stile della funzionalità viene aggiornato per riflettere la modifica non appena la proprietà viene impostata.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});