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 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. 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 określenie stylu elementów jest przekazanie obiektu FeatureStyleOptions, aby zdefiniować atrybuty stylu, takie jak kolor, krycie i szerokość linii. Stosuj opcje stylu elementu bezpośrednio do warstwy mapy 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 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 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(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 po korzystaniu 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

Zastosuj styl do warstwy mapy zbioru danych

Aby zastosować style w funkcji stylu elementu:

1. Pobierz warstwę mapy 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 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 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 pochodzeniu danych

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

Jednym ze sposobów dodawania informacji o pochodzeniu danych jest użycie niestandardowych elementów sterujących, które umożliwiają umieszczanie dowolnego kodu 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