Il campo FeatureStyleFunction
è il luogo in cui definisci la logica per definire selettivamente le caratteristiche in un set di dati. Restituisce FeatureStyleOptions in base a questa logica. Se non è richiesta una logica di stile, puoi usare FeatureStyleOptions
per impostare direttamente gli stili. Questa pagina mostra come aggiungere un set di dati a una mappa e applicare uno stile.
Prerequisiti
Prima di procedere, dovresti avere un ID mappa e uno stile di mappa e un ID set di dati.
Associare un ID set di dati a uno stile di mappa
Segui questi passaggi per associare il tuo set di dati allo stile di mappa in uso:
- Nella console Google Cloud, vai alla pagina Set di dati.
- Fai clic sul nome del set di dati. Viene visualizzata la pagina Dettagli del set di dati.
- Fai clic sulla scheda Anteprima.
- Scorri verso il basso e fai clic su AGGIUNGI STILE MAPPA.
- Fai clic sulle caselle di controllo degli stili di mappa da associare, quindi fai clic su SALVA.
Utilizzare regole di stile semplici
Il modo più semplice per applicare uno stile agli elementi è passare un FeatureStyleOptions per definire
gli attributi di stile come colore, opacità e spessore linea. Applica le opzioni di stile delle caratteristiche direttamente a un livello di caratteristiche del set di dati o utilizzale insieme a un FeatureStyleFunction.
TypeScript
const styleOptions = {
strokeColor: 'green',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'green',
fillOpacity: 0.3,
};
JavaScript
const styleOptions = {
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "green",
fillOpacity: 0.3,
};
Utilizzare le regole di stile dichiarative
Utilizza FeatureStyleFunction per impostare regole di stile in modo dichiarativo e applicarle
all'intero set di dati. Applica FeatureStyleOptions a una caratteristica in base
ai valori degli attributi del set di dati. Puoi anche restituire null dalla funzione
Stile degli elementi, ad esempio se vuoi che un sottoinsieme di caratteristiche resti invisibile. Questo esempio mostra una funzione di stile che colora un insieme di punti in base agli attributi dei dati:
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) {
// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
// Apply styles. Fill is primary fur color, stroke is secondary fur color.
switch (furColors) {
case 'Black+':
return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
break;
case 'Cinnamon+':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
break;
case 'Cinnamon+Gray':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
break;
case 'Cinnamon+White':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
break;
case 'Gray+':
return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
break;
case 'Gray+Cinnamon':
return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
break;
case 'Gray+Cinnamon, White':
return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
break;
case 'Gray+White':
return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
break;
default: // Color not defined.
return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
break;
}
}
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) {
// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors =
datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];
// Apply styles. Fill is primary fur color, stroke is secondary fur color.
switch (furColors) {
case "Black+":
return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 };
break;
case "Cinnamon+":
return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 };
break;
case "Cinnamon+Gray":
return /* FeatureStyleOptions */ {
fillColor: "#8b0000",
strokeColor: "gray",
pointRadius: 6,
};
break;
case "Cinnamon+White":
return /* FeatureStyleOptions */ {
fillColor: "#8b0000",
strokeColor: "white",
pointRadius: 6,
};
break;
case "Gray+":
return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 };
break;
case "Gray+Cinnamon":
return /* FeatureStyleOptions */ {
fillColor: "gray",
strokeColor: "#8b0000",
pointRadius: 6,
};
break;
case "Gray+Cinnamon, White":
return /* FeatureStyleOptions */ {
fillColor: "silver",
strokeColor: "#8b0000",
pointRadius: 6,
};
break;
case "Gray+White":
return /* FeatureStyleOptions */ {
fillColor: "gray",
strokeColor: "white",
pointRadius: 6,
};
break;
default: // Color not defined.
return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 };
break;
}
}
Applica lo stile al livello degli elementi del set di dati
Per applicare gli stili nella funzione Stile delle caratteristiche:
- Ottieni il livello delle caratteristiche del set di dati chiamando
map.getDatasetFeatureLayer(), passando l'ID del set di dati. - Applica lo stile impostando le opzioni di stile delle caratteristiche (ad es.
styleOptions) o la funzione (ad es.setStyle) nel livello del set di dati.
TypeScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
JavaScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
Rimuovere gli stili da un livello
Per rimuovere lo stile da un livello, imposta style su null:
featureLayer.style = null;
Puoi anche restituire null dalla funzione Stile degli elementi, ad esempio se vuoi che un sottoinsieme di caratteristiche resti invisibile.
Aggiungi testo di attribuzione
La mappa deve mostrare tutte le attribuzioni richieste quando vengono visualizzati i set di dati caricati su Google Maps. Il testo dell'attribuzione non deve oscurare o interferire con il logo di Google.
Un modo per aggiungere il testo di attribuzione è utilizzare i controlli personalizzati per posizionare codice HTML arbitrario in posizioni standard sulla mappa. Il seguente esempio di codice mostra una funzione che crea in modo programmatico uno di questi controlli personalizzati:
TypeScript
function createAttribution(map) {
const attributionLabel = document.createElement('div');
// Define CSS styles.
attributionLabel.style.backgroundColor = '#fff';
attributionLabel.style.opacity = '0.7';
attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
attributionLabel.style.fontSize = '10px';
attributionLabel.style.padding = '2px';
attributionLabel.style.margin = '2px';
attributionLabel.textContent = 'Data source: NYC Open Data';
return attributionLabel;
}
JavaScript
function createAttribution(map) {
const attributionLabel = document.createElement("div");
// Define CSS styles.
attributionLabel.style.backgroundColor = "#fff";
attributionLabel.style.opacity = "0.7";
attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
attributionLabel.style.fontSize = "10px";
attributionLabel.style.padding = "2px";
attributionLabel.style.margin = "2px";
attributionLabel.textContent = "Data source: NYC Open Data";
return attributionLabel;
}
Una volta definito il controllo, puoi aggiungerlo alla mappa al momento dell'inizializzazione, come mostrato qui:
TypeScript
// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
JavaScript
// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);