Wydarzenia

Zdarzenia są wywoływane przez interakcje użytkownika z widżetem lub programowe zmiany w widżecie. Aby wykonać jakąś czynność po wystąpieniu zdarzenia, zarejestruj funkcję wywołania w widżecie, używając parametru onClick() (w przypadku zdarzeń ui.Map lub ui.Button) lub onChange() (w przypadku wszystkich innych zdarzeń). Możesz też podać w konstruktorze funkcję wywołania zwrotnego. Parametry wywołań zdarzeń różnią się w zależności od typu widżetu i zdarzenia. Na przykład funkcja ui.Textbox przekazuje bieżącą wartość ciągu znaków do funkcji wywołania zwrotnego zdarzenia „click”. W dokumentacji interfejsu API na karcie Dokumenty sprawdź, jaki typ parametru jest przekazywany do funkcji wywołania zwrotnego każdego widżetu.

Ten przykład pokazuje wiele zdarzeń pochodzących z jednego działania użytkownika polegającego na wskazaniu obrazu do wyświetlenia. Gdy użytkownik wybierze obraz, inny widżet wyboru zostanie zaktualizowany o pasma obrazu i wyświetli pierwszy pasmo na mapie:

Edytor kodu (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);

Pamiętaj, że gdy użytkownik wybierze obraz, do widżetu bandSelect zostanie załadowana lista nazw pasm obrazu, pierwsze pasmo zostanie ustawione na bieżącą wartość, a funkcja onChange z poziomu bandSelect zostanie wywołana automatycznie. Zwróć też uwagę na użycie funkcji evaluate(), która asynchronicznie pobiera wartość ComputedObject zwracaną przez funkcję bandNames(). Więcej informacji znajdziesz w sekcji Zdarzenia asynchroniczne.

Odsłuchanie

Metoda unlisten() umożliwia usuwanie funkcji wywołania zwrotnego zarejestrowanych w widżecie. Jest to przydatne, aby zapobiec wywoływaniu zdarzeń, które powinny występować tylko raz lub w określonych okolicznościach. Zwracana wartość funkcji onClick() lub onChange() to identyfikator, który można przekazać funkcji unlisten(), aby widget przestał wywoływać funkcję. Aby anulować rejestrację wszystkich zdarzeń lub zdarzeń określonego typu, wywołaj funkcję unlisten() odpowiednio bez argumentów lub z argumentem typu zdarzenia (np. 'click' lub 'change'). Poniższy przykład pokazuje, jak za pomocą unlisten() ułatwić otwieranie i zamykanie panelu:

Edytor kodu (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);

Zwróć uwagę, że unlisten() służy do zatrzymywania odbioru zdarzeń kliknięcia przez Map, aby zamknąć panel, gdy jest on już zamknięty.

Zdarzenia asynchroniczne

Jeśli w widżecie używasz wyniku z Earth Engine (np. wyniku liczbowego z redukcji), musisz pobrać wartość z serwera. (szczegółowe informacje na temat podziału na klienta i serwer w Earth Engine znajdziesz na tej stronie). Aby uniknąć zawieszania całego interfejsu użytkownika podczas obliczania tej wartości, możesz użyć funkcji evaluate(), aby uzyskać wartość asynchronicznie. Funkcja evaluate() rozpoczyna żądanie dotyczące wartości, a gdy ta jest gotowa, wywołuje funkcję wywołania zwrotnego, aby wykonać z nią jakąś operację. Rozważmy na przykład aplikację, która ma zwracać średnią wartość ciągu czasowego NDVI w danym punkcie:

Edytor kodu (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),
    }));
  });
});

Gdy użytkownik kliknie punkt na mapie, na serwerze zostanie wywołana funkcja reduceRegion(). Ta operacja może chwilę potrwać. Aby zapobiec blokowaniu aplikacji podczas przetwarzania danych przez Earth Engine, w tym przykładzie rejestrowana jest funkcja wywołania zwrotnego do wyniku, konkretnie computedValue.evaluate(). Po zakończeniu obliczeń wyświetlany jest wynik. W międzyczasie wyświetla się komunikat informujący o trwającym przetwarzaniu.