Виджеты

Существует множество виджетов, которые вы можете использовать для создания своих пользовательских интерфейсов. Эти виджеты включают кнопки, флажки, ползунки, текстовые поля и меню выбора. Виджеты можно распечатать или добавить на панель только один раз. В следующих разделах показаны основные функциональные возможности, внешний вид и поведение виджетов. Дополнительную информацию о стилизации виджетов см. в разделе «Стиль» . В следующих примерах виджеты просто print() на консоль. Подробную информацию о добавлении виджетов на панели см. на странице «Панели и макеты» .

ui.Label

Метки — это просто области, в которых отображается текст. Например, следующий код печатает этикетку:

var label = ui.Label('Cool label!');
print(label);

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

Разбейте длинные метки, вставив символ новой строки ( \n ) и установив для аргумента свойства стиля whiteSpace значение 'pre' :

print(ui.Label('Here is a:\nnew line', {whiteSpace: 'pre'}));

ui.Button

Кнопка — это интерактивный виджет пользовательского интерфейса, на который можно нажать. Вы можете указать функцию, которая будет вызываться (функция «обратного вызова»), когда пользователь нажимает кнопку. (Дополнительную информацию об обработке событий с помощью функций обратного вызова см. на странице «События» ). В следующем примере при нажатии кнопки печатается текущий центр карты:

var button = ui.Button({
  label: 'Get Map Center',
  onClick: function() {
    print(Map.getCenter());
  }
});
print(button);

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

ui.Checkbox

Флажок — это виджет, который позволяет пользователю установить (или снять) флажок. Когда состояние флажка изменяется, обратным вызовам, зарегистрированным в виджете, передается логическое значение, указывающее, установлен ли сейчас флажок. Например:

var checkbox = ui.Checkbox('Show SRTM layer', true);

checkbox.onChange(function(checked) {
  // Shows or hides the first map layer based on the checkbox's value.
  Map.layers().get(0).setShown(checked);
});

Map.addLayer(ee.Image('CGIAR/SRTM90_V4'));
print(checkbox);

Напечатанный флажок должен выглядеть примерно так:

Обратите внимание, что установка флажка включает слой, отображаемый на карте. Как и в случае с другими компонентами пользовательского интерфейса, картой редактора кода можно управлять программно. Узнайте больше об объекте «Карта» на странице «Панели и макеты» .

ui.Slider

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

var slider = ui.Slider();

slider.setValue(0.9);  // Set a default value.
slider.onChange(function(value) {
  Map.layers().get(0).setOpacity(value);
});

Map.addLayer(ee.Image(255), {palette: 'blue'});
print(slider);

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

Обратите внимание, что значение ползунка отображается справа от ползунка.

ui.DateSlider

Виджет DateSlider похож на виджет Slider , но явно обрабатывает даты. DateSlider , настроенный для выбора дня с июня 2018 года, выглядит так:

DateSlider полезен для фильтрации коллекций, как показано в следующем примере, в котором создается годовая совокупность на основе DateRange установленного в DateSlider :

// Use a DateSlider to create annual composites of this collection.
var collection = ee.ImageCollection('LANDSAT/LC08/C02/T1');
// Use the start of the collection and now to bound the slider.
var start = ee.Image(collection.first()).date().get('year').format();
var now = Date.now();
var end = ee.Date(now).format();

// Run this function on a change of the dateSlider.
var showMosaic = function(range) {
  var mosaic = ee.Algorithms.Landsat.simpleComposite({
    collection: collection.filterDate(range.start(), range.end())
  });
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var visParams = {bands: ['B4', 'B3', 'B2'], max: 100};
    var layer = ui.Map.Layer(mosaic, visParams, name + ' composite');
    Map.layers().set(0, layer);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showMosaic,
    style: {width: '180px'}
  });
  Map.add(dateSlider.setValue(now));
});

