Aggiungere un set di dati a una mappa

Seleziona la piattaforma: Android iOS JavaScript

FeatureStyleFunction è dove definisci la logica per applicare lo stile in modo selettivo alle caratteristiche di un set di dati. Restituisce FeatureStyleOptions in base a questa logica. Se non è richiesta una logica di stile, puoi utilizzare FeatureStyleOptions per impostare gli stili direttamente. Questa pagina mostra come aggiungere un set di dati a una mappa e applicare lo stile.

Prerequisiti

Prima di procedere, devi disporre di un ID mappa, uno stile di mappa e un ID set di dati.

• Crea un ID mappa e uno stile di mappa
• Crea e carica un set di dati

Associa un ID set di dati a uno stile di mappa

Sperimentale: questa funzionalità può essere impostata solo per gli stili di mappa chiari. Quando colleghi uno stile di mappa chiaro con questa funzionalità attivata a un ID mappa, i livelli attivati sono disponibili anche per lo stile di mappa scuro.

Per associare il set di dati allo stile di mappa che stai utilizzando:

1. Nella console Google Cloud, vai alla pagina Set di dati.
2. Fai clic sul nome del set di dati. Viene visualizzata la pagina Dettagli set di dati.
3. Fai clic sulla scheda Anteprima.
4. Scorri fino ad AGGIUNGI STILE DI MAPPA e fai clic.
   
5. Fai clic sulle caselle di controllo degli stili di mappa da associare e poi su SALVA.

Attenzione: il rendering di più set di dati su una mappa può influire sulle prestazioni a seconda delle dimensioni e del numero di set di dati.

Utilizza regole di stile semplici

Il modo più semplice per applicare uno stile agli elementi è passare un FeatureStyleOptions per definire attributi di stile come colore, opacità e spessore della linea. Applica le opzioni di stile degli elementi direttamente a un livello degli elementi del set di dati o utilizzale insieme a un FeatureStyleFunction.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.js

Utilizza regole di stile dichiarative

Utilizza FeatureStyleFunction per impostare le 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 di stile degli elementi, ad esempio se vuoi che un sottoinsieme di elementi rimanga invisibile. Questo esempio mostra una funzione di stile che colora un insieme di punti in base agli attributi dei dati:

TypeScript

function setStyle(params: { feature: google.maps.Feature }) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // 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 {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.ts

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

function setStyle(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 {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.js

Applica lo stile al livello degli elementi del set di dati

Per applicare gli stili nella funzione di stile degli elementi:

1. Recupera il livello degli elementi del set di dati chiamando map.getDatasetFeatureLayer() e passando l'ID del set di dati.
2. Applica lo stile impostando le opzioni di stile degli elementi (ad es. styleOptions) o la funzione (ad es. setStyle) sul livello del set di dati.

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

Rimuovi lo stile da un livello

Per rimuovere lo stile da un livello, imposta style su null:

featureLayer.style = null;

Puoi anche restituire null dalla funzione di stile degli elementi, ad esempio se vuoi che un sottoinsieme di elementi rimanga invisibile.

Aggiungi testo dell'attribuzione

La mappa deve mostrare tutte le attribuzioni richieste quando mostri i set di dati caricati su Google Maps. Il testo dell'attribuzione non deve oscurare o interferire con il logo Google.

Un modo per aggiungere il testo dell'attribuzione è utilizzare i controlli personalizzati per inserire codice HTML arbitrario in posizioni standard sulla mappa. I seguenti snippet di codice mostrano l'HTML e il CSS utilizzati per le attribuzioni in questo esempio:

<gmp-map
    center="40.757815, -73.933123"
    zoom="11"
    map-id="5cd2c9ca1cf05670"
    map-type-control="false">
    <div id="attribution" slot="control-block-end-inline-start">
        Data source: NYC Open Data
    </div>
</gmp-map>
index.html

#attribution {
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}
style.css