Eventi

Gli eventi vengono attivati dall'interazione dell'utente con un widget o da una modifica programmatica di un widget. Per eseguire un'azione quando si verifica l'evento, registra una funzione di callback sul widget con onClick() (per ui.Map o ui.Button) o onChange() (per tutti gli altri casi). Puoi anche specificare un callback nel costruttore. I parametri per i callback degli eventi variano a seconda del widget e del tipo di evento. Ad esempio, un ui.Textbox passa il valore della stringa attualmente inserito alle sue funzioni di callback dell'evento "click". Controlla il riferimento all'API nella scheda Documentazione per il tipo di parametro passato alle funzioni di callback di ciascun widget.

L'esempio seguente mostra più eventi derivanti da un'unica azione dell'utente di specificare un'immagine da visualizzare. Quando l'utente seleziona un'immagine, un altro widget di selezione viene aggiornato con le bande dell'immagine e mostra la prima banda nella mappa:

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

Tieni presente che quando l'utente seleziona un'immagine, l'elenco dei nomi delle bande dell'immagine viene caricato nel widget bandSelect, la prima banda viene impostata sul valore corrente, e la funzione onChange di bandSelect viene attivata automaticamente. Tieni inoltre presente l'utilizzo di evaluate() per ottenere in modo asincrono il valore di ComputedObject restituito da bandNames(). Scopri di più nella sezione Eventi asincroni.

Ascolto non attivo

Il metodo unlisten() consente di rimuovere le funzioni di callback registrate su un widget. Questa opzione è utile per evitare di attivare eventi che devono verificarsi solo una volta o in determinate circostanze. Il valore restituito di onClick() o onChange() è un ID che può essere passato a unlisten() per fare in modo che il widget smetta di chiamare la funzione. Per annullare la registrazione di tutti gli eventi o di eventi di un tipo specifico, chiama unlisten() senza argomenti o con un argomento di tipo di evento (ad es. 'click' o 'change'). L'esempio seguente mostra come unlisten() semplifica l'apertura e la chiusura di un riquadro:

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

Tieni presente che unlisten() viene utilizzato per impedire a Map di ascoltare gli eventi di clic per chiudere il riquadro quando è già chiuso.

Eventi asincroni

Se utilizzi un risultato di Earth Engine (ad esempio l'output numerico di una riduzione) in un widget, dovrai recuperare il valore dal server. (consulta questa pagina per dettagli su client e server in Earth Engine). Per evitare di bloccare l'intera UI durante il calcolo del valore, puoi utilizzare la funzione evaluate() per ottenere il valore in modo asincrono. La funzione evaluate() avvia una richiesta di un valore e, quando il valore è pronto, chiama una funzione di callback per eseguire un'azione con il risultato. Ad esempio, considera un'applicazione per ottenere il valore medio di una serie temporale NDVI in un punto:

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

Quando l'utente fa clic su un punto di questa mappa, viene attivata una chiamata reduceRegion() sul server. Questa operazione potrebbe richiedere del tempo. Per impedire all'applicazione di bloccarsi mentre Earth Engine esegue il calcolo, questo esempio registra una funzione di callback per il risultato, in particolare computedValue.evaluate(). Al termine del calcolo, viene visualizzato il risultato. Nel frattempo, viene visualizzato un messaggio per indicare che il calcolo è in corso.