// Initialize the map location at southern Africa.
Map.setCenter(23.861, -27.144, 6);

ui.Textbox

Текстовое поле — это место для сбора введенного пользователем текста. Например:

var textbox = ui.Textbox({
  placeholder: 'Enter text here...',
  onChange: function(text) {
    print('So what you are saying is ' + text + '?');
  }
});
print(textbox);

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

Обратите внимание, что обратный вызов запускается только тогда, когда пользователь закончил ввод текста (и нажал return ) или пользователь щелкнул мышью за пределами текстового поля.

ui.Выбрать

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

var places = {
  MTV: [-122.0849, 37.3887],
  PEK: [116.4056, 39.9097],
  ZRH: [8.536, 47.376]
};

var select = ui.Select({
  items: Object.keys(places),
  onChange: function(key) {
    Map.setCenter(places[key][0], places[key][1]);
  }
});

// Set a place holder.
select.setPlaceholder('Choose a location...');

print(select);

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

ui.Chart

Диаграммы в пакете ui.Chart ведут себя аналогично диаграммам в пакете Chart . В частности, ui.Chart представляет собой тонкую оболочку вокруг экземпляра ChartWrapper API визуализации Google. Дополнительную информацию об управлении объектами ChartWrapper смотрите в этой ссылке . Дополнительную информацию о вспомогательных функциях диаграмм в Earth Engine см. в документации по диаграммам .

ui.Миниатюра

Виджет миниатюр можно использовать для предварительного просмотра объектов ee.Image и ee.ImageCollection . Если задан ee.Image , виджет будет отображать статическое изображение; при предоставлении ee.ImageCollection он будет отображать анимацию с одним кадром на изображение во входных данных. Как и в случае с ee.Image.getThumbURL() и ee.ImageCollection.getVideoThumbURL() , вы можете указать параметры для управления форматом и размерами результирующей миниатюры:

// Create a box around an area in the Brazilian Amazon.
var box = ee.Geometry.Polygon([[
  [-62.9564, 2.5596], [-62.9550, 2.4313], [-62.8294, 2.4327], [-62.8294, 2.5596]
]]);

// Visualize the image in RGB.
var image = ee.Image('LANDSAT/LE07/C02/T1_L2/LE07_233058_20011113')
                .select(['SR_B[1-3]'])  // blue, green, red reflectance
                .multiply(0.0000275).add(-0.2)  // apply scaling factors
                .visualize({
                  bands: ['SR_B3', 'SR_B2', 'SR_B1'],
                  min: 0,
                  max: 0.12,
                  gamma: 1.3
                });

// Print a thumbnail to the console.
print(ui.Thumbnail({
  image: image,
  params: {dimensions: '256x256', region: box, format: 'png'},
  style: {height: '300px', width: '300px'}
}));

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

ui.Карта

ui.Map — это виджет карты. (Фактически карта редактора кода по умолчанию является экземпляром этого класса). Как и другие виджеты, вы можете распечатать карту на консоли. Управляйте содержимым карты, очищая, получая или устанавливая отдельные слои. В следующем примере на консоль выводится карта, показывающая границы карты редактора кода:

// Make a little map.
var map = ui.Map();

// Make the little map display an inset of the big map.
var createInset = function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  map.centerObject(bounds);
  map.clear();
  map.addLayer(bounds);
};

// Run it once to initialize.
createInset();

// Get a new inset map whenever you click on the big map.
Map.onClick(createInset);

// Display the inset map in the console.
print(map);

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

В этом примере пользователю нужно щелкнуть большую карту, чтобы вставка нарисовалась на маленькой карте.

Вы также можете манипулировать слоями на карте, вызывая layers() в экземпляре карты. layers() возвращает ui.data.ActiveList , объект, подобный массиву. При его изменении слои на карте также меняются. Подробности смотрите в разделе ui.Map.Layer .

ui.Map.Layer

