แผงและเลย์เอาต์

แผง

ui.Panel คือคอนเทนเนอร์ UI ระดับบนสุดสําหรับจัดเรียงวิดเจ็ต ui.Panel แต่ละรายการมีออบเจ็กต์ ui.Panel.Layout ที่ควบคุมการจัดเรียงวิดเจ็ตบนหน้าจอ ดูข้อมูลเพิ่มเติมได้ในส่วนเลย์เอาต์ แผงยังเก็บรายการวิดเจ็ต (ซึ่งอาจรวมถึงแผงอื่นๆ) ที่เพิ่มเข้ามาด้วย หากต้องการจัดการวิดเจ็ตในแผง ให้add()หรือremove()วิดเจ็ตจากแผง หรือเรียกใช้รายการวิดเจ็ตโดยเรียกwidgets()ในแผง รายการวิดเจ็ตคืออินสแตนซ์ของ ui.data.ActiveList ซึ่งหมายความว่าคุณสามารถกําหนดค่าแผงได้โดยการจัดการรายการและวิดเจ็ตในนั้น

ui.root

ui.root คืออินสแตนซ์แบบคงที่ของ ui.Panel สําหรับทุกอย่างในตัวแก้ไขโค้ดใต้แถบแนวนอน โดยค่าเริ่มต้น หน้านี้จะมีวิดเจ็ตเพียงรายการเดียว ซึ่งเป็นแผนที่เริ่มต้น กล่าวโดยละเอียดคือ รายการที่ ui.root.widgets().get(0) คือออบเจ็กต์ Map (อินสแตนซ์ของ ui.Map) ที่แสดงโดยค่าเริ่มต้นในเครื่องมือแก้ไขโค้ด) นอกจากชื่อแทน Map แล้ว สิ่งพิเศษอีกอย่างเกี่ยวกับแผนที่เริ่มต้นคือมีเครื่องมือแก้ไขเรขาคณิต หากต้องการรับผืนผ้าใบเปล่าสำหรับสร้าง UI ให้ทำดังนี้ clear() แผนที่เริ่มต้นจาก ui.root

เครื่องมือแก้ไขโค้ด (JavaScript)

ui.root.clear();

หรือจะแก้ไขแผนที่เริ่มต้นในแผงรูทโดยการเพิ่มวิดเจ็ตลงในแผนที่ก็ได้ กล่าวโดยละเอียดคือ ให้คิดว่าแผนที่เป็นแผงที่มีเลย์เอาต์แบบสัมบูรณ์ (ดูรายละเอียดได้ในส่วนเลย์เอาต์) ตัวอย่างต่อไปนี้แสดงการแก้ไขแผนที่เริ่มต้น

เครื่องมือแก้ไขโค้ด (JavaScript)

// Load a VIIRS surface reflectance image and display on the map.
var image = ee.Image('NOAA/VIIRS/001/VNP09GA/2022_06_05').select('M.*');
Map.addLayer(image, {bands: ['M5', 'M4', 'M3'], min: 0, max: 4e3, gamma: 1.5});

// Create the title label.
var title = ui.Label('Click to inspect');
title.style().set('position', 'top-center');
Map.add(title);

// Create a panel to hold the chart.
var panel = ui.Panel();
panel.style().set({
  width: '400px',
  position: 'bottom-right'
});
Map.add(panel);

// Register a function to draw a chart when a user clicks on the map.
Map.style().set('cursor', 'crosshair');
Map.onClick(function(coords) {
  panel.clear();
  var point = ee.Geometry.Point(coords.lon, coords.lat);
  var chart = ui.Chart.image.regions(image, point, null, 30);
  chart.setOptions({title: 'Band values'});
  panel.add(chart);
});

โปรดทราบว่าตัวอย่างนี้แก้ไขแผนที่เริ่มต้น (Map) โดยถือว่าแผนที่เป็นแผงและเพิ่มวิดเจ็ตเข้าไป เนื่องจากแผนที่มีเลย์เอาต์แบบสัมบูรณ์ ตำแหน่งของวิดเจ็ตบนแผนที่จึงกำหนดโดยพร็อพเพอร์ตี้ position ของพร็อพเพอร์ตี้ style ของวิดเจ็ต ดูรายละเอียดได้ที่ส่วนเลย์เอาต์แบบสัมบูรณ์

เมื่อคุณแชร์ลิงก์เครื่องมือแก้ไขโค้ดกับผู้ใช้รายอื่น ui.root จะกินพื้นที่ส่วนใหญ่ของหน้าต่างโดยค่าเริ่มต้น และเครื่องมือแก้ไขข้อความ แผงเอกสาร และคอนโซลจะซ่อนอยู่ การควบคุมเลย์เอาต์ ui.root จะช่วยให้คุณควบคุมประสบการณ์การใช้งานสคริปต์ของผู้ใช้รายอื่นได้

