패널 및 레이아웃

패널

ui.Panel는 위젯을 배치하는 상위 UI 컨테이너입니다. 각 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 별칭 외의 유일한 특징은 도형 편집 도구가 포함되어 있다는 점입니다. UI를 빌드할 빈 캔버스를 가져오려면 ui.root에서 기본 맵을 clear()합니다.

코드 편집기 (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를 수정합니다. 지도에는 절대 레이아웃이 있으므로 지도에서 위젯의 위치는 위젯의 style 속성의 position 속성에 따라 결정됩니다. 자세한 내용은 절대 레이아웃 섹션을 참고하세요.

Code 편집기 링크를 다른 사용자와 공유하면 기본적으로 ui.root이 창의 대부분을 차지하고 텍스트 편집기, Docs 패널, 콘솔이 숨겨집니다. ui.root 레이아웃을 제어하여 다른 사용자가 스크립트를 사용하는 방식을 제어할 수 있습니다.

레이아웃

레이아웃은 패널의 위젯이 표시되도록 정렬되는 방식을 제어합니다. 레이아웃 옵션에는 아래에 설명된 흐름 레이아웃과 절대 레이아웃의 두 가지가 있습니다. 레이아웃은 ui.Panel.Layout 클래스로 지정됩니다. 생성자 또는 setLayout()를 사용하여 패널의 레이아웃을 설정합니다. 위젯이 추가되는 순서에 따라 흐름 레이아웃이 적용된 패널에 위젯이 정렬되는 방식이 결정됩니다. 각 위젯의 style에 있는 position 속성은 절대 레이아웃이 있는 패널에서 위젯이 정렬되는 방식을 결정합니다. 위젯의 스타일이 위젯이 배치된 레이아웃과 관련이 없는 경우 무시됩니다.

흐름

흐름 레이아웃은 행 ('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는 style 속성으로 'horizontal'로 설정됩니다. stretch 스타일 속성은 흐름 레이아웃이 있는 패널의 위젯에 적용됩니다. 예를 들어 {stretch: 'horizontal'}는 위젯이 패널 내에서 사용 가능한 가로 공간을 채우도록 확장됨을 의미합니다. 이전 예에서 흐름 레이아웃 유형을 'horizontal'로 변경하면 버튼이 열이 아닌 행으로 정렬된 것을 볼 수 있습니다.

가로 흐름 패널에서 가로로 늘어난 위젯은 다른 모든 위젯이 자연 너비를 차지한 후 사용 가능한 공간을 채우도록 확장됩니다. 위젯이 두 개 이상 가로로 늘어나면 사용 가능한 가로 공간이 위젯 간에 분할됩니다. 세로로 늘어난 위젯은 패널의 높이를 채우도록 확장됩니다.

세로 흐름 패널에서 세로로 늘어난 위젯은 다른 모든 위젯이 자연 높이를 차지한 후 사용 가능한 공간을 채우도록 확장됩니다. 위젯이 세로로 늘어나는 경우 사용 가능한 세로 공간이 위젯 간에 분할됩니다. 가로로 늘어난 위젯은 패널의 너비를 채우도록 확장됩니다.

절대

절대 레이아웃은 패널의 위치에 따라 위젯을 배치합니다. 흐름 레이아웃과 달리 위젯의 위치는 패널에 추가되는 순서가 아니라 위젯의 style 속성의 position 속성에 따라 결정됩니다. 다음 예는 절대 레이아웃으로 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의 새 차트가 표시되도록 설정됩니다. 이벤트 페이지에서 이벤트 처리 함수에 대해 자세히 알아보세요.