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 GeoJSON dati su una mappa di Google.

Panoramica

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

Con l'API Maps JavaScript puoi eseguire il markup di una mappa con un varietà di overlay, come indicatori, polilinee, poligoni ecc. Ognuno di questi combinano informazioni sullo stile con dati sulla posizione. La La classe google.maps.Data è un container per dati geospaziali arbitrari. Invece di aggiungere questi overlay, puoi utilizzare il livello dati per aggiungere dati geografici alla tua mappa. Se i dati contengono geometrie, come punti, linee o poligoni, l'API li renderizza per impostazione predefinita come indicatori, polilinee e poligoni. Puoi modificare lo stile di queste caratteristiche come faresti con un normale overlay oppure e applicare regole di stile basate su altre proprietà contenute nel set di dati.

Il corso google.maps.Data ti consente di:

  • Disegna poligoni sulla mappa.
  • Aggiungi dati GeoJSON alla mappa.
    GeoJSON è uno standard per i dati geospaziali su internet. La La classe Data segue la struttura di GeoJSON nella rappresentazione dei dati e semplifica la visualizzazione dei dati GeoJSON. Usa il metodo loadGeoJson() per importare facilmente dati GeoJSON e punti di visualizzazione, stringhe di linee e poligoni.
  • Usa google.maps.Data per modellare dati arbitrari.
    Alla maggior parte delle entità del mondo reale sono associate altre proprietà. Per Ad esempio, i negozi hanno orari di apertura, le strade hanno la velocità del traffico e ogni ragazza Guida alla vendita di biscotti. Con google.maps.Data, puoi modellare di queste proprietà e definire lo stile dei dati di conseguenza.
  • Scegliere come vengono rappresentati i dati e modificare la tua mente al volo.
    Il livello dati ti consente di prendere decisioni sulla visualizzazione per interagire con i tuoi dati. Ad esempio, quando guardi una mappa di comodità puoi scegliere di visualizzare solo quelli che vendono il trasporto pubblico ticket di assistenza.

Disegnare un poligono

La Data.Polygon gestisce l'avvolgimento dei poligoni al posto tuo. Puoi passargli un array di uno o più anelli lineari, definiti come coordinate di latitudine/longitudine. Il primo anello lineare definisce il confine esterno del poligono. Se passi più di una linea l'anello, il secondo e gli anelli lineari successivi sono usati per definire i percorsi interni (buchi) nel poligono.

Nell'esempio seguente viene creato 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 dati puoi aggiungere dati GeoJSON alle una mappa di Google con una sola riga di codice.

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

Ogni mappa ha un elemento map.data che funge da livello per i dati geospaziali arbitrari, tra cui: GeoJSON. Puoi caricare e visualizzare un file GeoJSON richiamando il file loadGeoJSON() dell'oggetto data. L'esempio di seguito mostra come aggiungere una mappa e caricarla 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 copia o modifica questo file mentre provi il livello dati.

Nota: per caricare un file JSON da un altro dominio, quest'ultimo deve avere abilitata la condivisione delle risorse tra origini.

Il testo completo del file può essere visualizzato 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]
          ]
        ]
      }
    }
  ]
}

Applica uno stile ai dati GeoJSON

Utilizza il metodo Data.setStyle() per specificare l'aspetto dei tuoi dati. La Il metodo setStyle() richiede un StyleOptions oggetto letterale o una funzione che calcola lo stile per ciascuna caratteristica.

Regole di stile semplici

Il modo più semplice per applicare uno stile alle caratteristiche è passare un valore letterale oggetto StyleOptions a setStyle(). In questo modo viene impostato un singolo stile per ogni elemento . Tieni presente che ogni tipo di caratteristica è in grado di eseguire il rendering solo di un sottoinsieme dei le opzioni disponibili. Ciò significa che è possibile combinare stili per tipi di caratteristiche in un singolo oggetto letterale. Ad esempio, i seguenti set di snippet sia un icon personalizzato, che influisce solo sulle geometrie dei punti, sia un valore fillColor, che interessa solo i poligoni.

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