เลย์เอาต์

เลย์เอาต์จะควบคุมวิธีจัดเรียงวิดเจ็ตในแผงเพื่อแสดง เลย์เอาต์มี 2 ตัวเลือกตามที่อธิบายไว้ด้านล่าง ได้แก่ เลย์เอาต์แบบตามลำดับและเลย์เอาต์แบบสัมบูรณ์ ระบุเลย์เอาต์ด้วยคลาส ui.Panel.Layout ตั้งค่าเลย์เอาต์ของแผงในคอนสตรัคเตอร์หรือใช้ setLayout() ลำดับการเพิ่มวิดเจ็ตจะเป็นตัวกำหนดวิธีจัดเรียงวิดเจ็ตในแผงที่มีเลย์เอาต์แบบโฟลว์ พร็อพเพอร์ตี้ position ของวิดเจ็ตแต่ละรายการจะกำหนดวิธีจัดเรียงวิดเจ็ตในแผงที่มีเลย์เอาต์แบบสัมบูรณ์style หากสไตล์ในวิดเจ็ตไม่เกี่ยวข้องกับเลย์เอาต์ที่วางวิดเจ็ตไว้ ระบบจะไม่สนใจสไตล์นั้น

น้ำไหล

เลย์เอาต์แบบโฟลว์จะแสดงวิดเจ็ตเป็นแถว ('horizontal') หรือคอลัมน์ ('vertical') โดยจัดเรียงตามลำดับที่เพิ่มลงในแผง ตัวอย่างเช่น ลองพิจารณาปุ่มต่อไปนี้ที่เพิ่มลงในแผง

เครื่องมือแก้ไขโค้ด (JavaScript)

// Create a panel with vertical flow layout.
var panel = ui.Panel({
  layout: ui.Panel.Layout.flow('vertical'),
  style: {width: '300px'}
});

// Add a bunch of buttons.
for (var i = 0; i < 30; i++) {
  panel.add(ui.Button({label: 'Button ' + i, style: {stretch: 'horizontal'}}));
}

ui.root.clear();
ui.root.add(panel);

เลย์เอาต์แนวตั้งควรมีลักษณะดังนี้

โปรดทราบว่า width ของแผงได้รับการตั้งค่าเป็น 300 พิกเซล และ stretch ได้รับการตั้งค่าเป็น 'horizontal' ด้วยพร็อพเพอร์ตี้ style พร็อพเพอร์ตี้สไตล์ stretch ใช้กับวิดเจ็ตในแผงที่มีเลย์เอาต์แบบโฟลว์ เช่น {stretch: 'horizontal'} หมายความว่าวิดเจ็ตจะขยายเพื่อเติมเต็มพื้นที่แนวนอนที่มีอยู่ภายในแผง ในตัวอย่างก่อนหน้านี้ ให้เปลี่ยนประเภทเลย์เอาต์แบบโฟลว์เป็น 'horizontal' เพื่อดูปุ่มที่จัดเรียงเป็นแถวแทนคอลัมน์

ในแผงการไหลแนวนอน วิดเจ็ตที่ยืดแนวนอนจะขยายเพื่อเติมเต็มพื้นที่ว่างหลังจากที่วิดเจ็ตอื่นๆ ทั้งหมดใช้ความกว้างตามปกติแล้ว หากมีการขยายวิดเจ็ตมากกว่า 1 รายการในแนวนอน ระบบจะแบ่งพื้นที่แนวนอนที่มีอยู่ระหว่างวิดเจ็ตเหล่านั้น วิดเจ็ตที่ยืดในแนวตั้งจะขยายให้เต็มความสูงของแผง

ในแผงการไหลแนวตั้ง วิดเจ็ตที่ยืดแนวตั้งจะขยายเพื่อเติมเต็มพื้นที่ว่างหลังจากที่วิดเจ็ตอื่นๆ ทั้งหมดใช้ความสูงตามปกติแล้ว หากมีการยืดวิดเจ็ตแนวตั้งมากกว่า 1 รายการ ระบบจะแบ่งพื้นที่แนวตั้งที่มีอยู่ระหว่างวิดเจ็ตเหล่านั้น วิดเจ็ตที่ยืดในแนวนอนจะขยายให้เต็มความกว้างของแผง

สัมบูรณ์

