Dodawanie zbioru danych do mapy

Wybierz platformę: Android iOS JavaScript

W sekcji FeatureStyleFunction możesz zdefiniować logikę, która umożliwia selektywne stylowanie obiektów w zbiorze danych. Zgodnie z tą logiką zwraca wartość FeatureStyleOptions. Jeśli logika stylizacji 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ć style.

Wymagania wstępne

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

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

Powiązywanie identyfikatora zbioru danych ze stylem mapy

Eksperymentalna: to ustawienie można skonfigurować tylko w przypadku jasnych stylów mapy. Gdy połączysz identyfikator mapy z jasnym stylem mapy, w którym ta funkcja jest włączona, włączone warstwy będą też dostępne w przypadku ciemnego stylu 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 ją.
   
5. Zaznacz pola wyboru stylów mapy, które chcesz powiązać, a następnie kliknij ZAPISZ.

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

Używanie prostych reguł stylu

Najprostszym sposobem na stylizowanie elementów jest przekazanie obiektu FeatureStyleOptions w celu zdefiniowania atrybutów stylu, takich jak kolor, krycie i grubość linii. Stosuj opcje stylu elementu bezpośrednio do warstwy elementów zbioru danych lub używaj ich w połączeniu z 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żywanie deklaratywnych reguł stylu

Użyj FeatureStyleFunction, aby deklaratywnie ustawić reguły stylu i zastosować je do całego zbioru danych. Zastosuj FeatureStyleOptions do funkcji na podstawie wartości atrybutów zbioru danych. Możesz też zwrócić null z funkcji stylu cechy, na przykład jeśli chcesz, aby podzbiór cech pozostał niewidoczny. Ten przykład pokazuje 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 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

Stosowanie stylu do warstwy cech zbioru danych

Aby zastosować style w funkcji stylu elementu:

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

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

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

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

JavaScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

Usuwanie stylu z warstwy

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

featureLayer.style = null;

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

Dodawanie tekstu z informacją o autorze

Gdy wyświetlasz w Mapach Google przesłane zbiory danych, mapa musi zawierać wymagane atrybucje. Tekst atrybucji nie może zasłaniać logo Google ani zakłócać jego wyświetlania.

Jednym ze sposobów dodawania tekstu z atrybucją jest użycie elementów sterujących niestandardowych, aby umieścić dowolny kod HTML w standardowych miejscach na mapie. Poniższe fragmenty kodu pokazują kod HTML i CSS użyty w atrybucjach w tym przykładzie:

<gmp-map center="40.757815, -73.933123" zoom="11" map-id="5cd2c9ca1cf05670" map-type-control="false">
  <div id="attribution" slot="control-block-end-inline-start">Data source: NYC Open Data</div>
</gmp-map>
index.html

#attribution {
  background-color: rgba(255, 255, 255, 0.7);
  font-family: "Roboto", "Arial", "sans-serif";
  font-size: 10px;
  padding: 2px;
  margin: 2px;
}
style.css