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

Ниже описана предварительная версия продукта или функции. Поддержка таких продуктов и функций может быть ограничена, а изменения в них – несовместимы с другими предварительными версиями. Использование предварительных версий регулируется Специальными условиями платформы Google Карт. Подробнее об этапах запуска…

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

Требования

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

• Как создать идентификатор и стиль карты
• Как создать и загрузить набор данных

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

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

1. В Google Cloud Console перейдите на страницу Datasets (Наборы данных).
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,
};
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

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

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

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

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

Примечание. Ознакомьтесь с руководством по использованию TypeScript в 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

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

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

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

TypeScript

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

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

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

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

featureLayer.style = null;

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

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

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

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

TypeScript

function createAttribution(map) {
    const attributionLabel = document.createElement('div');
    // Define CSS styles.
    attributionLabel.style.backgroundColor = '#fff';
    attributionLabel.style.opacity = '0.7';
    attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
    attributionLabel.style.fontSize = '10px';
    attributionLabel.style.padding = '2px';
    attributionLabel.style.margin = '2px';
    attributionLabel.textContent = 'Data source: NYC Open Data';
    return attributionLabel;
}
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}
index.js

Определив элемент управления, вы можете добавить его на карту при инициализации, как показано ниже.

TypeScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.ts

Примечание. Ознакомьтесь с руководством по использованию TypeScript в Google Картах.

JavaScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);

attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.js