Eventos

Los eventos se activan por la interacción del usuario con un widget o un cambio programático en un widget. Para hacer algo cuando se produce el evento, registra una función de devolución de llamada en el widget con onClick() (para ui.Map o ui.Button) o onChange() (para todo lo demás). También puedes especificar una devolución de llamada en el constructor. Los parámetros de las devoluciones de llamada de eventos varían según el widget y el tipo de evento. Por ejemplo, un ui.Textbox pasa el valor de cadena ingresado actualmente a sus funciones de devolución de llamada de eventos de "clic". Consulta la referencia de la API en la pestaña Docs para conocer el tipo de parámetro que se pasa a las funciones de devolución de llamada de cada widget.

En el siguiente ejemplo, se muestran varios eventos que se originan a partir de una sola acción del usuario de especificar una imagen para mostrar. Cuando el usuario selecciona una imagen, se actualiza otro widget de selección con las bandas de la imagen y se muestra la primera banda en el mapa:

Editor de código (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);

Ten en cuenta que, cuando el usuario selecciona una imagen, la lista de los nombres de las bandas de la imagen se carga en el widget bandSelect, la primera banda se establece en el valor actual y la función onChange de bandSelect se activa automáticamente. También observa el uso de evaluate() para obtener de forma asíncrona el valor de ComputedObject que muestra bandNames(). Obtén más información en la sección Eventos asíncronos.

Cómo dejar de escuchar

El método unlisten() proporciona la capacidad de quitar las funciones de devolución de llamada registradas en un widget. Esto es útil para evitar activar eventos que solo deben ocurrir una vez o en ciertas circunstancias. El valor que se muestra de onClick() o onChange() es un ID que se puede pasar a unlisten() para que el widget deje de llamar a la función. Para anular el registro de todos los eventos o de eventos de un tipo específico, llama a unlisten() sin argumentos o con un argumento de tipo de evento (p.ej., 'click' o 'change'), respectivamente. En el siguiente ejemplo, se muestra unlisten() para facilitar la apertura y el cierre de un panel:

Editor de código (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);

Observa que se usa unlisten() para evitar que Map escuche eventos de clic para cerrar el panel cuando ya está cerrado.

Eventos asíncronos

Si usas un resultado de Earth Engine (como el resultado numérico de una reducción) en un widget, deberás obtener el valor del servidor. (consulta esta página para obtener detalles sobre el cliente y el servidor en Earth Engine). Para evitar que se cuelgue toda la IU mientras se calcula ese valor, puedes usar la función evaluate() para obtener el valor de forma asíncrona. La función evaluate() comienza una solicitud para un valor y, cuando el valor está listo, llama a una función de devolución de llamada para hacer algo con el resultado. Por ejemplo, considera una aplicación para obtener el valor promedio de una serie temporal de NDVI en un punto:

Editor de código (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),
    }));
  });
});

Cuando el usuario hace clic en un punto de este mapa, se activa una llamada a reduceRegion() en el servidor. Esta operación puede tardar un poco. Para evitar que la aplicación se bloquee mientras Earth Engine está realizando cálculos, este ejemplo registra una función de devolución de llamada en el resultado, específicamente computedValue.evaluate(). Cuando finaliza el procesamiento, se muestra el resultado. Mientras tanto, se muestra un mensaje para indicar que el procesamiento está en curso.