Dodawanie zbioru danych do mapy

FeatureStyleFunction, to definicję pozwalającą selektywnie określać styl cech w zbiorze danych. it zwraca FeatureStyleOptions opartych na tej logice. Jeśli logika stylu nie jest wymagana, możesz użyć atrybutu FeatureStyleOptions aby bezpośrednio ustawiać style. Na tej stronie dowiesz się, jak dodać zbiór danych do mapy. zastosować styl.

Wymagania wstępne

Zanim przejdziesz dalej, przygotuj identyfikator i styl mapy oraz identyfikator zbioru danych.

Powiąż identyfikator zbioru danych ze stylem mapy

Aby powiązać zbiór danych ze stylem mapy, wykonaj te czynności przy użyciu:

  1. W konsoli Google Cloud otwórz stronę Zbiory danych.
  2. Kliknij nazwę zbioru danych. Pojawi się strona Szczegóły zbioru danych.
  3. Kliknij kartę Podgląd.
  4. Przewiń do opcji DODAJ STYL MAPY i kliknij.
    Zrzut ekranu pokazujący przycisk DODAJ STYL MAPY.
  5. Kliknij pola wyboru Style mapy, które chcesz powiązać, a następnie kliknij ZAPISZ.

Używanie prostych reguł stylu

Najprostszym sposobem określenia stylu cech jest przekazanie atrybutu FeatureStyleOptions, aby określić atrybutów stylu, takich jak kolor, nieprzezroczystość i szerokość linii. Zastosuj styl elementu bezpośrednio do warstwy cech zbioru danych lub używać ich w połączeniu z 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

Używaj reguł stylu deklaratywnego

Za pomocą elementu FeatureStyleFunction możesz deklaratywnie określać i stosować reguły stylu w całym zbiorze danych. Zastosuj atrybut FeatureStyleOptions do funkcji na podstawie wartości atrybutów zbioru danych. Możesz też zwrócić null ze stylu elementów , na przykład jeśli chcesz, aby podzbiór cech był niewidoczny. Ten przykład pokazuje funkcję stylu, która koloruje zbiór punktów na podstawie danych atrybuty:

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

Zastosuj styl do warstwy cech zbioru danych

Aby zastosować style w funkcji stylu cech:

  1. Pobierz warstwę cech zbioru danych, wywołując funkcję map.getDatasetFeatureLayer(), i przekazywać identyfikator zbioru danych.
  2. Zastosuj styl, ustawiając opcje stylu elementu (np. styleOptions) lub funkcji (np. setStyle) w warstwie zbioru danych.

TypeScript

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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

index.js

Usuwanie stylu z warstwy

Aby usunąć styl z warstwy, ustaw style na null:

featureLayer.style = null;

Możesz również zwrócić null z funkcji stylu cech, na przykład chcesz, aby podzbiór cech pozostała niewidoczny.

Dodaj tekst źródła

Podczas wyświetlania przesłanych plików mapa musi zawierać wszystkie wymagane informacje o autorze w zbiorach danych w Mapach Google. Tekst informacji o autorze nie może zasłaniać ani zakłócać Logo Google.

Jednym ze sposobów dodania tekstu informacji o autorze jest użycie niestandardowych ustawień. w celu umieszczenia dowolnego kodu HTML w standardowych pozycjach na mapie. Następujący kod: poniżej pokazujemy funkcję, która programowo tworzy taki element sterujący:

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

Po zdefiniowaniu elementu sterującego możesz go dodać do mapy podczas inicjowania jak tutaj:

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