Einer Karte ein Dataset hinzufügen

Über die FeatureStyleFunction definieren Sie die Logik, um Elemente in einem Dataset selektiv zu gestalten. Diese Funktion gibt FeatureStyleOptions auf der Grundlage dieser Logik zurück. Wenn eine Stillogik nicht erforderlich ist, können Sie Stile direkt mit FeatureStyleOptions festlegen. Im Folgenden wird beschrieben, wie Sie einer Karte ein Dataset hinzufügen und Stile anwenden.

Voraussetzungen

Bevor Sie fortfahren, sollten Sie eine Karten-ID, einen Kartenstil und eine Dataset-ID haben.

Dataset-ID mit Kartenstil verknüpfen

So verknüpfen Sie Ihr Dataset mit dem verwendeten Kartenstil:

  1. Rufen Sie in der Google Cloud Console die Seite Datasets auf.
  2. Klicken Sie auf den Namen des Datasets. Daraufhin wird die Seite Dataset-Details angezeigt.
  3. Klicken Sie auf den Tab Vorschau.
  4. Scrollen Sie nach unten und klicken Sie auf KARTENSTIL HINZUFÜGEN.
    Screenshot der Schaltfläche KARTENSTIL HINZUFÜGEN.
  5. Kreuzen Sie die Kästchen für die zu verknüpfenden Kartenstile an und klicken Sie dann auf SPEICHERN.
.

Einfache Stilregeln verwenden

Die einfachste Möglichkeit, Elemente zu gestalten, ist die Übergabe von FeatureStyleOptions, um Stilattribute wie Farbe, Deckkraft und Linienstärke zu definieren. Sie können Stiloptionen für Elemente direkt auf eine Elementebene des Datasets anwenden oder sie in Verbindung mit einer FeatureStyleFunction verwenden.

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

Deklarative Stilregeln verwenden

Mit FeatureStyleFunction können Sie Stilregeln deklarativ festlegen und auf den gesamten Datensatz anwenden. Wenden Sie FeatureStyleOptions auf ein Element basierend auf Dataset-Attributwerten an. Über die Stilfunktion für Elemente können Sie auch null zurückgeben, z. B. wenn ein Teil der Elemente unsichtbar bleiben soll. Dieses Beispiel zeigt eine Stilfunktion, bei der eine Reihe von Punkten basierend auf Datenattributen mit einer Farbe versehen wird.

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

Stil auf die Elementebene des Datasets anwenden

So wenden Sie die Stile in der Stilfunktion für Elemente an:

  1. Rufen Sie mit map.getDatasetFeatureLayer() die Elementebene des Datasets ab und übergeben Sie die Dataset-ID.
  2. Wenden Sie den Stil an, indem Sie die Stiloptionen für Elemente (z. B. styleOptions) oder die Funktion (z. B. setStyle) auf der Dataset-Ebene festlegen.

TypeScript

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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

index.js

Stile von einer Ebene entfernen

Wenn Sie Stile von einer Ebene entfernen möchten, legen Sie style auf null fest:

featureLayer.style = null;

Über die Stilfunktion für Elemente können Sie auch null zurückgeben, z. B. wenn ein Teil der Elemente unsichtbar bleiben soll.

Quellenangabe hinzufügen

Die Karte muss alle erforderlichen Quellenangaben enthalten, wenn hochgeladene Datasets in Google Maps dargestellt werden. Quellenangaben dürfen das Google-Logo nicht verdecken oder überlagern.

Quellenangaben können Sie u. a. mithilfe benutzerdefinierter Steuerelemente hinzufügen, mit denen sich beliebiger HTML-Code an Standardpositionen auf der Karte platzieren lässt. Das folgende Codebeispiel zeigt eine Funktion, mit der ein solches Steuerelement programmatisch erstellt wird:

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

Sobald das Steuerelement definiert ist, können Sie es wie hier gezeigt bei der Initialisierung der Karte hinzufügen:

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