Etkinlikler

Etkinlikler, kullanıcının widget'la etkileşimi veya widget'ta programatik bir değişiklik yapılmasıyla tetiklenir. Etkinlik gerçekleştiğinde bir işlem yapmak için widget'a onClick() (ui.Map veya ui.Button için) ya da onChange() (diğer her şey için) ile geri çağırma işlevi kaydedin. Ayrıca, oluşturucuda bir geri çağırma işlevi de belirtebilirsiniz. Etkinlik geri çağırmalarının parametreleri, widget'a ve etkinlik türüne göre değişir. Örneğin, ui.Textbox, şu anda girilen dize değerini "tıklama" etkinliği geri çağırma işlevlerine iletir. Her widget'ın geri çağırma işlevlerine iletilen parametre türü için Dokümanlar sekmesindeki API referansını kontrol edin.

Aşağıdaki örnekte, görüntülenecek bir resim belirtme işleminin tek bir kullanıcı hareketinden kaynaklanan birden fazla etkinliği gösterilmektedir. Kullanıcı bir resim seçtiğinde, başka bir seçili widget, resmin bantlarıyla güncellenir ve haritadaki ilk bandı gösterir:

Kod Düzenleyici (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);

Kullanıcı bir resim seçtiğinde, resmin bant adlarının listesinin bandSelect widget'ına yüklendiğini, ilk bandın mevcut değere ayarlandığını ve bandSelect widget'ının onChange işlevinin otomatik olarak tetiklendiğini unutmayın. Ayrıca, bandNames() tarafından döndürülen ComputedObject değerini eşzamansız olarak almak için evaluate()'ün kullanıldığını unutmayın. Eşzamansız Etkinlikler bölümünden daha fazla bilgi edinebilirsiniz.

Dinlemeyi bırakma

unlisten() yöntemi, bir widget'a kayıtlı geri çağırma işlevlerini kaldırma olanağı sunar. Bu, yalnızca bir kez veya belirli koşullar altında gerçekleşmesi gereken etkinliklerin tetiklenmesini önlemek için kullanışlıdır. onClick() veya onChange() işlevinin döndürdüğü değer, widget'ın işlevi çağırmasını durdurmak için unlisten() işlevine iletilebilecek bir kimliktir. Tüm etkinliklerin veya belirli bir türdeki etkinliklerin kaydını silmek için unlisten() işlevini sırasıyla hiçbir bağımsız değişken veya etkinlik türü (ör. 'click' veya 'change') bağımsız değişkeniyle çağırın. Aşağıdaki örnekte, bir panelin açılmasını ve kapanmasını kolaylaştırmak için unlisten() gösterilmektedir:

Kod Düzenleyici (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);

Panel zaten kapalıyken paneli kapatmak için Map'ın tıklama etkinliklerini dinlemesini durdurmak amacıyla unlisten()'ün kullanıldığını unutmayın.

Eşzamansız Etkinlikler

Bir widget'ta Earth Engine sonucu (ör. azaltma işleminden elde edilen sayısal çıktı) kullanıyorsanız değeri sunucudan almanız gerekir. (Earth Engine'da istemci ve sunucu hakkında ayrıntılı bilgi için bu sayfaya bakın). Bu değer hesaplanırken kullanıcı arayüzünün tamamının kilitlenmesini önlemek için değeri asenkron olarak almak üzere evaluate() işlevini kullanabilirsiniz. evaluate() işlevi bir değer isteği başlatır ve değer hazır olduğunda sonuçla ilgili bir işlem yapması için bir geri çağırma işlevi çağırır. Örneğin, bir noktadaki NDVI zaman serisinin ortalama değerini elde etmek için bir uygulama düşünün:

Kod Düzenleyici (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),
    }));
  });
});

Kullanıcı bu haritada bir noktayı tıkladığında sunucuda bir reduceRegion() çağrısı tetiklenir. Bu işlem biraz zaman alabilir. Earth Engine hesaplama yaparken uygulamanın kilitlenmesini önlemek için bu örnekte, sonuçta (özellikle computedValue.evaluate()) bir geri çağırma işlevi kaydedilir. Hesaplama tamamlandığında sonuç gösterilir. Bu sırada, hesaplamanın devam ettiğini belirten bir mesaj gösterilir.