Слой не является виджетом со стилем, таким как ui.Button . Это просто представление данных слоя на карте. В следующем примере показано обновление карты путем создания слоя и обновления свойств слоя на основе пользовательского ввода:

var consoleMap = ui.Map({
  lon: -2.0174,
  lat: 48.6474,
  zoom: 13
});

// Create a Layer from this Sentinel-2 image
var image = ee.Image('COPERNICUS/S2/20150821T111616_20160314T094808_T30UWU');
var visParams = {bands: ['B4', 'B3', 'B2'], max: 2048, gamma: 1};
var layer = ui.Map.Layer(image, visParams);

// Update the map by updating the layers list.
var layers = consoleMap.layers();
layers.add(layer);

// Make a textbox to accept a gamma value.
// Update the layer when the gamma value is entered.
var gammaBox = ui.Textbox({
  value: 1,
  onChange: function(value) {
    // visParams is NOT an ActiveDictionary, so set it again.
    visParams.gamma = value;
    layer.setVisParams(visParams);
  }
});

print(ui.Label('Enter a gamma value:'));
print(gammaBox);
print(consoleMap);

ui.Map.CloudStorageLayer

Если вы хотите отобразить ( например, в приложении) относительно ресурсоемкий для вычислений уровень, вам может потребоваться экспортировать данные в корзину Cloud Storage из соображений производительности. Эти статические слои, предназначенные только для визуализации, могут сделать ваши приложения и скрипты более отзывчивыми. Для этой цели вы можете создать статический слой отображения, используя Export.map.toCloudStorage() . Чтобы использовать набор плиток, ранее экспортированный с помощью Export.map.toCloudStorage() , создайте новый ui.Map.Layer из указанного сегмента Cloud Storage и пути:

Map.add(ui.Map.CloudStorageLayer({
  bucket: 'earthenginepartners-hansen',
  path: 'tiles/gfc_v1.4/loss_year',
  maxZoom: 12,
  suffix: '.png'
}));

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

ui.Map.DrawingTools

Существует набор инструментов рисования геометрии, который по умолчанию добавляется на Map в редакторе кода. Вы можете изменить поведение этих инструментов на Map по умолчанию, вызвав Map.drawingTools() . Например, чтобы скрыть инструменты рисования:

Map.drawingTools().setShown(false);

Вновь созданные карты по умолчанию не получают инструменты рисования, но их можно включить, вызвав метод drawingTools() на карте:

var map = ui.Map();
// Prints true since drawingTools() adds drawing tools to the map.
print(map.drawingTools().getShown());
// Replace the default Map with the newly created map.
ui.root.widgets().reset([map]);

Слои геометрии, нарисованные с помощью инструментов рисования, помещаются в ui.data.ActiveList , доступ к которому можно получить, вызвав Map.drawingTools().layers() . Список слоев геометрии реагирует на события так же, как и другие активные списки, например список слоев на Map возвращаемый Map.layers() . В следующем примере показано, как можно настроить видимость слоев геометрии, нарисованных с помощью инструментов (которые отображаются по умолчанию):

Map.drawingTools().layers().forEach(function(layer) {
  layer.setShown(false);
});

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

var geometries = [ee.Geometry.Point([0,0]), ee.Geometry.Rectangle([[0,0], [1,1]])];
Map.drawingTools().addLayer(geometries, 'my_geometry1', 'red');

var layer = ui.Map.GeometryLayer(geometries, 'my_geometry2', 'blue');
Map.drawingTools().layers().add(layer);

Состояние инструментов рисования также сохраняется при публикации приложения . Если у вас показаны или скрыты инструменты рисования, они также будут показаны или скрыты в вашем приложении. Геометрия вашего импорта также будет перенесена в ваше приложение.

ui.Map.GeometryLayer

GeometryLayer — это коллекция геометрий, которая действует как одна Geometry , GeometryCollection или FeatureCollection , которая добавляется в раздел импорта в верхней части скрипта и на нее можно ссылаться в коде.

