Diese Seite wurde von der Cloud Translation API übersetzt.

Ereignisse

Ereignisse werden durch Nutzerinteraktionen mit einem Widget oder durch programmatische Änderungen an einem Widget ausgelöst. Wenn beim Eintreten des Ereignisses eine bestimmte Aktion ausgeführt werden soll, registrieren Sie eine Rückruffunktion für das Widget mit entweder onClick() (für ui.Map oder ui.Button) oder onChange() (für alle anderen Ereignisse). Sie können auch einen Rückruf im Konstruktor angeben. Die Parameter für Ereignis-Callbacks variieren je nach Widget und Ereignistyp. Beispiel: Ein ui.Textbox gibt den aktuell eingegebenen Stringwert an die Callback-Funktionen des Ereignisses „click“ weiter. Sehen Sie in der API-Referenz auf dem Tab Docs nach, welcher Parameter an die Rückruffunktionen der einzelnen Widgets übergeben wird.

Im folgenden Beispiel werden mehrere Ereignisse dargestellt, die durch eine einzelne Nutzeraktion ausgelöst wurden, bei der ein Bild angegeben wurde, das angezeigt werden soll. Wenn der Nutzer ein Bild auswählt, wird ein anderes ausgewähltes Widget mit den Bändern des Bildes aktualisiert und der erste Band wird in der Karte angezeigt:

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

Wenn der Nutzer ein Bild auswählt, wird die Liste der Bandnamen des Bilds in das bandSelect-Widget geladen, die erste Band wird auf den aktuellen Wert gesetzt und die onChange-Funktion von bandSelect wird automatisch ausgelöst. Beachte auch die Verwendung von evaluate(), um den Wert von ComputedObject asynchron abzurufen, der von bandNames() zurückgegeben wird. Weitere Informationen finden Sie im Abschnitt Asynchrone Ereignisse.

Unlistening

Mit der unlisten()-Methode können Sie Callback-Funktionen entfernen, die für ein Widget registriert wurden. Das ist nützlich, um das Auslösen von Ereignissen zu verhindern, die nur einmal oder unter bestimmten Umständen auftreten sollten. Der Rückgabewert von onClick() oder onChange() ist eine ID, die an unlisten() übergeben werden kann, damit das Widget die Funktion nicht mehr aufruft. Wenn Sie alle Ereignisse oder Ereignisse eines bestimmten Typs abmelden möchten, rufen Sie unlisten() ohne Argumente oder mit einem Ereignistyp (z.B. 'click' oder 'change') auf. Im folgenden Beispiel wird unlisten() verwendet, um das Öffnen und Schließen eines Bereichs zu vereinfachen:

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

Beachten Sie, dass unlisten() verwendet wird, um Map daran zu hindern, nach Klickereignissen zu suchen, um den Bereich zu schließen, wenn er bereits geschlossen ist.

Asynchrone Ereignisse

Wenn Sie ein Earth Engine-Ergebnis (z. B. die numerische Ausgabe einer Reduzierung) in einem Widget verwenden, müssen Sie den Wert vom Server abrufen. Auf dieser Seite finden Sie weitere Informationen zum Unterschied zwischen Client und Server in Earth Engine. Damit die gesamte Benutzeroberfläche nicht hängt, während dieser Wert berechnet wird, können Sie die Funktion evaluate() verwenden, um den Wert asynchron abzurufen. Die evaluate()-Funktion startet eine Anfrage für einen Wert und ruft eine Rückruffunktion auf, um mit dem Ergebnis etwas zu tun, sobald der Wert verfügbar ist. Angenommen, Sie möchten den Mittelwert einer NDVI-Zeitreihe an einem Punkt ermitteln:

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

Wenn der Nutzer auf einen Punkt auf dieser Karte klickt, wird auf dem Server ein reduceRegion()-Aufruf ausgelöst. Dieser Vorgang kann einige Zeit dauern. Damit die Anwendung nicht blockiert wird, während Earth Engine die Berechnung durchführt, wird in diesem Beispiel eine Rückruffunktion für das Ergebnis registriert, nämlich computedValue.evaluate(). Wenn die Berechnung abgeschlossen ist, wird das Ergebnis angezeigt. In der Zwischenzeit wird eine Meldung angezeigt, die darauf hinweist, dass die Berechnung läuft.