Acara

Peristiwa diaktifkan oleh interaksi pengguna dengan widget atau perubahan terprogram pada widget. Untuk melakukan sesuatu saat peristiwa terjadi, daftarkan fungsi callback di widget dengan onClick() (untuk ui.Map atau ui.Button) atau onChange() (semua yang lain). Anda juga dapat menentukan callback di konstruktor. Parameter untuk callback peristiwa bervariasi bergantung pada widget dan jenis peristiwa. Misalnya, ui.Textbox meneruskan nilai string yang saat ini dimasukkan ke fungsi callback peristiwa 'klik'. Periksa referensi API di tab Dokumen untuk mengetahui jenis parameter yang diteruskan ke fungsi callback setiap widget.

Contoh berikut menunjukkan beberapa peristiwa yang berasal dari satu tindakan pengguna untuk menentukan gambar yang akan ditampilkan. Saat pengguna memilih gambar, widget pilihan lain akan diperbarui dengan band gambar dan menampilkan band pertama di peta:

Editor Kode (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);

Perhatikan bahwa saat pengguna memilih gambar, daftar nama band gambar dimuat ke widget bandSelect, band pertama ditetapkan ke nilai saat ini, dan fungsi onChange dari bandSelect diaktifkan secara otomatis. Perhatikan juga penggunaan evaluate() untuk mendapatkan nilai ComputedObject yang ditampilkan oleh bandNames() secara asinkron. Pelajari lebih lanjut di bagian Peristiwa Asinkron.

Membatalkan pemrosesan

Metode unlisten() memberikan kemampuan untuk menghapus fungsi callback yang terdaftar di widget. Hal ini berguna untuk mencegah peristiwa pemicu yang hanya boleh terjadi sekali, atau dalam situasi tertentu. Nilai yang ditampilkan onClick() atau onChange() adalah ID yang dapat diteruskan ke unlisten() agar widget berhenti memanggil fungsi. Untuk membatalkan pendaftaran semua peristiwa atau peristiwa dari jenis tertentu, panggil unlisten() tanpa argumen atau argumen jenis peristiwa (misalnya, 'click' atau 'change'). Contoh berikut menunjukkan unlisten() untuk memfasilitasi pembukaan dan penutupan panel:

Editor Kode (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);

Perhatikan bahwa unlisten() digunakan untuk menghentikan Map memproses peristiwa klik untuk menutup panel saat panel sudah ditutup.

Peristiwa Asink

Jika menggunakan hasil Earth Engine (seperti output numerik dari pengurangan) di widget, Anda harus mendapatkan nilai dari server. (Lihat halaman ini untuk mengetahui detail tentang klien vs. server di Earth Engine). Agar tidak menggantung seluruh UI saat nilai tersebut dihitung, Anda dapat menggunakan fungsi evaluate() untuk mendapatkan nilai secara asinkron. Fungsi evaluate() memulai permintaan untuk nilai, dan saat nilai siap, memanggil fungsi callback untuk melakukan sesuatu dengan hasilnya. Misalnya, pertimbangkan aplikasi untuk mendapatkan nilai rata-rata deret waktu NDVI pada suatu titik:

Editor Kode (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),
    }));
  });
});

Saat pengguna mengklik titik pada peta ini, panggilan reduceRegion() akan dipicu di server. Operasi ini mungkin memerlukan waktu beberapa saat. Untuk mencegah aplikasi diblokir saat Earth Engine melakukan komputasi, contoh ini mendaftarkan fungsi callback ke hasilnya, khususnya computedValue.evaluate(). Setelah komputasi selesai, hasilnya akan ditampilkan. Sementara itu, pesan akan ditampilkan untuk menunjukkan bahwa komputasi sedang berlangsung.