Bảng điều khiển và bố cục

Panels

ui.Panel là một vùng chứa giao diện người dùng cấp cao để sắp xếp các tiện ích. Mỗi ui.Panel có một đối tượng ui.Panel.Layout kiểm soát cách sắp xếp các tiện ích trên màn hình. Tìm hiểu thêm trong phần bố cục. Các bảng điều khiển cũng duy trì danh sách các tiện ích (có thể bao gồm các bảng điều khiển khác) đã được thêm vào. Để quản lý các tiện ích trong bảng điều khiển, hãy add() hoặc remove() các tiện ích đó từ bảng điều khiển hoặc truy xuất danh sách tiện ích bằng cách gọi widgets() trên bảng điều khiển. Danh sách tiện ích là một thực thể của ui.data.ActiveList, nghĩa là bạn có thể định cấu hình bảng điều khiển bằng cách thao tác với danh sách và các tiện ích trong đó.

ui.root

ui.root là một thực thể cố định của ui.Panel cho mọi thứ trong Trình chỉnh sửa mã bên dưới thanh ngang. Theo mặc định, lớp này chỉ chứa một tiện ích duy nhất: bản đồ mặc định. Cụ thể, mục tại ui.root.widgets().get(0) là đối tượng Map (một thực thể của ui.Map) hiển thị theo mặc định trong Trình soạn thảo mã). Ngoài bí danh Map, điều đặc biệt duy nhất khác về Bản đồ mặc định là bản đồ này có các công cụ chỉnh sửa hình học. Để lấy một canvas trống để xây dựng giao diện người dùng, hãy clear() bản đồ mặc định từ ui.root:

Trình soạn thảo mã (JavaScript)

ui.root.clear();

Ngoài ra, bạn có thể sửa đổi bản đồ mặc định trong bảng điều khiển gốc bằng cách thêm các tiện ích vào đó. Cụ thể, hãy coi bản đồ là một bảng điều khiển có bố cục tuyệt đối (xem phần Bố cục để biết thông tin chi tiết). Ví dụ sau đây minh hoạ một nội dung sửa đổi của bản đồ mặc định:

Trình soạn thảo mã (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);
});

Xin lưu ý rằng ví dụ này sửa đổi bản đồ mặc định (là Map) bằng cách coi bản đồ đó là một bảng điều khiển và thêm các tiện ích vào đó. Vì bản đồ có bố cục tuyệt đối, nên vị trí của một tiện ích trên bản đồ được xác định bằng thuộc tính position của thuộc tính style của tiện ích. Hãy xem phần bố cục tuyệt đối để biết thông tin chi tiết.

Khi bạn chia sẻ đường liên kết đến Trình soạn thảo mã với người dùng khác, theo mặc định, ui.root chiếm phần lớn cửa sổ, đồng thời trình soạn thảo văn bản, bảng điều khiển tài liệu và bảng điều khiển sẽ bị ẩn. Bằng cách kiểm soát bố cục ui.root, bạn có thể kiểm soát cách người dùng khác trải nghiệm tập lệnh của bạn.

Bố cục

Bố cục kiểm soát cách sắp xếp các tiện ích trong một bảng điều khiển để hiển thị. Có hai tuỳ chọn bố cục được mô tả dưới đây: bố cục luồng và bố cục tuyệt đối. Bố cục được chỉ định bằng lớp ui.Panel.Layout. Đặt bố cục của bảng điều khiển trong hàm khởi tạo hoặc bằng setLayout(). Thứ tự thêm tiện ích xác định cách sắp xếp các tiện ích trong bảng điều khiển có bố cục luồng. Thuộc tính position của style của mỗi tiện ích xác định cách sắp xếp tiện ích trong bảng điều khiển có bố cục tuyệt đối. Nếu kiểu trên một tiện ích không liên quan đến bố cục mà tiện ích đó được đặt, thì kiểu đó sẽ bị bỏ qua.

Flow