เลย์เอาต์แบบสัมบูรณ์จะจัดตําแหน่งวิดเจ็ตตามตําแหน่งในแผง ตำแหน่งของวิดเจ็ตจะกำหนดโดยพร็อพเพอร์ตี้ position ของพร็อพเพอร์ตี้ style ของวิดเจ็ต ไม่ใช่ลำดับที่เพิ่มลงในแผง ซึ่งต่างจากเลย์เอาต์แบบโฟลว์ ตัวอย่างต่อไปนี้แสดงการใช้แผง root.ui ที่มีเลย์เอาต์แบบสัมบูรณ์ (เลย์เอาต์ของแผงรูทคือโฟลว์แนวนอนโดยค่าเริ่มต้น แต่สามารถตั้งค่าได้ด้วย ui.root.setLayout())

เครื่องมือแก้ไขโค้ด (JavaScript)

ui.root.clear();
ui.root.setLayout(ui.Panel.Layout.absolute());

// A function to make buttons labeled by position.
function makeButton(position) {
  return ui.Button({
    label: position,
    style: {position: position}
  });
}

// Add labeled buttons to the panel.
ui.root.add(makeButton('top-left'));
ui.root.add(makeButton('top-center'));
ui.root.add(makeButton('top-right'));
ui.root.add(makeButton('middle-left'));
ui.root.add(makeButton('middle-right'));
ui.root.add(makeButton('bottom-left'));
ui.root.add(makeButton('bottom-center'));
ui.root.add(makeButton('bottom-right'));

แผงเลย์เอาต์แบบสัมบูรณ์ควรมีลักษณะดังนี้

widgets()

เมื่อคุณเพิ่มวิดเจ็ตลงในแผง ระบบจะเพิ่มวิดเจ็ตนั้นลงในรายการวิดเจ็ตของแผง การเรียกใช้ widgets() ในแผงจะแสดงผล ui.data.ActiveList ซึ่งคุณใช้เพื่อจัดการวิดเจ็ตในแผงได้ พิจารณาตัวอย่างต่อไปนี้ ซึ่งเพิ่มวิดเจ็ตลงในแผง เพิ่มแผงลงในแผงรูท จากนั้นอัปเดตแผนภูมิเมื่อผู้ใช้คลิกแผนที่

เครื่องมือแก้ไขโค้ด (JavaScript)

// Load and display NDVI data.
var ndvi = ee.ImageCollection('NOAA/VIIRS/001/VNP13A1')
    .filterDate('2021-01-01', '2022-01-01').select('NDVI');
Map.addLayer(
  ndvi.median(), {min: 0, max: 10000, palette: ['99c199', '006400']}, 'NDVI');

// Configure the map.
Map.setCenter(-94.84497, 39.01918, 8);
Map.style().set('cursor', 'crosshair');

// Create an empty panel in which to arrange widgets.
// The layout is vertical flow by default.
var panel = ui.Panel({style: {width: '400px'}})
    .add(ui.Label('Click on the map'));

// Set a callback function for when the user clicks the map.
Map.onClick(function(coords) {
  // Create or update the location label (the second widget in the panel)
  var location = 'lon: ' + coords.lon.toFixed(2) + ' ' +
                 'lat: ' + coords.lat.toFixed(2);
  panel.widgets().set(1, ui.Label(location));

  // Add a red dot to the map where the user clicked.
  var point = ee.Geometry.Point(coords.lon, coords.lat);
  Map.layers().set(1, ui.Map.Layer(point, {color: 'FF0000'}));

  // Create a chart of NDVI over time.
  var chart = ui.Chart.image.series(ndvi, point, ee.Reducer.mean(), 200)
      .setOptions({
        title: 'NDVI Over Time',
        vAxis: {title: 'NDVI'},
        lineWidth: 1,
        pointSize: 3,
      });

  // Add (or replace) the third widget in the panel by
  // manipulating the widgets list.
  panel.widgets().set(2, chart);
});

// Add the panel to the ui.root.
ui.root.add(panel);

ในตัวอย่างนี้ โปรดสังเกตว่าก่อนอื่นระบบจะเพิ่มวิดเจ็ตลงในแผงโดยใช้ add() ในฟังก์ชัน Callback ที่ลงทะเบียนเพื่อแมปการคลิก ระบบจะแก้ไขรายการวิดเจ็ตของ panel แทน กล่าวโดยละเอียดคือ มีการตั้งค่าวิดเจ็ตที่ 3 (ซึ่งอาจมีหรือไม่มีก็ได้) เพื่อให้แสดงแผนภูมิ NDVI ใหม่ตามช่วงเวลา ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันการจัดการเหตุการณ์ในหน้าเหตุการณ์