Стиль интерфейса платформы Google Карт скоро изменится. Будет обновлена стандартная цветовая палитра, а сами карты станут удобнее. Все стили карт автоматически обновятся в марте 2025 г. Дополнительные сведения о доступности этих изменений и о том, как включить их раньше, приведены в статье Новый стиль карты для платформы Google Maps.

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

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

Требования

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

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

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

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

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

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

TypeScript

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

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

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

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

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

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

TypeScript

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

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

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

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