Как добавить набор данных на карту

Выберите платформу: Android iOS JavaScript

Логика настройки стилей отдельных объектов из набора данных задается в функции FeatureStyleFunction, которая возвращает FeatureStyleOptions с учетом ваших предпочтений. Если логика стилей не требуется, можно задать стили непосредственно с помощью FeatureStyleOptions. В этой статье рассказывается, как добавить набор данных на карту и применить стили.

Требования

Чтобы продолжить работу, вам понадобятся идентификатор и стиль карты и идентификатор набора данных.

Как связать идентификатор набора данных со стилем карты

Чтобы связать набор данных со стилем карты, выполните следующие действия:

  1. В консоли Google Cloud перейдите на страницу Наборы данных.
  2. Нажмите на название набора данных. Откроется страница Dataset details (Сведения о наборе данных).
  3. Перейдите на вкладку Preview (Предварительный просмотр).
  4. Прокрутите страницу вниз и нажмите Add map style (Добавить стиль карты).
    Раздел "Связанные стили карт" с кнопкой "Добавить стиль карты" справа.
  5. Установите флажки для стилей, с которыми нужно установить связь, и нажмите Save (Сохранить).

Как использовать простые правила стиля

Проще всего настраивать стиль объектов, передавая FeatureStyleOptions для определения атрибутов стиля (например, цвета, прозрачности и толщины линии). Настройки стиля объекта можно применить непосредственно на слое объекта набора данных или использовать совместно с FeatureStyleFunction.

TypeScript

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

JavaScript

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

Как использовать декларативные правила стиля

Чтобы задать декларативные правила стиля и применить их ко всему набору данных, используйте FeatureStyleFunction. Применяйте к объектам FeatureStyleOptions в зависимости от значений атрибутов в наборе данных. Функция стиля объекта также может возвращать null, например если вы хотите, чтобы поднабор объектов не отображался. В примере ниже показана функция стиля, которая окрашивает набор точек в зависимости от атрибутов данных.

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;
    }
}

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;
    }
}

Как применить стиль к слою объекта набора данных

Чтобы применить стили в функции стиля объекта, выполните следующие действия:

  1. Получите слой объекта набора данных, вызвав map.getDatasetFeatureLayer() и передав идентификатор набора данных.
  2. Примените стиль, задав настройки стиля объекта, например styleOptions, или функцию, например setStyle, на слое набора данных.

TypeScript

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

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

JavaScript

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

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

Как удалить стиль из слоя

Чтобы удалить стиль из слоя, задайте для параметра style значение null:

featureLayer.style = null;

Функция стиля объекта также может возвращать null, например если вы хотите, чтобы поднабор объектов не отображался.

Как указать авторство

Загруженные наборы данных необходимо показывать на Google Картах вместе со сведениями об источнике. При этом логотип Google должен быть виден отчетливо и целиком.

Чтобы указать авторство, можно, например, разместить произвольный HTML-код в стандартных местах на карте с помощью собственных элементов управления. Ниже приведены фрагменты кода HTML и CSS, которые использовались для атрибуции в этом примере.

<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>

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