Dodawanie zbioru danych do mapy

Ta usługa lub funkcja jest w wersji przedpremierowej (przed GA). Usługi i funkcje przed GA mogą mieć ograniczoną obsługę, a zmiany w takich usługach mogą być niezgodne z ich innymi wersjami. Oferty przed GA podlegają Szczegółowym warunkom korzystania z usługi Google Maps Platform. Więcej informacji znajdziesz w opisach etapu uruchamiania.

Pole FeatureStyleFunction to miejsce, w którym definiujesz logikę selektywnego określania stylu cech w zbiorze danych. Na podstawie tej logiki zwraca wartość FeatureStyleOptions. Jeśli logika stylu nie jest wymagana, możesz użyć FeatureStyleOptions, aby bezpośrednio ustawić style. Na tej stronie dowiesz się, jak dodać zbiór danych do mapy i zastosować styl.

Wymagania wstępne

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

• Tworzenie identyfikatora i stylu mapy
• Tworzenie i przesyłanie zbioru danych

Powiąż identyfikator zbioru danych ze stylem mapy

Wykonaj te czynności, aby powiązać zbiór danych z używanym stylem mapy:

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ń w dół i kliknij DODAJ STYL MAPY.
   
5. Kliknij pola wyboru obok stylów mapy, które chcesz powiązać, a potem kliknij ZAPISZ.

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

Używanie prostych reguł stylu

Najprostszym sposobem stylu obiektu jest przekazanie atrybutu FeatureStyleOptions w celu określenia atrybutów stylu, takich jak kolor, przezroczystość i szerokość linii. Stosuj opcje stylu cech bezpośrednio do warstwy cech zbioru danych lub używaj ich w połączeniu z zasadą FeatureStyleFunction.

TypeScript

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

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

JavaScript

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

Używaj reguł stylu deklaratywnego

Użyj FeatureStyleFunction, aby ustawić deklaratywnie reguły stylu i zastosować je w całym zbiorze danych. Zastosuj FeatureStyleOptions do funkcji na podstawie wartości atrybutów zbioru danych. Możesz też zwrócić obiekt null z funkcji stylu cech, na przykład jeśli chcesz, aby podzbiór obiektów był niewidoczny. Ten przykład pokazuje funkcję stylu, która koloruje zbiór punktów 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 TypeScriptu 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 stylu cech:

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

TypeScript

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

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

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 też zwrócić obiekt null z funkcji stylu cech, na przykład jeśli chcesz, aby podzbiór cech był niewidoczny.

Dodaj tekst źródła

Podczas wyświetlania przesłanych zbiorów danych w Mapach Google mapa musi zawierać wszelkie wymagane informacje o źródłach. Tekst informacji o autorze nie może zasłaniać logo Google ani zakłócać jego działania.

Jednym ze sposobów dodania tekstu informacji o autorze jest użycie niestandardowych ustawień do umieszczenia dowolnego kodu HTML w standardowych pozycjach na mapie. Poniższy przykładowy kod pokazuje funkcję, która automatycznie 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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu 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 podczas inicjowania w następujący sposób:

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 TypeScriptu 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