رویداد

رویدادها با تعامل کاربر با یک ویجت یا تغییر برنامه‌ای به یک ویجت فعال می‌شوند. برای انجام کاری در هنگام رخ دادن رویداد، یک تابع callback در ویجت با onClick() (برای ui.Map یا ui.Button ) یا onChange() (هر چیز دیگری) ثبت کنید. شما همچنین می توانید یک callback در سازنده مشخص کنید. پارامترهای مربوط به تماس های رویداد بسته به ویجت و نوع رویداد متفاوت است. به عنوان مثال، یک ui.Textbox مقدار رشته وارد شده فعلی را به توابع بازگشت به تماس رویداد "کلیک" خود ارسال می کند. مرجع API را در برگه Docs برای نوع پارامتر ارسال شده به توابع پاسخ به تماس هر ویجت بررسی کنید.

مثال زیر چندین رویداد را نشان می دهد که از یک اقدام کاربر منفرد برای تعیین یک تصویر برای نمایش منشأ می گیرند. هنگامی که کاربر یک تصویر را انتخاب می کند، ویجت انتخابی دیگری با باندهای تصویر به روز می شود و اولین باند را در نقشه نمایش می دهد:

ویرایشگر کد (جاوا اسکریپت)

// 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);

توجه داشته باشید که وقتی کاربر یک تصویر را انتخاب می کند، لیست نام باندهای تصویر در ویجت bandSelect بارگذاری می شود، اولین باند روی مقدار فعلی تنظیم می شود و تابع onChange bandSelect به طور خودکار فعال می شود. همچنین به استفاده از evaluate() برای دریافت ناهمزمان مقدار ComputedObject که توسط bandNames() برگردانده شده است توجه کنید. در بخش رویدادهای ناهمزمان بیشتر بیاموزید.

بدون گوش دادن

متد unlisten() توانایی حذف توابع برگشت به تماس ثبت شده در ویجت را فراهم می کند. این برای جلوگیری از ایجاد رویدادهایی که فقط یک بار یا تحت شرایط خاص باید رخ دهند مفید است. مقدار بازگشتی onClick() یا onChange() شناسه ای است که می تواند به unlisten() ارسال شود تا ویجت دیگر فراخوانی تابع را متوقف کند. برای لغو ثبت همه رویدادها یا رویدادهای یک نوع خاص، به ترتیب، unlisten() بدون آرگومان یا آرگومان نوع رویداد (مثلاً 'click' یا 'change' ) فراخوانی کنید. مثال زیر unlisten() را برای تسهیل باز و بسته شدن پانل نشان می دهد:

ویرایشگر کد (جاوا اسکریپت)

// 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);

توجه داشته باشید که unlisten() برای متوقف کردن Map از گوش دادن به رویدادهای کلیک برای بستن پانل زمانی که پانل قبلا بسته است استفاده می شود.

رویدادهای ناهمزمان

اگر از نتیجه موتور زمین (مانند خروجی عددی حاصل از کاهش) در ویجت استفاده می کنید، باید مقدار را از سرور دریافت کنید. (برای جزئیات بیشتر در مورد مشتری در مقابل سرور در Earth Engine به این صفحه مراجعه کنید). برای اینکه در حین محاسبه آن مقدار کل UI را آویزان نکنید، می توانید evaluate() value برای دریافت مقدار به صورت ناهمزمان استفاده کنید. evaluate() value درخواست یک مقدار را آغاز می کند و زمانی که مقدار آماده شد، یک تابع callback را فراخوانی می کند تا کاری را با نتیجه انجام دهد. به عنوان مثال، برنامه ای را برای بدست آوردن مقدار میانگین یک سری زمانی NDVI در یک نقطه در نظر بگیرید:

ویرایشگر کد (جاوا اسکریپت)

// 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),
    }));
  });
});

هنگامی که کاربر روی نقطه ای از این نقشه کلیک می کند، فراخوانی reduceRegion() روی سرور راه اندازی می شود. این عملیات ممکن است کمی طول بکشد. برای جلوگیری از مسدود شدن برنامه در حالی که Earth Engine در حال محاسبه است، این مثال تابع callback را در نتیجه ثبت می‌کند، به‌ویژه computedValue.evaluate() . هنگامی که محاسبات به پایان رسید، نتیجه نمایش داده می شود. در این بین پیامی نمایش داده می شود که نشان می دهد محاسبات در حال انجام است.