Dodawanie zbioru danych do mapy

Wybierz platformę: Android iOS JavaScript

The FeatureStyleFunction, to miejsce, w którym możesz zdefiniować logikę selektywnego stylowania cech w zbiorze danych. Na podstawie tej logiki zwraca ona FeatureStyleOptions. Jeśli logika stylowania 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, musisz mieć identyfikator mapy, styl mapy i identyfikator zbioru danych.

• Utwórz identyfikator mapy i styl mapy
• Utwórz i prześlij zbiór danych

Powiąż identyfikator zbioru danych ze stylem mapy

Eksperymentalna: tę funkcję można ustawić tylko w przypadku jasnych stylów mapy. Gdy połączysz jasny styl mapy, w którym ta funkcja jest włączona, z identyfikatorem mapy, włączone warstwy będą też dostępne w ciemnym 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. Kliknij pola wyboru stylów mapy, które chcesz powiązać, a następnie kliknij ZAPISZ.

Uwaga: renderowanie wielu 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 na stylizowanie cech jest przekazanie FeatureStyleOptions, aby zdefiniować atrybuty stylu, takie jak kolor, krycie i grubość linii. Zastosuj opcje stylu cechy bezpośrednio do warstwy mapy zbioru danych lub użyj 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 dotyczący używania TypeScript 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 cechy 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(params: { feature: google.maps.Feature }) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // 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 {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.ts

Uwaga: przeczytaj przewodnik dotyczący używania TypeScript i Map Google.

JavaScript

function setStyle(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 {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.js

Zastosuj styl do warstwy mapy zbioru danych

Aby zastosować style w funkcji stylu cechy:

1. Pobierz warstwę mapy zbioru danych, wywołując 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

// 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 dotyczący używania TypeScript 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 style na null:

featureLayer.style = null;

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

Dodawanie informacji o pochodzeniu danych

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

Jednym ze sposobów dodania tekstu atrybucji jest użycie niestandardowych elementów sterujących aby umieścić dowolny kod HTML w standardowych miejscach na mapie. Poniższe fragmenty kodu pokazują kod HTML i CSS używany do atrybucji 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