Livello dati

Seleziona la piattaforma: Android iOS JavaScript

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

Panoramica

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

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

Il corso 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 semplifica la visualizzazione dei dati GeoJSON. Utilizza il metodo loadGeoJson() per importare facilmente i dati GeoJSON e visualizzare punti, stringhe di linee e poligoni.
  • Utilizza google.maps.Data per modellare dati arbitrari.
    La maggior parte delle entità del mondo reale ha altre proprietà associate. Ad esempio, i negozi hanno orari di apertura, le strade hanno limiti di velocità e ogni gruppo di Girl Guide ha un territorio di vendita di biscotti. Con google.maps.Data, puoi modellare queste proprietà e applicare uno stile ai tuoi dati di conseguenza.
  • Scegli come rappresentare i dati e cambia idea al volo.
    Il livello dei dati ti consente di prendere decisioni sulla visualizzazione e sull'interazione dei tuoi dati. Ad esempio, quando guardi una mappa dei negozi di alimentari, potresti scegliere di visualizzare solo quelli che vendono biglietti del trasporto pubblico.

Disegnare un poligono

La classe Data.Polygon gestisce l'avvolgimento dei poligoni per te. Puoi trasmettergli 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 un anello lineare, il secondo e i successivi vengono utilizzati per definire i percorsi interni (fori) 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 dati, puoi aggiungere dati GeoJSON a una mappa Google con 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, incluso 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

async function initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  let innerMap = mapElement.innerMap;

  innerMap.data.loadGeoJson("google.json");
}

initMap();
index.ts

JavaScript

async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    let innerMap = mapElement.innerMap;
    innerMap.data.loadGeoJson("google.json");
}
initMap();
index.js
Visualizza esempio

Prova campione

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 mentre testi il livello dati.

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

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

Stilizzare i dati GeoJSON

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

Regole di stile semplici

Il modo più semplice per applicare uno stile alle funzionalità è passare un letterale oggetto StyleOptions a setStyle(). In questo modo, verrà impostato un unico stile per ogni funzionalità della raccolta. Tieni presente che ogni tipo di funzionalità è in grado di eseguire il rendering solo di un sottoinsieme delle opzioni disponibili. Ciò significa che è possibile combinare stili per diversi tipi di funzionalità in un singolo oggetto letterale. Ad esempio, lo snippet riportato di seguito imposta sia un icon personalizzato, che influisce solo sulle geometrie a 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 di 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. Nota che lo stile di ogni poligono è lo stesso.

TypeScript

async function initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  const innerMap = mapElement.innerMap;

  // Load GeoJSON.
  google.maps.event.addListenerOnce(innerMap, "idle", () => {
    innerMap.data.loadGeoJson("google.json");
  });

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

initMap();
index.ts

JavaScript

async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    const innerMap = mapElement.innerMap;
    // Load GeoJSON.
    google.maps.event.addListenerOnce(innerMap, "idle", () => {
        innerMap.data.loadGeoJson("google.json");
    });
    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: "green",
        strokeWeight: 1,
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Data Layer: Styling</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="-28,137" zoom="4"></gmp-map>
  </body>
</html>
index.html
Visualizza esempio

Prova campione

Regole di stile dichiarative

Se vuoi aggiornare lo stile di un numero elevato di overlay, ad esempio indicatori o polilinee, in genere devi scorrere ogni overlay sulla mappa e impostarne lo stile singolarmente. Con il livello dati, puoi impostare regole in modo dichiarativo e 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 le proprietà di una funzionalità per personalizzarne lo stile.

Ad esempio, il codice riportato di seguito imposta il colore di ogni carattere nel nostro google.json esaminando la sua 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
    };
});

Rimuovere gli stili

Se vuoi rimuovere gli stili applicati, passa un letterale 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ù eseguire il rendering delle 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 funzionalità nel livello 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à che modifichi con il metodo overrideStyle() vengono applicate in aggiunta agli stili globali già specificati in setStyle(). Ad esempio, il codice riportato di seguito modifica il colore di riempimento di un poligono al clic, ma non imposta 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 stile

Le opzioni disponibili per lo stile di ogni funzionalità dipendono dal tipo di funzionalità. Ad esempio, fillColor verrà visualizzato solo sulle geometrie poligonali, mentre icon solo su una geometria puntuale. Per saperne di più, consulta la 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 davanti alle funzionalità con valori più bassi. I marcatori vengono sempre visualizzati davanti alle stringhe di linee e ai poligoni.

Disponibile sulle geometrie a punti

  • cursor: il cursore del mouse da mostrare al passaggio del mouse.
  • icon: Icona da mostrare per la geometria del punto.
  • shape: definisce la mappa delle immagini utilizzata per il rilevamento degli hit.
  • title: testo visualizzato al passaggio del mouse.

Disponibile sulle geometrie delle linee

  • strokeColor: il colore del tratto. Sono supportati tutti i colori CSS3, ad eccezione dei colori denominati 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 denominati 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 denominati estesi.
  • strokeOpacity: l'opacità del tratto compresa tra 0,0 e 1,0.
  • strokeWeight: la larghezza del tratto in pixel.

Aggiungere gestori di eventi

Le funzionalità rispondono a eventi come mouseup o mousedown. Puoi aggiungere listener di eventi per consentire agli utenti di interagire con i dati sulla mappa. Nell'esempio di seguito, aggiungiamo un evento al passaggio del mouse, che mostra 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

Per ulteriori informazioni su questi eventi, consulta la documentazione di riferimento per la classe google.maps.data.

Modificare l'aspetto in modo dinamico

Puoi impostare lo stile del livello dati passando una funzione che calcola lo stile di ogni funzionalità al metodo google.maps.data.setStyle(). Questa funzione verrà 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 viene impostata la proprietà.

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