กิจกรรม

เหตุการณ์จะทริกเกอร์เมื่อผู้ใช้โต้ตอบกับวิดเจ็ตหรือการเปลี่ยนแปลงแบบเป็นโปรแกรมในวิดเจ็ต หากต้องการดำเนินการเมื่อเกิดเหตุการณ์ ให้ลงทะเบียนฟังก์ชันการเรียกกลับในวิดเจ็ตด้วย onClick() (สําหรับ ui.Map หรือ ui.Button) หรือ onChange() (สําหรับรายการอื่นๆ ทั้งหมด) นอกจากนี้ คุณยังระบุการเรียกกลับในคอนสตรัคเตอร์ได้ด้วย พารามิเตอร์สําหรับการเรียกเหตุการณ์กลับจะแตกต่างกันไปโดยขึ้นอยู่กับวิดเจ็ตและประเภทเหตุการณ์ เช่น ui.Textbox จะส่งค่าสตริงที่ป้อนในปัจจุบันไปยังฟังก์ชัน Callback ของเหตุการณ์ "คลิก" ตรวจสอบข้อมูลอ้างอิง API ในแท็บเอกสารเพื่อดูประเภทพารามิเตอร์ที่ส่งไปยังฟังก์ชันการเรียกกลับของวิดเจ็ตแต่ละรายการ

ตัวอย่างต่อไปนี้แสดงเหตุการณ์หลายรายการที่มาจากการกระทำของผู้ใช้รายเดียวในการระบุรูปภาพที่จะแสดง เมื่อผู้ใช้เลือกรูปภาพ วิดเจ็ต "เลือก" อีกรายการหนึ่งจะอัปเดตด้วยย่านของรูปภาพและแสดงย่านแรกในแผนที่

เครื่องมือแก้ไขโค้ด (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() ช่วยให้คุณนําฟังก์ชัน Callback ที่ลงทะเบียนในวิดเจ็ตออกได้ ซึ่งมีประโยชน์ในการป้องกันการทริกเกอร์เหตุการณ์ที่ควรเกิดขึ้นเพียงครั้งเดียวหรือในบางสถานการณ์เท่านั้น ค่าที่แสดงผลของ 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 ได้ที่หน้านี้) หากไม่ต้องการให้ UI ทั้งหมดค้างขณะที่คำนวณค่านั้น คุณสามารถใช้ฟังก์ชัน evaluate() เพื่อรับค่าแบบไม่พร้อมกันได้ ฟังก์ชัน evaluate() จะเริ่มต้นคําขอค่า และเมื่อค่าพร้อมแล้ว ก็จะเรียกฟังก์ชัน Callback เพื่อทำบางอย่างกับผลลัพธ์ ตัวอย่างเช่น ลองพิจารณาแอปพลิเคชันเพื่อหาค่าเฉลี่ยของอนุกรมเวลา 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()ในเซิร์ฟเวอร์ การดำเนินการนี้อาจใช้เวลาสักครู่ ตัวอย่างนี้จะลงทะเบียนฟังก์ชันการเรียกกลับไปยังผลลัพธ์โดยเฉพาะ computedValue.evaluate() เพื่อไม่ให้แอปพลิเคชันบล็อกขณะที่ Earth Engine กำลังประมวลผล เมื่อการคํานวณเสร็จสิ้นแล้ว ระบบจะแสดงผลลัพธ์ ในระหว่างนี้ ระบบจะแสดงข้อความเพื่อบ่งบอกว่ากำลังประมวลผล