Dodawanie zbioru danych do mapy

Ta usługa lub funkcja jest w wersji testowej (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 są objęte szczegółowymi warunkami korzystania z usługi Google Maps Platform. Więcej informacji znajdziesz w opisach etapu uruchamiania.

FeatureStyleFunction to miejsce, w którym definiuje się logikę selektywnego określania stylu cech w zbiorze danych. Na podstawie tej logiki zwraca wartość FeatureStyleOptions. Jeśli logika określania stylu nie jest wymagana, możesz użyć FeatureStyleOptions, aby bezpośrednio ustawiać style. Na tej stronie dowiesz się, jak dodać do mapy zbiór danych 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

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

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

Używanie prostych zasad dotyczących stylu

Najprostszym sposobem na stylizację obiektów jest przekazanie atrybutu FeatureStyleOptions umożliwiającego zdefiniowanie atrybutów stylu, takich jak kolor, przezroczystość czy grubość linii. Opcje stylu cech stosuj bezpośrednio do warstwy cech zbioru danych lub używaj ich w połączeniu z właściwością FeatureStyleFunction.

TypeScript

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

Uwaga: przeczytaj przewodnik na temat korzystania z TypeScriptu i Map Google.

JavaScript

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

Używanie reguł stylu deklaratywnego

FeatureStyleFunction służy do deklaratywnego ustawiania reguł stylów i stosowania ich w całym zbiorze danych. Zastosuj atrybut FeatureStyleOptions do cechy na podstawie wartości atrybutów zbioru danych. Możesz też zwracać wartość null z funkcji stylu cech, na przykład jeśli chcesz, aby podzbiór cech pozostawał niewidoczny. W tym przykładzie pokazano funkcję stylu, która koloruje zestaw 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 na temat korzystania 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 map.getDatasetFeatureLayer() i przekazując identyfikator zbioru danych.
2. Zastosuj styl, ustawiając opcje stylu cech (np. styleOptions) lub funkcję (np. setStyle) w warstwie zbioru danych.

TypeScript

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

Uwaga: przeczytaj przewodnik na temat korzystania 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ć wartość 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 Twoja mapa musi wyświetlać wszystkie wymagane informacje o atrybucji. Tekst oznaczenia nie może zasłaniać ani zakłócać logo Google.

Jednym ze sposobów dodawania tekstu źródła jest użycie ustawień niestandardowych do umieszczenia dowolnego kodu HTML w standardowych pozycjach na mapie. W tym przykładzie kodu pokazano funkcję, która automatycznie tworzy jeden taki niestandardowy 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 na temat korzystania 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 dodać go do mapy w momencie inicjowania, jak pokazano 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

Uwaga: przeczytaj przewodnik na temat korzystania 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