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

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

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

Предварительные условия

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

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

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

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

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

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

Машинопись 

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 из функции стиля объекта, например, если вы хотите, чтобы подмножество объектов оставалось невидимым. В этом примере показана функция стиля, которая окрашивает набор точек на основе атрибутов данных:

Машинопись 

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

Примените стиль к векторному слою набора данных

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

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

Машинопись 

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-кода в стандартных позициях на карте. В следующем примере кода показана функция, которая программно создает один такой настраиваемый элемент управления:

Машинопись 

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

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

Машинопись 

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