Per ulteriori informazioni sulle combinazioni di stile/funzionalità valide, consulta la pagina Stile. Opzioni.

Di seguito è riportato un esempio di impostazione del colore di tratto e riempimento per diverse caratteristiche utilizzando un valore letterale oggetto StyleOptions. Nota che a ogni poligono viene applicato lo stile in modo analogo.

// 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 gli indicatori o polilinee, in genere devi ripetere ogni overlay sulla mappa e impostarne lo stile singolarmente. Con il livello dati puoi impostare regole in modo dichiarativo e verranno applicati all'intero set di dati. Quando se i dati o le regole vengono aggiornati, lo stile verrà applicato automaticamente a ogni caratteristica. Puoi utilizzare le proprietà delle caratteristiche per personalizzarne lo stile.

Ad esempio, il codice riportato di seguito 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 nostri 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
    };
});

Rimuovi stili

Se vuoi rimuovere uno stile applicato, passa un valore letterale oggetto vuoto alla setStyles().

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

Verranno rimossi tutti gli stili personalizzati che hai specificato e le funzionalità vengono visualizzati usando gli stili predefiniti. Se invece vuoi interrompere il rendering imposta la proprietà visible di StyleOptions su false.

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

Sostituisci stili predefiniti

In genere, le regole di stile vengono applicate a tutte le funzionalità nel livello dati. Tuttavia, in alcuni casi potresti voler applicare regole di stile speciali funzionalità specifiche. Ad esempio, per evidenziare un elemento al clic.

Per applicare regole di stile speciali, usa il metodo overrideStyle(). Qualsiasi proprietà che modifichi con il metodo overrideStyle() vengono applicati oltre al stili globali già specificati in setStyle(). Ad esempio, il codice riportato di seguito cambierà il colore di riempimento di un poligono al clic, ma non ne 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 ciascuna funzionalità dipendono dal tipo di elemento. Ad esempio, il rendering fillColor viene eseguito solo su geometrie poligonali, mentre icon verrà visualizzata solo sulla geometria di un punto. Ulteriori informazioni sono disponibili nel documentazione di riferimento StyleOptions.

Disponibile su tutte le geometrie

  • clickable: se true, la funzionalità riceve eventi mouse e tocco
  • visible: se true, la funzionalità è visibile.
  • zIndex: tutti gli elementi vengono visualizzati sulla mappa in ordine di zIndex, con valori più alti visualizzati davanti alle caratteristiche con valori più bassi. Gli indicatori vengono sempre visualizzati davanti a stringhe di linee e poligoni.

Disponibile per geometrie di punti

  • cursor: cursore del mouse da mostrare al passaggio del mouse.
  • icon: icona da mostrare per la geometria del punto.
  • shape: definisce la mappa immagine utilizzata per il rilevamento degli hit.
  • title: testo riporto.

Geometrie disponibili on-line

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

Disponibile per geometrie poligonali

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

Aggiungi gestori di eventi

Le funzionalità rispondono a eventi, come mouseup o mousedown. Puoi aggiungere eventi per consentire agli utenti di interagire con i dati sulla mappa. Nella sezione ad esempio, aggiungiamo un evento mouseover, che mostra informazioni sulla caratteristica 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 livello dati

I seguenti eventi sono comuni a tutte le caratteristiche, indipendentemente dalla loro geometria tipo:

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

Ulteriori informazioni su questi eventi sono disponibili nella documentazione di riferimento per la classe google.maps.data.

Cambia aspetto in modo dinamico

Puoi impostare lo stile del livello dati passando una funzione che calcola il lo stile di ogni caratteristica al metodo google.maps.data.setStyle(). Questo verrà richiamata ogni volta che le proprietà di una caratteristica vengono aggiornate.

Nell'esempio seguente, aggiungiamo un listener di eventi per l'evento click che aggiorna la proprietà isColorful della funzionalità. Lo stile delle caratteristiche è stato aggiornato in 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();
});