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.

• Tworzenie identyfikatora i stylu mapy
• Tworzenie i przesyłanie 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.
   
5. Zaznacz pola wyboru obok stylów mapy, które chcesz powiązać, a potem kliknij ZAPISZ.

Uwaga: renderowanie wielu zbiorów danych na mapie może wpływać na wydajność w zależności od ich rozmiaru i liczby.

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

JavaScript

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

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map Google.

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