Aggiungi un set di dati a una mappa

Seleziona la piattaforma: Android iOS JavaScript

La FeatureStyleFunction, è il momento in cui definisci la logica per applicare uno stile selettivo alle caratteristiche in un set di dati. it restituisce FeatureStyleOptions in base a questa logica. Se non sono necessarie logiche di stile, puoi usare FeatureStyleOptions per impostare direttamente gli stili. Questa pagina mostra come aggiungere un set di dati a una mappa e e applicare lo stile.

Prerequisiti

Prima di procedere, devi avere un ID mappa, 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 che stai con:

  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 del set di dati.
  3. Fai clic sulla scheda Anteprima.
  4. Scorri fino a AGGIUNGI STILE MAPPA e fai clic.
    Screenshot del pulsante AGGIUNGI STILE MAPPA.
  5. Fai clic sulle caselle di controllo degli Stili di mappa da associare, quindi fai clic su SALVA.

Usa regole di stile semplici

Il modo più semplice per applicare uno stile alle caratteristiche è passare un FeatureStyleOptions per definire come colore, opacità e spessore della linea. Applica stile delle caratteristiche direttamente sul livello delle caratteristiche del set di dati oppure puoi utilizzarle insieme a FeatureStyleFunction.

TypeScript

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

JavaScript

const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};

index.js

Utilizzare regole di stile dichiarative

Utilizza FeatureStyleFunction per impostare le regole di stile in modo dichiarativo e applicarle nell'intero set di dati. Applica FeatureStyleOptions a un elemento in base a i valori degli attributi del set di dati. Puoi anche restituire null dal tuo stile delle caratteristiche , ad esempio se vuoi che un sottoinsieme di caratteristiche resti invisibile. Questo un esempio mostra una funzione di stile che colora un insieme di punti in base a dati attributi:

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; 
    }
}
index.ts

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

index.js

Applica lo stile al livello delle caratteristiche del set di dati

Per applicare gli stili nella funzione di stile delle caratteristiche:

  1. Ottieni il livello delle caratteristiche del set di dati chiamando map.getDatasetFeatureLayer(), passando l'ID del set di dati.
  2. Applica lo stile impostando le opzioni di stile delle caratteristiche (ad es. styleOptions) o funzione (ad es. setStyle) sul livello del set di dati.

TypeScript

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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

index.js

Rimuovere 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 delle caratteristiche, ad esempio se vuoi che un sottoinsieme di caratteristiche resti invisibile.

Aggiungi testo dell'attribuzione

La mappa deve mostrare le attribuzioni richieste quando viene visualizzata su Google Maps. Il testo dell'attribuzione non deve oscurare o interferire con la Logo Google.

Un modo per aggiungere un testo di attribuzione consiste nell'utilizzare i controlli personalizzati. per posizionare codice HTML arbitrario in posizioni standard sulla mappa. Il seguente codice un esempio 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;
}
index.ts

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

index.js

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);
index.ts

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);
index.js