Panele i układy

Panele

ui.Panel to kontener interfejsu użytkownika wyższego poziomu, w którym można układać widżety. Każdy element ui.Panel ma obiekt ui.Panel.Layout, który określa sposób rozmieszczania widżetów na ekranie. Więcej informacji znajdziesz w sekcji Układy. Panele zawierają też listę widżetów (w tym innych paneli), które zostały do nich dodane. Aby zarządzać widżetami w panelu, add()lub remove() je z panelu albo pobrać listę widżetów, wywołując widgets() w panelu. Lista widżetów jest wystąpieniem klasy ui.data.ActiveList, co oznacza, że możesz konfigurować panel, manipulując listą i widżetami na niej.

ui.root

ui.root to stała instancja ui.Panel dla wszystkich elementów w Edytorze kodu poniżej paska poziomego. Domyślnie zawiera tylko 1 widżet: mapę domyślną. W szczególności element ui.root.widgets().get(0) jest obiektem Map (występującym w wersji ui.Map), który jest domyślnie wyświetlany w Edytorze kodu. Oprócz aliasu Map jedyną inną szczególną cechą domyślnej mapy jest to, że zawiera ona narzędzia do edycji geometrii. Aby uzyskać pustą kartę, na której możesz tworzyć interfejs, clear() domyślną mapęui.root z ui.root:

Edytor kodu (JavaScript)

ui.root.clear();

Możesz też zmodyfikować domyślną mapę w panelu głównym, dodając do niej widżety. Traktuj mapę jako panel z układem bezwzględnym (szczegóły znajdziesz w sekcji Układy). Ten przykład pokazuje modyfikację mapy domyślnej:

Edytor kodu (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);
});

Zwróć uwagę, że przykład modyfikuje domyślną mapę (czyli Map), traktując ją jako panel i dodając do niej widżety. Mapy mają układ bezwzględny, więc pozycja widżetu na mapie jest określana przez właściwość position właściwości style widżetu. Więcej informacji znajdziesz w sekcji Układ bezwzględny.

Gdy udostępnisz innemu użytkownikowi link do Edytora kodu, domyślnie panel ui.root zajmie większość okna, a edytor tekstu, panel Dokumenty i konsola będą ukryte. Za pomocą ui.root możesz kontrolować sposób wyświetlania skryptu przez innych użytkowników.

Układy

Układy określają sposób wyświetlania widżetów w panelu. Dostępne są 2 opcje układu: układ płynny i układ bezwzględny. Układy są określane za pomocą klasy ui.Panel.Layout. Ustaw układ panelu w konstruktorze lub za pomocą funkcji setLayout(). Kolejność dodawania widżetów określa, jak są one rozmieszczone w panelu z układem przepływu. Właściwość position każdego widżetu style określa sposób jego rozmieszczenia w panelu z układem bezwzględnym. Jeśli styl widżetu jest nieistotny dla układu, w którym jest umieszczony, jest ignorowany.

Płynięcie

Układ przepływu wyświetla widżety w wierszu ('horizontal') lub kolumnie ('vertical'). Widżety są układane w kolejności dodawania ich do panelu. Weźmy na przykład te przyciski dodane do panelu:

Edytor kodu (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);

Układ pionowy powinien wyglądać mniej więcej tak:

Zwróć uwagę, że width panelu ma wartość 300 pikseli, a wartość właściwości style stretch to 'horizontal'. Właściwość stylu stretch dotyczy widżetów w panelu z układem przepływu. Na przykład {stretch: 'horizontal'} oznacza, że widżet rozszerzy się, aby wypełnić dostępną poziomą przestrzeń w panelu. W poprzednim przykładzie zmień typ układu przepływu na 'horizontal', aby przyciski były rozmieszczone w wierszu zamiast w kolumnie.

W panelu z przepływem poziomym widżet rozciągnięty w poziomie rozszerza się, aby wypełnić dostępną przestrzeń po tym, jak wszystkie inne widżety zajmą swoją naturalną szerokość. Jeśli więcej niż jeden widget jest rozciągnięty w poziomie, dostępne miejsce w poziomie jest rozdzielone między te widżety. Rozciągnięty pionowo widget rozszerza się, aby wypełnić wysokość panelu.

W panelu przepływu pionowego widżet rozciąga się w pionowej, aby wypełnić dostępne miejsce po tym, jak wszystkie inne widżety zajmą swoje naturalne wysokość. Jeśli więcej niż 1 widżet jest rozciągnięty w pionie, dostępne miejsce w pionie jest rozdzielane między te widżety. Rozciągnięty w poziomie widget rozszerza się, aby wypełnić szerokość panelu.

Bezwzględna

Układ bezwzględny umieszcza widżety w określonych miejscach w panelu. W przeciwieństwie do układu przepływu pozycja widżetu jest określana przez właściwość position właściwości style widżetu, a nie przez kolejność dodawania widżetu do panelu. Ten przykład pokazuje panel root.ui z układem bezwzględnym (układ panelu głównego to domyślnie przepływ poziomy, ale można go ustawić za pomocą elementu ui.root.setLayout()):

Edytor kodu (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'));

Panel układu bezwzględnego powinien wyglądać mniej więcej tak:

widgets()

Gdy dodasz widżet do panelu, zostanie on dodany do listy widżetów panelu. Wywołanie widgets() w panelu zwraca wartość ui.data.ActiveList, za pomocą której można manipulować widżetami w panelu. Rozważmy ten przykład, w którym widżety są dodawane do panelu, a panel do panelu wyższego poziomu, a następnie wykres jest aktualizowany po kliknięciu mapy przez użytkownika:

Edytor kodu (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);

W tym przykładzie widać, że widżety są dodawane do panelu za pomocą funkcji add(). W funkcji wywołania zwrotnego zarejestrowanej do mapowania kliknięć lista widżetów panel jest zamiast tego modyfikowana. W szczególności trzeci widżet (który może, ale nie musi istnieć) jest tak skonfigurowany, że wyświetla nowy wykres NDVI w czasie. Więcej informacji o funkcjach obsługi zdarzeń znajdziesz na stronie Zdarzenia.