Dodawanie zbioru danych do mapy

Wybierz platformę: Android iOS JavaScript

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

Wymagania wstępne

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

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

Powiązywanie identyfikatora zbioru danych ze stylem mapy

Eksperymentalne: tę funkcję można ustawić tylko w przypadku jasnych stylów mapy. Gdy połączysz jasny styl mapy z włączoną tą funkcją 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 opcji DODAJ STYL MAPY i kliknij ją.
   
5. Zaznacz 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ść w zależności od rozmiaru i liczby zbiorów danych.

Używanie prostych reguł stylu

Najprostszym sposobem na określenie stylu obiektów jest przekazanie obiektu FeatureStyleOptions, który definiuje atrybuty stylu, takie jak kolor, przezroczystość i grubość linii. Opcje stylu obiektów możesz stosować bezpośrednio do warstwy mapy zbioru danych lub używać 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 korzystania z TypeScript i Map Google.

JavaScript

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

Używanie reguł stylu deklaratywnego

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

Stosowanie stylu do warstwy mapy zbioru danych

Aby zastosować style w funkcji stylu elementu:

1. Pobierz warstwę mapy 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) 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 korzystania z 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 elementu, na przykład jeśli chcesz, aby podzbiór elementów pozostał niewidoczny.

Dodawanie informacji o pochodzeniu danych

Jeśli na mapie wyświetlane są przesłane zbiory danych w Mapach Google, muszą być na niej widoczne wymagane informacje o autorstwie. Informacja o pochodzeniu danych nie może zasłaniać logo Google ani zakłócać jego widoczności.

Jednym ze sposobów dodania informacji o pochodzeniu danych jest użycie niestandardowych elementów sterujących, aby umieścić dowolny kod HTML w standardowych pozycjach na mapie. Poniższe fragmenty kodu pokazują kod HTML i CSS użyty 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