Bố cục luồng hiển thị các tiện ích theo hàng ('horizontal') hoặc cột ('vertical'). Các tiện ích được sắp xếp theo thứ tự thêm vào bảng điều khiển. Ví dụ: hãy xem xét các nút sau đây được thêm vào một bảng điều khiển:

Trình soạn thảo mã (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);

Bố cục dọc sẽ có dạng như sau:

Xin lưu ý rằng width của bảng điều khiển được đặt thành 300 pixel và stretch được đặt thành 'horizontal' bằng thuộc tính style. Thuộc tính kiểu stretch áp dụng cho các tiện ích trong bảng điều khiển có bố cục luồng. Ví dụ: {stretch: 'horizontal'} có nghĩa là tiện ích sẽ mở rộng để lấp đầy không gian ngang có sẵn trong bảng điều khiển. Trong ví dụ trước, hãy thay đổi loại bố cục flow thành 'horizontal' để xem các nút được sắp xếp theo hàng thay vì cột.

Trong bảng điều khiển luồng ngang, một tiện ích được kéo giãn theo chiều ngang sẽ mở rộng để lấp đầy không gian có sẵn sau khi tất cả các tiện ích khác đã chiếm chiều rộng tự nhiên. Nếu nhiều tiện ích được kéo giãn theo chiều ngang, thì không gian theo chiều ngang hiện có sẽ được chia cho các tiện ích đó. Một tiện ích được kéo giãn theo chiều dọc sẽ mở rộng để lấp đầy chiều cao của bảng điều khiển.

Trong bảng điều khiển luồng dọc, một tiện ích được kéo giãn theo chiều dọc sẽ mở rộng để lấp đầy không gian có sẵn sau khi tất cả các tiện ích khác đã chiếm chiều cao tự nhiên. Nếu nhiều tiện ích được kéo giãn theo chiều dọc, thì không gian dọc hiện có sẽ được chia cho các tiện ích đó. Một tiện ích được kéo giãn theo chiều ngang sẽ mở rộng để lấp đầy chiều rộng của bảng điều khiển.

Tuyệt đối

Bố cục tuyệt đối đặt các tiện ích theo vị trí trong bảng điều khiển. Không giống như bố cục luồng, vị trí của tiện ích được xác định bằng thuộc tính position của thuộc tính style của tiện ích, chứ không phải thứ tự thêm tiện ích vào bảng điều khiển. Ví dụ sau đây minh hoạ cách sử dụng bảng điều khiển root.ui với bố cục tuyệt đối (theo mặc định, bố cục của bảng điều khiển gốc là luồng ngang, nhưng có thể được đặt bằng ui.root.setLayout()):

Trình soạn thảo mã (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'));

Bảng điều khiển bố cục tuyệt đối sẽ có dạng như sau:

widgets()

Khi bạn thêm một tiện ích vào một bảng điều khiển, tiện ích đó sẽ được thêm vào danh sách tiện ích của bảng điều khiển. Việc gọi widgets() trên bảng điều khiển sẽ trả về ui.data.ActiveList mà bạn có thể dùng để thao tác với các tiện ích trong bảng điều khiển. Hãy xem xét ví dụ sau đây, ví dụ này thêm các tiện ích vào một bảng điều khiển, thêm bảng điều khiển vào bảng điều khiển gốc, sau đó cập nhật biểu đồ khi người dùng nhấp vào bản đồ:

Trình soạn thảo mã (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);

Trong ví dụ này, trước tiên, hãy quan sát việc các tiện ích được thêm vào bảng điều khiển bằng cách sử dụng add(). Trong hàm gọi lại được đăng ký để liên kết các lượt nhấp, danh sách tiện ích của panel sẽ được sửa đổi. Cụ thể, tiện ích thứ ba (có thể có hoặc không có) được thiết lập để hiển thị một biểu đồ mới về NDVI theo thời gian. Tìm hiểu thêm về các hàm xử lý sự kiện trên trang Sự kiện.