GeometryLayer , нарисованные с помощью инструментов рисования, имеют поведение по умолчанию, которое вы можете переопределить, предоставив новые функции обратного вызова. Например, предположим, что вы хотите, чтобы интерактивные изменения геометрии вызывали событие. Чтобы реализовать определенное поведение, вы можете установить методы onEdit() , onErase() или onDraw() в инструментах, чтобы реагировать на действия пользователя. В следующем примере показано, как запустить вычисление и обновить метку с учетом результата вычисления, когда пользователь добавляет, редактирует или удаляет геометрию:

// Load elevation data.
var srtm = ee.Image('USGS/SRTMGL1_003');
Map.addLayer(srtm, {min: 0, max: 5000}, 'SRTM');

// Make a label to display mean elevation at drawn points.
var label = new ui.Label('Draw points to calculate mean elevation');
var inspector = new ui.Panel([label]);
Map.add(inspector);
// Don't make imports that correspond to the drawn points.
Map.drawingTools().setLinked(false);
// Limit the draw modes to points.
Map.drawingTools().setDrawModes(['point']);
// Add an empty layer to hold the drawn points.
Map.drawingTools().addLayer([]);
// Set the geometry type to be point.
Map.drawingTools().setShape('point');
// Enter drawing mode.
Map.drawingTools().draw();

// This function gets called when the geometry layer changes.
// Use debounce to call the function at most every 100 milliseconds.
var getAverageElevation = ui.util.debounce(function() {
  var points = Map.drawingTools().layers().get(0).toGeometry();
  var elevation = srtm.reduceRegion({
    reducer: ee.Reducer.mean(),
    geometry: points,
    scale: 30
  }).get('elevation');
  // Asynchronously evaluate the mean elevation.
  elevation.evaluate(showElevation);
}, 100);

// Set the callback function on changes of the geometry layer.
Map.drawingTools().onEdit(getAverageElevation);
Map.drawingTools().onDraw(getAverageElevation);
Map.drawingTools().onErase(getAverageElevation);

// Set the label to the result of the mean reduction.
function showElevation(elevation) {
  inspector.clear();
  var elevationLabel = ui.Label('Mean elevation: ' + elevation);
  inspector.add(elevationLabel);
}

Обратите внимание, что setLinked() используется для переключения соединения между инструментами рисования геометрии и разделом «Импорт» редактора кода. В этом примере инструменты геометрии не связаны, чтобы предотвратить создание импорта. toGeometry используется для преобразования слоя в ee.Geometry . Если импортированный слой представляет Feature или FeatureCollection , вы можете получить базовый объект EE с помощью getEeObject() . Также обратите внимание на использование ui.util.debounce для предотвращения запуска функции обратного вызова при каждом движении геометрии. В частности, функция не сработает, пока не пройдет 100 миллисекунд с момента последнего события. Это помогает гарантировать, что функция запускается только после того, как пользователь завершил действие редактирования.

Слой геометрии при импорте связан с Geometry или GeometryCollection , поэтому он может содержать только геометрии с одинаковым геодезическим состоянием, поскольку формат GeoJSON допускает только одно геодезическое состояние для коллекции геометрий (дополнительную информацию см. на странице «Геодезические и плоские геометрии» ). Преобразование слоя геометрии в FeatureCollection путем нажатия значка шестеренки рядом с именем слоя позволит вам добавлять геодезическую и плоскую геометрию в один и тот же слой. Однако преобразование его обратно в Geometry приведет к ошибке. Чтобы избежать этого, либо преобразуйте объект в FeatureCollection , либо удаляйте геометрию до тех пор, пока в слое не останется только одно геодезическое состояние.

ui.Map.Linker

Как и слой, компоновщик не является виджетом со стилем. Это скрытая утилита, которую можно использовать для синхронизации перемещения нескольких экземпляров ui.Map :

