الأحداث

يتم تشغيل الأحداث من خلال تفاعل المستخدِم مع التطبيق المصغّر أو إجراء تغيير آلي على التطبيق المصغّر. لتنفيذ إجراء عند وقوع الحدث، سجِّل دالة استدعاء في القطعة باستخدام onClick() (لـ ui.Map أو ui.Button) أو onChange() (لكل ما عدا ذلك). يمكنك أيضًا تحديد دالة استدعاء في دالة الإنشاء. تختلف المَعلمات المُستخدَمة في وظائف الاستدعاء للأحداث حسب التطبيق المصغّر ونوع الحدث. على سبيل المثال، تمرِّر ui.Textbox قيمة السلسلة التي تم إدخالها حاليًا إلى وظائف ردّ الاتصال الخاصة بالحدث "click". راجِع مرجع واجهة برمجة التطبيقات في علامة التبويب المستندات لمعرفة نوع المَعلمة التي يتم تمريرها إلى دوالّ الاستدعاء لكلّ تطبيق مصغّر.

يوضّح المثال التالي أحداثًا متعددة ناتجة عن إجراء واحد للمستخدِم وهو تحديد صورة لعرضها. عندما يختار المستخدم صورة، يتم تعديل عنصر تحكم آخر محدّد باستخدام نطاقات الصورة وعرض النطاق الأول في الخريطة:

محرِّر الرموز البرمجية (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);

يُرجى العلم أنّه عندما يختار المستخدم صورة، يتم تحميل قائمة بأسماء نطاقات الصورة في التطبيق المصغّر bandSelect، ويتم ضبط النطاق الأول على القيمة الحالية، ويتم تشغيل الدالة onChange في bandSelect تلقائيًا. يُرجى ملاحظة استخدام evaluate() للحصول على قيمة العنصر ComputedObject الذي يعرضه bandNames() بشكل غير متزامن. اطّلِع على مزيد من المعلومات في قسم "الأحداث غير المتزامنة".

إيقاف الاستماع

توفّر طريقة unlisten() إمكانية إزالة دوالّ ردّ الاتصال المسجّلة في التطبيق المصغّر. ويُعدّ ذلك مفيدًا لمنع بدء الأحداث التي يجب أن تحدث مرة واحدة فقط أو في ظروف معيّنة. قيمة العرض للدالة onClick() أو onChange() هي معرّف يمكن تمريره إلى unlisten() لإيقاف التطبيق المصغّر عن استدعاء الدالة. لإلغاء تسجيل جميع الأحداث أو الأحداث من نوع معيّن، استخدِم unlisten() بدون مَعلمات أو مَعلمة نوع حدث (مثل 'click' أو 'change')، على التوالي. يوضّح المثال التالي استخدام unlisten() لتسهيل فتح اللوحة وإغلاقها:

محرِّر الرموز البرمجية (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);

يُرجى ملاحظة أنّه يتم استخدام unlisten() لإيقاف Map عن الاستماع إلى أحداث النقر لإغلاق اللوحة عندما تكون اللوحة مغلقة.

الأحداث غير المتزامنة

إذا كنت تستخدم نتيجة من Earth Engine (مثل الإخراج الرقمي من عملية تقليل) في تطبيقات مصغّرة، عليك الحصول على القيمة من الخادم. (اطّلِع على هذه الصفحة للحصول على تفاصيل عن العميل في مقابل الخادم في Earth Engine). لتجنُّب تعليق واجهة المستخدم بالكامل أثناء احتساب هذه القيمة، يمكنك استخدام الدالة evaluate() للحصول على القيمة بشكل غير متزامن. تبدأ الدالة evaluate() طلبًا للحصول على قيمة، وعندما تكون القيمة جاهزة، تستدعي دالة ردّ اتصال لإجراء عملية مع النتيجة. على سبيل المثال، لنفترض أنّ هناك تطبيقًا للحصول على القيمة المتوسطة لسلسلة زمنية لمؤشر NDVI في نقطة معيّنة:

محرِّر الرموز البرمجية (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),
    }));
  });
});

عندما ينقر المستخدم على نقطة على هذه الخريطة، يتم تشغيل طلب reduceRegion() على الخادم. قد تستغرق هذه العملية بعض الوقت. لمنع التطبيق من الحظر أثناء احتساب Earth Engine، يسجِّل هذا المثال دالة استدعاء للنتيجة، وتحديدًا computedValue.evaluate(). عند انتهاء عملية الحساب ، يتم عرض النتيجة. في هذه الأثناء، يتم عرض رسالة لتحديد أنّ عملية الحساب قيد التقدّم.