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

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

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

Предпосылки

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

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

Свяжите идентификатор набора данных со стилем карты

Экспериментальная функция: эту функцию можно настроить только для стилей светлых карт. При связывании стиля светлых карт с этой функцией с идентификатором карты включенные слои также будут доступны для стиля тёмных карт.

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

1. В консоли Google Cloud перейдите на страницу Наборы данных .
2. Щелкните имя набора данных. Откроется страница с подробностями набора данных .
3. Откройте вкладку Предварительный просмотр .
4. Прокрутите до пункта ДОБАВИТЬ СТИЛЬ КАРТЫ и щелкните.
   
5. Установите флажки для стилей карты, которые необходимо связать, а затем нажмите кнопку СОХРАНИТЬ .

Внимание: отображение нескольких наборов данных на карте может повлиять на производительность в зависимости от размера и количества наборов данных.

Используйте простые правила стиля

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

Машинопись

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

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

JavaScript

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

Используйте правила декларативного стиля

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

Машинопись

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

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 ) на слое набора данных.

Машинопись

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

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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

Удалить стилизацию слоя

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

featureLayer.style = null;

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

Добавить текст атрибуции

При отображении загруженных наборов данных на Google Картах на вашей карте должны быть указаны все необходимые авторские права. Текст авторства не должен закрывать или мешать логотипу Google.

Один из способов добавить текст атрибуции — использовать пользовательские элементы управления для размещения произвольного HTML-кода в стандартных местах на карте. В следующем примере кода показана функция, которая программно создаёт один из таких элементов управления:

Машинопись

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

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

После определения элемента управления его можно добавить на карту во время инициализации, как показано здесь:

Машинопись

// 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 Maps.

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