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 dati GeoJSON su una mappa 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 una serie di overlay, quali indicatori, polilinee, poligoni e così via. Ognuna di queste annotazioni combina informazioni sullo stile con 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 i dati contengono geometrie, come punti, linee o poligoni, l'API li renderizza per impostazione predefinita come indicatori, polilinee e poligoni. Puoi definire questi elementi come faresti con un normale overlay 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 mappa.
GeoJSON è uno standard per i dati geospaziali su internet. La classeDatasegue la struttura di GeoJSON nella rappresentazione dei dati e semplifica la visualizzazione dei dati GeoJSON. Utilizza il metodoloadGeoJson()per importare facilmente dati GeoJSON e visualizzare punti, stringhe di linee e poligoni. - Usa
google.maps.Dataper modellare dati arbitrari.
Alla maggior parte delle entità del mondo reale sono associate altre proprietà. Ad esempio, i negozi hanno orari di apertura, le strade hanno una velocità del traffico e ogni compagnia di guide per le ragazze ha un manto erboso che vende biscotti. Congoogle.maps.Data, puoi modellare queste proprietà e applicare uno stile ai dati di conseguenza. - Scegli come vengono rappresentati i tuoi dati e cambia
rapidamente idea.
Il livello dati ti consente di prendere decisioni sulla visualizzazione e l'interazione con i dati. Ad esempio, quando esamini una mappa di minimarket, potresti scegliere di visualizzare solo i negozi che vendono biglietti per il trasporto pubblico.
Disegnare un poligono
La classe Data.Polygon gestisce l'avvolgimento del poligono per te. 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 un anello lineare, il secondo e gli anelli lineari 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 }, // 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;
Carica GeoJSON
GeoJSON è uno standard comune per la condivisione di dati geospaziali su internet. È leggero e facilmente leggibile, perciò ideale per la condivisione e la collaborazione. Con 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 dati per i 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
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 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 dati.
Nota: per caricare un file json da un altro dominio, quest'ultimo deve aver attivato la condivisione delle risorse tra origini.
Di seguito è possibile visualizzare il testo completo del file espandendo la piccola freccia accanto alla parola 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. Il metodo setStyle() richiede un valore letterale dell'oggetto StyleOptions o una funzione che calcola lo stile per ogni 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 verrà impostato un singolo stile per ogni funzionalità nella raccolta. Tieni presente che ogni tipo di caratteristica è in grado di eseguire il rendering solo di un sottoinsieme delle opzioni disponibili. Ciò significa che è possibile combinare stili per
diversi tipi di caratteristiche in un singolo oggetto letterale. Ad esempio, lo snippet riportato di seguito imposta un icon personalizzato, che influisce solo sulle geometrie dei punti, e fillColor, che interessa solo i poligoni.
map.data.setStyle({
icon: '//example.com/path/to/image.png',
fillColor: 'green'
});
Puoi trovare ulteriori informazioni sulle combinazioni di stile/funzionalità valide in Opzioni di stile.
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 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, di solito devi ripetere ogni overlay sulla mappa e impostare lo stile uno per uno. Con il livello dati, puoi impostare le regole in modo dichiarativo, che verranno applicate all'intero set di dati. Quando i dati o le regole vengono aggiornati, lo stile viene 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 in 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
};
});
Rimuovi stili
Se vuoi rimuovere uno stile applicato, passa un valore 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 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});
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 a caratteristiche specifiche. Ad esempio, per evidenziare un elemento al clic.
Per applicare regole di stile speciali, usa il metodo overrideStyle(). Tutte le proprietà
modificate con il metodo overrideStyle() vengono applicate oltre agli
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 imposterà altri
stile.
// 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 verrà eseguito solo su geometrie poligonali, mentre icon
apparirà solo su una geometria di punti. Ulteriori informazioni sono disponibili nella documentazione di riferimento per StyleOptions.
Disponibile su tutte le geometrie
clickable: setrue, la funzionalità riceve eventi mouse e toccovisible: setrue, la funzionalità è visibile.zIndex: tutte le funzionalità vengono visualizzate sulla mappa in base al rispettivozIndex, con i valori più alti vengono visualizzati davanti agli elementi 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 dei 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 dei colori con nome esteso.fillOpacity: l'opacità di riempimento tra0.0e1.0.strokeColor: il colore del tratto. Sono supportati tutti i colori CSS3, ad eccezione dei 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 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 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 di geometria:
addfeatureclickdblclickmousedownmouseoutmouseovermouseupremovefeatureremovepropertyrightclicksetgeometrysetproperty
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 lo stile di ogni caratteristica al metodo google.maps.data.setStyle(). Questa
funzione viene chiamata ogni volta che vengono aggiornate le proprietà di una caratteristica.
Nell'esempio riportato di seguito, 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 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();
});