Панели и макеты

Панели

ui.Panel — это контейнер пользовательского интерфейса верхнего уровня, в котором можно размещать виджеты. Каждая ui.Panel имеет объект ui.Panel.Layout , который управляет расположением виджетов на экране. Подробнее читайте в разделе Макеты . Панели также поддерживают список виджетов (которые могут включать в себя другие панели), которые были добавлены к ним. Чтобы управлять виджетами на панели, либо add() , либо remove() их с панели, либо получите список виджетов, вызвав widgets() на панели. Список виджетов является экземпляром ui.data.ActiveList , что означает, что вы можете настроить панель, манипулируя списком и виджетами в нем.

ui.root

ui.root — это фиксированный экземпляр ui.Panel для всего, что находится в редакторе кода под горизонтальной полосой. По умолчанию он содержит только один виджет: карту по умолчанию. В частности, элемент ui.root.widgets().get(0) — это объект Map (экземпляр ui.Map ), который по умолчанию отображается в редакторе кода). Помимо псевдонима Map , единственной особенностью карты по умолчанию является то, что в ней есть инструменты редактирования геометрии. Чтобы получить пустой холст для создания пользовательского интерфейса, clear() карту по умолчанию из ui.root :

Редактор кода (JavaScript)

ui.root.clear();

Альтернативно, можно изменить карту по умолчанию на корневой панели, добавив к ней виджеты. В частности, представьте себе карту как панель с абсолютной компоновкой (подробности см. в разделе «Макеты» ). Следующий пример иллюстрирует изменение карты по умолчанию:

Редактор кода (JavaScript)

// Load a VIIRS surface reflectance image and display on the map.
var image = ee.Image('NOAA/VIIRS/001/VNP09GA/2022_06_05').select('M.*');
Map.addLayer(image, {bands: ['M5', 'M4', 'M3'], min: 0, max: 4e3, gamma: 1.5});

// Create the title label.
var title = ui.Label('Click to inspect');
title.style().set('position', 'top-center');
Map.add(title);

// Create a panel to hold the chart.
var panel = ui.Panel();
panel.style().set({
  width: '400px',
  position: 'bottom-right'
});
Map.add(panel);

// Register a function to draw a chart when a user clicks on the map.
Map.style().set('cursor', 'crosshair');
Map.onClick(function(coords) {
  panel.clear();
  var point = ee.Geometry.Point(coords.lon, coords.lat);
  var chart = ui.Chart.image.regions(image, point, null, 30);
  chart.setOptions({title: 'Band values'});
  panel.add(chart);
});

Обратите внимание, что в примере изменяется карта по умолчанию ( Map ), рассматривая ее как панель и добавляя к ней виджеты. Поскольку карты имеют абсолютную компоновку, положение виджета на карте определяется свойством position свойства style виджета. Подробности смотрите в разделе «Абсолютная компоновка» .

Когда вы делитесь ссылкой на редактор кода с другим пользователем, по умолчанию ui.root занимает большую часть окна, а текстовый редактор, панель документов и консоль скрываются. Управляя макетом ui.root , вы можете контролировать, как другие пользователи будут воспринимать ваш скрипт.

Макеты

Макеты управляют расположением виджетов на панели для отображения. Существует два варианта макета, описанные ниже: потоковый макет и абсолютный макет. Макеты задаются с помощью класса ui.Panel.Layout . Установите макет панели либо в конструкторе, либо с помощью setLayout() . Порядок добавления виджетов определяет, как виджеты будут расположены на панели с потоковым макетом. Свойство position каждого style виджета определяет, как виджет будет расположен на панели с абсолютным расположением. Если стиль виджета не имеет отношения к макету, в котором он размещен, он игнорируется.

Поток

Потоковый макет отображает виджеты в строке ( 'horizontal' ) или столбце ( 'vertical' ). Виджеты расположены в порядке их добавления на панель. Например, рассмотрим следующие кнопки, добавленные на панель:

Редактор кода (JavaScript)

// Create a panel with vertical flow layout.
var panel = ui.Panel({
  layout: ui.Panel.Layout.flow('vertical'),
  style: {width: '300px'}
});

// Add a bunch of buttons.
for (var i = 0; i < 30; i++) {
  panel.add(ui.Button({label: 'Button ' + i, style: {stretch: 'horizontal'}}));
}

ui.root.clear();
ui.root.add(panel);

Вертикальная компоновка должна выглядеть примерно так:

Обратите внимание, что width панели установлена ​​на 300 пикселей, а stretch установлено на 'horizontal' с помощью свойства style . Свойство стиля stretch применяется к виджетам на панели с потоковым макетом. Например, {stretch: 'horizontal'} означает, что виджет расширится, чтобы заполнить доступное горизонтальное пространство внутри панели. В предыдущем примере измените тип макета потока на 'horizontal' чтобы кнопки располагались в ряд, а не в столбец.

На панели с горизонтальным потоком горизонтально растянутый виджет расширяется, заполняя доступное пространство после того, как все другие виджеты заняли свою естественную ширину . Если более одного виджета растягивается по горизонтали, доступное горизонтальное пространство распределяется между ними. Вертикально растянутый виджет расширяется до высоты панели.

На панели с вертикальным потоком вертикально растянутый виджет расширяется, заполняя доступное пространство после того, как все другие виджеты заняли свою естественную высоту . Если более одного виджета растянуто по вертикали, доступное вертикальное пространство делится между ними. Горизонтально растянутый виджет расширяется до ширины панели.

Абсолютный

Абсолютный макет позиционирует виджеты в соответствии с позициями на панели. В отличие от потокового макета, положение виджета определяется свойством position свойства style виджета, а не порядком, в котором он добавляется на панель. В следующем примере показано использование панели root.ui с абсолютным макетом (макет корневой панели по умолчанию представляет собой горизонтальный поток, но его можно установить с помощью ui.root.setLayout() ):

Редактор кода (JavaScript)

ui.root.clear();
ui.root.setLayout(ui.Panel.Layout.absolute());

// A function to make buttons labeled by position.
function makeButton(position) {
  return ui.Button({
    label: position,
    style: {position: position}
  });
}

// Add labeled buttons to the panel.
ui.root.add(makeButton('top-left'));
ui.root.add(makeButton('top-center'));
ui.root.add(makeButton('top-right'));
ui.root.add(makeButton('middle-left'));
ui.root.add(makeButton('middle-right'));
ui.root.add(makeButton('bottom-left'));
ui.root.add(makeButton('bottom-center'));
ui.root.add(makeButton('bottom-right'));

Панель абсолютного макета должна выглядеть примерно так:

widgets()

Когда вы добавляете виджет на панель, он добавляется в список виджетов панели. Вызов widgets() на панели возвращает ui.data.ActiveList , который вы можете использовать для управления виджетами на панели. Рассмотрим следующий пример, в котором виджеты добавляются на панель, панель добавляется в корневую панель, а затем обновляется диаграмма, когда пользователь щелкает карту:

Редактор кода (JavaScript)

// Load and display NDVI data.
var ndvi = ee.ImageCollection('NOAA/VIIRS/001/VNP13A1')
    .filterDate('2021-01-01', '2022-01-01').select('NDVI');
Map.addLayer(
  ndvi.median(), {min: 0, max: 10000, palette: ['99c199', '006400']}, 'NDVI');

// Configure the map.
Map.setCenter(-94.84497, 39.01918, 8);
Map.style().set('cursor', 'crosshair');

// Create an empty panel in which to arrange widgets.
// The layout is vertical flow by default.
var panel = ui.Panel({style: {width: '400px'}})
    .add(ui.Label('Click on the map'));

// Set a callback function for when the user clicks the map.
Map.onClick(function(coords) {
  // Create or update the location label (the second widget in the panel)
  var location = 'lon: ' + coords.lon.toFixed(2) + ' ' +
                 'lat: ' + coords.lat.toFixed(2);
  panel.widgets().set(1, ui.Label(location));

  // Add a red dot to the map where the user clicked.
  var point = ee.Geometry.Point(coords.lon, coords.lat);
  Map.layers().set(1, ui.Map.Layer(point, {color: 'FF0000'}));

  // Create a chart of NDVI over time.
  var chart = ui.Chart.image.series(ndvi, point, ee.Reducer.mean(), 200)
      .setOptions({
        title: 'NDVI Over Time',
        vAxis: {title: 'NDVI'},
        lineWidth: 1,
        pointSize: 3,
      });

  // Add (or replace) the third widget in the panel by
  // manipulating the widgets list.
  panel.widgets().set(2, chart);
});

// Add the panel to the ui.root.
ui.root.add(panel);

В этом примере обратите внимание, что сначала виджеты добавляются на панель с помощью add() . В функции обратного вызова, зарегистрированной для кликов по карте, вместо этого изменяется список виджетов panel . В частности, третий виджет (который может существовать, а может и не существовать) настроен таким образом, что с течением времени отображается новый график NDVI. Узнайте больше о функциях обработки событий на странице «События» .