Dodawanie zbioru danych do mapy

Wybierz platformę: Android iOS JavaScript

W sekcji FeatureStyleFunction definiujesz logikę, która pozwala stylizować wybrane cechy w zbiorze danych. Na podstawie tej logiki zwraca wartość FeatureStyleOptions. Jeśli logika stylizacji nie jest wymagana, możesz użyć FeatureStyleOptionsdo 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, przygotuj identyfikator i styl mapy oraz 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 opcji DODAJ STYL MAPY i kliknij.
   
5. Kliknij pola wyboru obok stylów mapy, które chcesz powiązać, a następnie kliknij ZAPISZ.

Uwaga: renderowanie na mapie wielu zbiorów danych 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 atrybutów stylizacji, takich jak kolor, krycie i grubość linii, za pomocą obiektu FeatureStyleOptions. 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 używaniu TypeScript i Map Google.

JavaScript

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

Używanie reguł deklaratywnych

Użyj FeatureStyleFunction, aby deklaratywnie określić 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 używaniu 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 stylu funkcji:

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 cech (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 TypeScriptu i Map Google.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

Usuwanie stylizacji 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 nie może zasłaniać ani zasłaniać logo Google.

Jednym ze sposobów dodawania tekstu z przypisaniem autorstwa jest użycie elementów sterujących niestandardowych do umieszczania dowolnego kodu HTML w standardowych miejscach 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 używaniu 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 podczas 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 używaniu 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