// Add two maps to the screen.
var left = ui.Map();
var right = ui.Map();
ui.root.clear();
ui.root.add(left);
ui.root.add(right);

// Link the "change-bounds" event for the maps.
// When the user drags one map, the other will be moved in sync.
ui.Map.Linker([left, right], 'change-bounds');

ui.SplitPanel

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

// Load an image of the Santa Rosa, California 2017 fires.
var image = ee.Image('LANDSAT/LC08/C02/T1_TOA/LC08_045033_20171011');

// Add a color-SWIR composite to the default Map.
Map.setCenter(-122.6624, 38.5011, 12);
Map.addLayer(image, {bands: ['B7', 'B5', 'B3'], max: 0.3}, 'color-SWIR');

// Make another map and add a color-NIR composite to it.
var linkedMap = ui.Map();
linkedMap.addLayer(image, {bands: ['B5', 'B4', 'B3'], max: 0.3}, 'color-NIR');
// Add a thermal image to the map.
linkedMap.addLayer(image, {
  bands: ['B11'],
  min: 290,
  max: 305,
  palette: ['gray', 'white', 'yellow', 'red']
}, 'Thermal');

// Link the default Map to the other map.
var linker = ui.Map.Linker([ui.root.widgets().get(0), linkedMap]);

// Make an inset map and add it to the linked map.
var inset = ui.Map();
inset.style().set({position: 'bottom-right', width: '300px', height: '250px'});
inset.setControlVisibility({all: false, mapTypeControl: true});
linkedMap.add(inset);

// Register a function to the linked map to update the inset map.
linkedMap.onChangeBounds(function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  inset.centerObject(bounds);
  inset.layers().set(0, bounds);
});

// Create a SplitPanel which holds the linked maps side-by-side.
var splitPanel = ui.SplitPanel({
  firstPanel: linker.get(0),
  secondPanel: linker.get(1),
  orientation: 'horizontal',
  wipe: true,
  style: {stretch: 'both'}
});

// Set the SplitPanel as the only thing in root.
ui.root.widgets().reset([splitPanel]);

Обратите внимание, что в конструкторе ui.SplitPanel для параметра wipe установлено значение true , чтобы пользователь мог перемещать дескриптор вперед и назад между двумя визуализациями.

Стилизация виджетов

Стиль виджета контролируется словарем свойств стиля виджета. Вы можете получить доступ к словарю, вызвав style() в виджете. Объект, возвращаемый style() является экземпляром ui.data.ActiveDictionary . Это означает, что установка свойств словаря стилей автоматически обновляет способ отображения виджета. Допустимые ключи для словаря стилей каждого виджета подробно описаны в справочной документации виджета для вызова style() .

Стили виджета можно установить с помощью конструктора, вызвав style().set() или вызвав style() с аргументом словаря. Например:

var redLabel = ui.Label('Big, Red Label');

redLabel.style().set('color', 'red');
redLabel.style().set('fontWeight', 'bold');
redLabel.style().set({
  fontSize: '32px',
  padding: '10px'
});

print(redLabel);

Обратите внимание, что в этом примере стиль метки сначала определяется путем вызова style().set() с аргументами ключа и значения, а затем путем вызова style().set() с аргументом-словарем. Второй вызов не отменяет первый; он добавляет и заменяет отдельные свойства стиля, а не заменяет весь словарь стилей.

Дополнительную информацию о параметрах стилей для виджетов см. в этой ссылке на таблицу каскадных стилей (CSS) для стилей, перечисленных в документации style() для каждого виджета. Обратите внимание, что стили, допустимые для виджетов Earth Engine, отличаются от стилей CSS в нескольких местах, в частности, fontSize и fontWeight для font-style и font-weight соответственно.

Словарь стилей также содержит клавиши, управляющие положением виджета. См . страницу «Панели и макеты» для получения дополнительной информации о том, как использовать позиционные свойства.