Dodawanie zbioru danych do mapy

Wybierz platformę: Android iOS JavaScript

W sekcji FeatureStyleFunction definiujesz logikę, która pozwala na stylizowanie wybranych cech w zbiorze danych. Zwraca on wartość FeatureStyleOptions zgodnie z tą logiką. Jeśli logika stylizacji nie jest wymagana, możesz użyć FeatureStyleOptions do bezpośredniego ustawiania stylów. Na tej stronie dowiesz się, jak dodać zbiór danych do mapy i zastosować styl.

Wymagania wstępne

Zanim przejdziesz dalej, musisz mieć identyfikator mapy, styl mapy i identyfikator zbioru danych.

Powiązanie identyfikatora zbioru danych ze stylem mapy

Aby powiązać zbiór danych ze stylem mapy, którego używasz:

  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 sekcji DODAJ STYL MAPY i kliknij.
    Zrzut ekranu z przyciskiem DODAJ STYLU MAPY
  5. Zaznacz pola wyboru obok stylów mapy, które chcesz powiązać, a potem kliknij ZAPISZ.

Używanie prostych reguł stylów

Najprostszym sposobem stylizowania elementów jest przekazanie obiektu FeatureStyleOptions w celu zdefiniowania atrybutów stylizacji, takich jak kolor, przezroczystość i grubość linii. Możesz zastosować opcje stylów cech bezpośrednio do warstwy cech zbioru danych lub użyć ich w połączeniu z elementem 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,
};

Korzystanie z deklaratywnych reguł stylów

Użyj elementu FeatureStyleFunction, aby deklaratywnie ustawić reguły stylów i zastosować je w całym zbiorze danych. Zastosuj FeatureStyleOptions do cechy na podstawie wartości atrybutów w danych. Możesz też zwrócić null z funkcji stylu funkcji, na przykład jeśli chcesz, aby podzbiór funkcji pozostał niewidoczny. Ten przykład pokazuje funkcję stylu, która nadaje kolory punktom na podstawie atrybutów danych:

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

Zastosuj styl do warstwy cech zbioru danych

Aby zastosować style w funkcji stylów funkcji:

  1. Pobierz warstwę funkcji zbioru danych, wywołując funkcję map.getDatasetFeatureLayer(), podając identyfikator zbioru danych.
  2. Zastosuj styl, ustawiając opcje stylu funkcji (np. styleOptions) lub funkcję (np. setStyle) na warstwie zbioru danych.

TypeScript

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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

Usuwanie stylizacji z warstwy

Aby usunąć stylizację z warstwy, ustaw wartość style na null:

featureLayer.style = null;

Możesz też zwrócić null z funkcji stylu funkcji, na przykład jeśli chcesz, aby podzbiór funkcji pozostał niewidoczny.

Dodawanie tekstu atrybucji

Podczas wyświetlania przesłanych zbiorów danych w Mapach Google na mapie muszą być widoczne wymagane informacje. Tekst informacji o źródle nie może zasłaniać ani zasłaniać logo Google.

Jednym ze sposobów dodawania tekstu atrybucji jest użycie elementów sterujących niestandardowych do umieszczania dowolnego kodu HTML w standardowych miejscach na mapie. Poniższy przykład kodu pokazuje funkcję, która programowo tworzy taki element sterujący niestandardowy:

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

Po zdefiniowaniu elementu sterującego możesz go dodać do mapy w momencie inicjalizacji:

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