Sự kiện

Sự kiện được kích hoạt khi người dùng tương tác với một tiện ích hoặc thay đổi theo phương thức lập trình đối với một tiện ích. Để thực hiện một thao tác nào đó khi sự kiện xảy ra, hãy đăng ký một hàm gọi lại trên tiện ích bằng onClick() (đối với ui.Map hoặc ui.Button) hoặc onChange() (mọi thứ khác). Bạn cũng có thể chỉ định một lệnh gọi lại trong hàm khởi tạo. Các tham số cho lệnh gọi lại sự kiện thay đổi tuỳ thuộc vào loại tiện ích và sự kiện. Ví dụ: ui.Textbox truyền giá trị chuỗi hiện đã nhập vào các hàm gọi lại sự kiện "nhấp". Hãy kiểm tra tài liệu tham khảo API trong thẻ Tài liệu để biết loại tham số được truyền đến các hàm gọi lại của từng tiện ích.

Ví dụ sau đây minh hoạ nhiều sự kiện bắt nguồn từ một hành động của người dùng là chỉ định một hình ảnh để hiển thị. Khi người dùng chọn một hình ảnh, một tiện ích chọn khác sẽ được cập nhật bằng các dải của hình ảnh và hiển thị dải đầu tiên trong bản đồ:

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

// Load some images.
var dem = ee.Image('NASA/NASADEM_HGT/001');
var veg = ee.Image('NOAA/VIIRS/001/VNP13A1/2022_06_02')
  .select(['EVI', 'EVI2', 'NDVI']);

// Make a drop-down menu of bands.
var bandSelect = ui.Select({
  placeholder: 'Select a band...',
  onChange: function(value) {
    var layer = ui.Map.Layer(imageSelect.getValue().select(value));
    // Use set() instead of add() so the previous layer (if any) is overwritten.
    Map.layers().set(0, layer);
  }
});

// Make a drop down menu of images.
var imageSelect = ui.Select({
  items: [
    {label: 'NASADEM', value: dem},
    {label: 'VIIRS Veg', value: veg}
  ],
  placeholder: 'Select an image...',
  onChange: function(value) {
    // Asynchronously get the list of band names.
    value.bandNames().evaluate(function(bands) {
      // Display the bands of the selected image.
      bandSelect.items().reset(bands);
      // Set the first band to the selected band.
      bandSelect.setValue(bandSelect.items().get(0));
    });
  }
});

print(imageSelect);
print(bandSelect);

Xin lưu ý rằng khi người dùng chọn một hình ảnh, danh sách tên dải tần của hình ảnh sẽ được tải vào tiện ích bandSelect, dải tần đầu tiên được đặt thành giá trị hiện tại và hàm onChange của bandSelect sẽ được kích hoạt tự động. Ngoài ra, hãy lưu ý việc sử dụng evaluate() để không đồng bộ lấy giá trị của ComputedObject do bandNames() trả về. Tìm hiểu thêm trong phần Sự kiện không đồng bộ.

Ngừng nghe

Phương thức unlisten() cung cấp khả năng xoá các hàm gọi lại đã đăng ký trên một tiện ích. Điều này rất hữu ích để ngăn các sự kiện kích hoạt chỉ xảy ra một lần hoặc trong một số trường hợp nhất định. Giá trị trả về của onClick() hoặc onChange() là một mã nhận dạng có thể được truyền đến unlisten() để yêu cầu tiện ích ngừng gọi hàm. Để huỷ đăng ký tất cả sự kiện hoặc sự kiện thuộc một loại cụ thể, hãy gọi unlisten() không có đối số hoặc đối số loại sự kiện (ví dụ: 'click' hoặc 'change'). Ví dụ sau đây minh hoạ unlisten() để hỗ trợ việc mở và đóng bảng điều khiển:

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

// Create a panel, initially hidden.
var panel = ui.Panel({
  style: {
    width: '400px',
    shown: false
  },
  widgets: [
    ui.Label('Click on the map to collapse the settings panel.')
  ]
});

// Create a button to unhide the panel.
var button = ui.Button({
  label: 'Open settings',
  onClick: function() {
    // Hide the button.
    button.style().set('shown', false);
    // Display the panel.
    panel.style().set('shown', true);

    // Temporarily make a map click hide the panel
    // and show the button.
    var listenerId = Map.onClick(function() {
      panel.style().set('shown', false);
      button.style().set('shown', true);
      // Once the panel is hidden, the map should not
      // try to close it by listening for clicks.
      Map.unlisten(listenerId);
    });
  }
});

// Add the button to the map and the panel to root.
Map.add(button);
ui.root.insert(0, panel);

Hãy quan sát rằng unlisten() được dùng để ngăn Map nghe các sự kiện nhấp để đóng bảng điều khiển khi bảng điều khiển đã đóng.

Sự kiện không đồng bộ

Nếu sử dụng kết quả của Earth Engine (chẳng hạn như kết quả số từ một lần giảm) trong một tiện ích, bạn sẽ cần lấy giá trị từ máy chủ. (Xem trang này để biết thông tin chi tiết về máy khách so với máy chủ trong Earth Engine). Để tránh treo toàn bộ giao diện người dùng trong khi giá trị đó được tính toán, bạn có thể sử dụng hàm evaluate() để nhận giá trị một cách không đồng bộ. Hàm evaluate() bắt đầu một yêu cầu cho một giá trị và khi giá trị đó đã sẵn sàng, hãy gọi một hàm gọi lại để thực hiện một thao tác nào đó với kết quả. Ví dụ: hãy xem xét một ứng dụng để lấy giá trị trung bình của một chuỗi thời gian NDVI tại một điểm:

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

// Load and display an NDVI image.
var ndvi = ee.ImageCollection('LANDSAT/COMPOSITES/C02/T1_L2_8DAY_NDVI')
    .filterDate('2014-01-01', '2015-01-01');
var vis = {min: 0, max: 1, palette: ['99c199', '006400']};
Map.addLayer(ndvi.median(), vis, 'NDVI');

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

// Create a panel and add it to the map.
var inspector = ui.Panel([ui.Label('Click to get mean NDVI')]);
Map.add(inspector);

Map.onClick(function(coords) {
  // Show the loading label.
  inspector.widgets().set(0, ui.Label({
    value: 'Loading...',
    style: {color: 'gray'}
  }));

  // Determine the mean NDVI, a long-running server operation.
  var point = ee.Geometry.Point(coords.lon, coords.lat);
  var meanNdvi = ndvi.reduce('mean');
  var sample = meanNdvi.sample(point, 30);
  var computedValue = sample.first().get('NDVI_mean');

  // Request the value from the server.
  computedValue.evaluate(function(result) {
    // When the server returns the value, show it.
    inspector.widgets().set(0, ui.Label({
      value: 'Mean NDVI: ' + result.toFixed(2),
    }));
  });
});

Khi người dùng nhấp vào một điểm trên bản đồ này, lệnh gọi reduceRegion() sẽ được kích hoạt trên máy chủ. Thao tác này có thể mất chút thời gian. Để ngăn ứng dụng chặn trong khi Earth Engine đang tính toán, ví dụ này sẽ đăng ký một hàm gọi lại cho kết quả, cụ thể là computedValue.evaluate(). Khi quá trình tính toán hoàn tất, kết quả sẽ hiển thị. Trong thời gian chờ đợi, một thông báo sẽ hiển thị để cho biết rằng quá trình tính toán đang diễn ra.