Il livello dati di Google Maps fornisce un contenitore per i 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 di DevBytes per ulteriori informazioni sul livello dati.
Con l'API Maps JavaScript puoi eseguire il markup di una mappa con una serie di overlay, ad esempio indicatori, polilinee, poligoni e così via. Ognuna di queste annotazioni combina le informazioni sugli stili con i dati sulla posizione. La classe google.maps.Data è un container per dati geospaziali arbitrari. Anziché aggiungere questi overlay, puoi utilizzare il livello dati per aggiungere dati geografici arbitrari alla mappa. Se questi dati contengono geometrie, come punti, linee o poligoni, l'API li esegue per impostazione predefinita come indicatori, polilinee e poligoni. Puoi applicare uno stile a queste funzionalità come un normale overlay o applicare regole di stile in base ad altre proprietà contenute nel set di dati.
Il corso google.maps.Data ti consente di:
- Disegnare poligoni sulla mappa.
- Aggiungi dati GeoJSON alla mappa.
GeoJSON è uno standard per i dati geospaziali su internet. La classeDatasegue la struttura di GeoJSON nella sua rappresentazione dei dati e semplifica la visualizzazione dei dati GeoJSON. Utilizza il metodoloadGeoJson()per importare facilmente i dati GeoJSON e visualizzare punti, stringhe di linee e poligoni. - Utilizza
google.maps.Dataper modellare dati arbitrari.
Alla maggior parte delle entità del mondo reale sono associate altre proprietà. Ad esempio, i negozi hanno gli orari di apertura, le strade hanno un traffico veloce e ogni compagnia di Girl Guide ha un manto erboso che vende biscotti. Congoogle.maps.Data, puoi modellare queste proprietà e definire i dati di conseguenza. - Scegli come rappresentare i tuoi dati e cambia
idea al volo.
Il livello dati ti consente di prendere decisioni in merito alla visualizzazione e all'interazione dei tuoi dati. Ad esempio, quando esamini una mappa di minimarket, potresti scegliere di visualizzare solo i negozi che vendono biglietti del trasporto pubblico.
Disegnare un poligono
La classe Data.Polygon
gestisce l'avvolgimento dei poligoni per te. Puoi passare 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 quelli successivi vengono utilizzati 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;
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 },
{ lat: -35.364, lng: 153.207 },
{ lat: -35.364, lng: 158.207 },
{ 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;
Carica GeoJSON
GeoJSON è uno standard comune per la condivisione dei dati geospaziali su internet. È leggero e facilmente leggibile, quindi ideale per la condivisione e la collaborazione. Con il livello Dati, puoi aggiungere dati GeoJSON a una mappa Google utilizzando un'unica riga di codice.
map.data.loadGeoJson('google.json');
Ogni mappa ha un oggetto map.data, che agisce come livello 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;
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;
Prova Samples
GeoJSON di esempio
La maggior parte degli esempi in questa pagina utilizza un file GeoJSON comune. Questo file definisce i sei caratteri in "Google" come poligoni sull'Australia. Copia o modifica questo file quando testi il livello dati.
Nota: per caricare un file json da un altro dominio, questo deve aver attivato 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 stili ai dati GeoJSON
Utilizza il metodo Data.setStyle() per specificare l'aspetto dei dati. Il metodo setStyle() utilizza un valore letterale oggetto StyleOptions o una funzione che calcola lo stile per ogni caratteristica.
Regole di stile semplici
Il modo più semplice per definire gli elementi è passare un valore letterale oggetto StyleOptions
a setStyle(). Verrà impostato un singolo stile per ogni elemento nella 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 caratteristiche in un singolo valore letterale oggetto. Ad esempio, lo snippet riportato di seguito imposta sia un elemento icon personalizzato, che interessa solo le geometrie dei punti, sia un valore fillColor, che interessa solo i poligoni.
map.data.setStyle({
icon: '//example.com/path/to/image.png',
fillColor: 'green'
});
Ulteriori informazioni sulle combinazioni di stile/funzionalità valide sono disponibili in Opzioni di stile.
Di seguito è riportato un esempio di impostazione del colore di tratto e riempimento per diverse funzionalità utilizzando un valore letterale oggetto StyleOptions. Tieni presente che lo stile
di ogni poligono è lo stesso.
// 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, devi ripetere ogni overlay sulla mappa e impostarne lo stile singolarmente. Con il livello dati, puoi impostare regole in modo dichiarativo e queste verranno applicate all'intero set di dati. Quando vengono aggiornati i dati o le regole, lo stile viene applicato automaticamente a ogni elemento. 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
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 eventuali stili applicati, passa un valore letterale oggetto vuoto al metodo setStyles().
// Remove custom styles.
map.data.setStyle({});
Tutti gli stili personalizzati che hai specificato verranno rimossi e le funzionalità verranno visualizzate utilizzando gli stili predefiniti. Se invece vuoi non eseguire più il rendering
delle funzionalità, imposta la proprietà visible di StyleOptions su false.
// Hide the Data layer.
map.data.setStyle({visible: false});
Esegui l'override degli stili predefiniti
Le regole di stile vengono generalmente applicate a tutti gli elementi nel livello dati. Tuttavia, ci sono casi in cui si desidera applicare regole di stile speciali a caratteristiche specifiche. Ad esempio, come modo per evidenziare una funzionalità quando viene fatto clic.
Per applicare regole di stile speciali, usa il metodo overrideStyle(). Qualsiasi proprietà
modificata con il metodo overrideStyle() viene applicata 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'});
});
Richiama il metodo revertStyle() per rimuovere tutte le sostituzioni di stile.
Opzioni per lo stile
Le opzioni disponibili per definire ogni elemento dipendono dal tipo di elemento.
Ad esempio, fillColor verrà visualizzato solo per le geometrie dei poligoni, mentre icon verrà visualizzato solo per i punti geometrici. Ulteriori informazioni sono disponibili nella documentazione di riferimento per StyleOptions.
Disponibile in tutte le geometrie
clickable: setrue, la funzionalità riceve eventi di tocco e mousevisible: setrue, l'elemento è visibile.zIndex: tutti gli elementi vengono visualizzati sulla mappa in ordine dizIndex; i valori più alti vengono visualizzati davanti agli elementi con valori più bassi. Gli indicatori vengono sempre visualizzati prima delle stringhe di linee e dei poligoni.
Disponibile per geometrie dei 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 immagine utilizzata per il rilevamento degli hit.title: testo al passaggio del mouse.
Geometrie disponibili on line
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: lo spessore del tratto in pixel.
Disponibile per geometrie dei poligoni
fillColor: il colore di riempimento. Sono supportati tutti i colori CSS3, ad eccezione dei colori denominati estesi.fillOpacity: l'opacità di riempimento compresa tra0.0e1.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: lo spessore del tratto in pixel.
Aggiungi gestori di eventi
Le funzionalità rispondono agli eventi, come mouseup o mousedown. Puoi aggiungere listener di eventi per consentire agli utenti di interagire con i dati sulla mappa. Nell'esempio riportato di seguito, aggiungiamo un evento mouseover, 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 livello dati
I seguenti eventi sono comuni a tutte le caratteristiche, indipendentemente dal tipo geometrico:
addfeatureclickdblclickmousedownmouseoutmouseovermouseupremovefeatureremovepropertyrightclicksetgeometrysetproperty
Ulteriori informazioni su questi eventi sono disponibili nella documentazione di riferimento per la classe google.maps.data.
Modifica l'aspetto in modo dinamico
Puoi impostare lo stile del livello dati passando una funzione che calcola lo stile di ogni caratteristica al metodo google.maps.data.setStyle(). Questa funzione viene richiamata 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 delle caratteristiche 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();
});