אירועים

אירועים מופעלים על ידי אינטראקציה של משתמש עם ווידג'ט או שינוי פרוגרמטי בווידג'ט. כדי לבצע פעולה כלשהי כשהאירוע מתרחש, צריך לרשום פונקציית קריאה חוזרת (callback) בווידג'ט באמצעות onClick() (ל-ui.Map או ל-ui.Button) או onChange() (לכל שאר האירועים). אפשר גם לציין פונקציית קריאה חוזרת ב-constructor. הפרמטרים של קריאות החזרה (callbacks) של אירועים משתנים בהתאם לווידג'ט ולסוג האירוע. לדוגמה, ui.Textbox מעביר את הערך הנוכחי של המחרוזת שהוזנה לפונקציות הקריאה החוזרת (callbacks) של אירוע הקליק. תוכלו לבדוק את ההפניה ל-API בכרטיסייה Docs כדי לבדוק את סוג הפרמטר שמוענק לפונקציות ה-callback של כל ווידג'ט.

בדוגמה הבאה מוצגים כמה אירועים שמקורם בפעולה אחת של משתמש, שלפיה הוא מציין תמונה להצגה. כשהמשתמש בוחר תמונה, ווידג'ט אחר מתעדכן בצבעים של התמונה ומציג את הצבע הראשון במפה:

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

הערה: כשהמשתמש בוחר תמונה, רשימת שמות הערוצים של התמונה נטענת בווידג'ט bandSelect, הערוץ הראשון מוגדר לערך הנוכחי והפונקציה onChange של bandSelect מופעלת באופן אוטומטי. שימו לב גם לשימוש ב-evaluate() כדי לקבל באופן אסינכרוני את הערך של ComputedObject שהוחזר על ידי bandNames(). מידע נוסף זמין בקטע 'אירועים אסינכרונים'.

הפסקת ההאזנה

השיטה unlisten() מאפשרת להסיר פונקציות קריאה חוזרת (callbacks) שרשומים בווידג'ט. האפשרות הזו שימושית כדי למנוע הפעלה של אירועים שצריכים להתרחש רק פעם אחת או בנסיבות מסוימות. הערך המוחזר של onClick() או onChange() הוא מזהה שאפשר להעביר אל unlisten() כדי לגרום לווידג'ט להפסיק לקרוא לפונקציה. כדי לבטל את הרישום של כל האירועים או של אירועים מסוג ספציפי, צריך להפעיל את unlisten() ללא ארגומנטים או עם ארגומנט של סוג אירוע (למשל 'click' או 'change'), בהתאמה. בדוגמה הבאה מוצגת הפונקציה unlisten() שמאפשרת לפתוח ולסגור חלונית:

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

שימו לב ש-unlisten() משמש כדי להפסיק את ההאזנה של Map לאירועי לחיצה כדי לסגור את החלונית כשהיא כבר סגורה.

אירועים אסינכרונים

אם משתמשים בתוצאה של Earth Engine (כמו הפלט המספרי של הפחתה) בווידג'ט, צריך לקבל את הערך מהשרת. (בדף הזה מוסבר מה ההבדל בין לקוח לשרת ב-Earth Engine). כדי למנוע את השהיה של כל ממשק המשתמש בזמן החישוב של הערך, אפשר להשתמש בפונקציה evaluate() כדי לקבל את הערך באופן אסינכרוני. הפונקציה evaluate() מתחילה בקשה לקבלת ערך, וכשהערך מוכן היא קוראת לפונקציית קריאה חוזרת כדי לבצע פעולה כלשהי עם התוצאה. לדוגמה, נניח שרוצים לקבל את הערך הממוצע של סדרת זמן של NDVI בנקודה מסוימת:

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

כשהמשתמש לוחץ על נקודה במפה הזו, נקרא קריאה ל-reduceRegion() בשרת. הפעולה הזו עשויה להימשך זמן מה. כדי למנוע את החסימה של האפליקציה בזמן החישוב ב-Earth Engine, בדוגמה הזו מתועדת פונקציית קריאה חוזרת (callback) לתוצאה, ובפרט computedValue.evaluate(). בסיום החישוב, התוצאה מוצגת. בינתיים, תוצג הודעה כדי לציין שהחישוב מתבצע.