Événements

Les événements sont déclenchés par l'interaction de l'utilisateur avec un widget ou par un changement programmatique d'un widget. Pour effectuer une action lorsque l'événement se produit, enregistrez une fonction de rappel sur le widget avec onClick() (pour ui.Map ou ui.Button) ou onChange() (pour tout le reste). Vous pouvez également spécifier un rappel dans le constructeur. Les paramètres des rappels d'événement varient en fonction du widget et du type d'événement. Par exemple, un ui.Textbox transmet la valeur de la chaîne actuellement saisie à ses fonctions de rappel d'événement "click". Consultez la référence de l'API dans l'onglet Documentation pour connaître le type de paramètre transmis aux fonctions de rappel de chaque widget.

L'exemple suivant illustre plusieurs événements provenant d'une seule action utilisateur consistant à spécifier une image à afficher. Lorsque l'utilisateur sélectionne une image, un autre widget de sélection est mis à jour avec les bandes de l'image et affiche la première bande sur la carte:

Éditeur de code (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);

Notez que lorsque l'utilisateur sélectionne une image, la liste des noms de bandes de l'image est chargée dans le widget bandSelect, la première bande est définie sur la valeur actuelle et la fonction onChange de bandSelect est déclenchée automatiquement. Notez également l'utilisation de evaluate() pour obtenir de manière asynchrone la valeur de l'ComputedObject renvoyée par bandNames(). Pour en savoir plus, consultez la section Événements asynchrones.

Désactivation de l'écoute

La méthode unlisten() permet de supprimer les fonctions de rappel enregistrées sur un widget. Cela permet d'éviter de déclencher des événements qui ne doivent se produire qu'une seule fois ou dans certaines circonstances. La valeur renvoyée par onClick() ou onChange() est un ID qui peut être transmis à unlisten() pour que le widget cesse d'appeler la fonction. Pour désenregistrer tous les événements ou les événements d'un type spécifique, appelez unlisten() sans argument ou avec un argument de type d'événement (par exemple, 'click' ou 'change'), respectivement. L'exemple suivant montre comment utiliser unlisten() pour faciliter l'ouverture et la fermeture d'un panneau:

Éditeur de code (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);

Notez que unlisten() est utilisé pour empêcher Map d'écouter les événements de clic pour fermer le panneau lorsqu'il est déjà fermé.

Événements asynchrones

Si vous utilisez un résultat Earth Engine (comme la sortie numérique d'une réduction) dans un widget, vous devez obtenir la valeur du serveur. (consultez cette page pour en savoir plus sur le client et le serveur dans Earth Engine). Pour éviter que l'UI entière ne se bloque pendant le calcul de cette valeur, vous pouvez utiliser la fonction evaluate() pour obtenir la valeur de manière asynchrone. La fonction evaluate() lance une requête pour une valeur et, lorsque la valeur est prête, appelle une fonction de rappel pour effectuer une action avec le résultat. Prenons l'exemple d'une application permettant d'obtenir la valeur moyenne d'une série temporelle NDVI à un point:

Éditeur de code (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),
    }));
  });
});

Lorsque l'utilisateur clique sur un point de cette carte, un appel reduceRegion() est déclenché sur le serveur. Cette opération peut prendre un certain temps. Pour éviter que l'application ne se bloque pendant le calcul d'Earth Engine, cet exemple enregistre une fonction de rappel sur le résultat, plus précisément computedValue.evaluate(). Une fois le calcul terminé, le résultat s'affiche. En attendant, un message s'affiche pour indiquer que le calcul est en cours.