วิดเจ็ต

วิดเจ็ตที่คุณสามารถใช้ในการสร้าง UI นั้นมีมากมาย วิดเจ็ตเหล่านี้รวมถึงปุ่ม ช่องทำเครื่องหมาย แถบเลื่อน กล่องข้อความ และเมนูการเลือก คุณสามารถพิมพ์หรือเพิ่มวิดเจ็ตลงในแผงได้เพียงครั้งเดียวเท่านั้น ส่วนต่อไปนี้แสดงฟังก์ชันการทำงานพื้นฐาน รูปลักษณ์ และความรู้สึกของวิดเจ็ต ดูข้อมูลเพิ่มเติมได้ที่ส่วนสไตล์สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดสไตล์วิดเจ็ต ตัวอย่างต่อไปนี้เป็นเพียงการprint()วิดเจ็ตไปยังคอนโซล โปรดดูรายละเอียดเกี่ยวกับการเพิ่มวิดเจ็ตลงในแผงได้ที่หน้าแผงและเลย์เอาต์

ui.Label

ป้ายกำกับเป็นเพียงพื้นที่ที่แสดงข้อความ ตัวอย่างเช่น โค้ดต่อไปนี้จะพิมพ์ป้ายกำกับ

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

var label = ui.Label('Cool label!');
print(label);

ซึ่งมีลักษณะดังนี้

แบ่งป้ายกำกับยาวๆ โดยการแทรกอักขระการขึ้นบรรทัดใหม่ (\n) และตั้งค่าอาร์กิวเมนต์พร็อพเพอร์ตี้สไตล์ whiteSpace เป็น 'pre'

print(ui.Label('Here is a:\nnew line', {whiteSpace: 'pre'}));

ui.Button

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

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

var button = ui.Button({
  label: 'Get Map Center',
  onClick: function() {
    print(Map.getCenter());
  }
});
print(button);

ซึ่งมีลักษณะดังนี้

ui.Checkbox

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

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

var checkbox = ui.Checkbox('Show SRTM layer', true);

checkbox.onChange(function(checked) {
  // Shows or hides the first map layer based on the checkbox's value.
  Map.layers().get(0).setShown(checked);
});

Map.addLayer(ee.Image('CGIAR/SRTM90_V4'));
print(checkbox);

ช่องทำเครื่องหมายที่พิมพ์ออกมาควรมีลักษณะดังนี้

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

ui.Slider

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

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

var slider = ui.Slider();

slider.setValue(0.9);  // Set a default value.
slider.onChange(function(value) {
  Map.layers().get(0).setOpacity(value);
});

Map.addLayer(ee.Image(255), {palette: 'blue'});
print(slider);

แถบเลื่อนควรมีลักษณะดังนี้

โปรดทราบว่าค่าแถบเลื่อนจะแสดงอยู่ทางด้านขวาของแถบเลื่อน

ui.DateSlider

วิดเจ็ต DateSlider คล้ายกับวิดเจ็ต Slider แต่จัดการวันที่อย่างชัดแจ้ง DateSlider ที่กําหนดค่าให้เลือกวันจากเดือนมิถุนายน 2018 จะมีลักษณะดังนี้

DateSlider มีประโยชน์สำหรับการกรองคอลเล็กชัน ดังที่แสดงในตัวอย่างต่อไปนี้ ซึ่งจะสร้างคอมโพสิตรายปีตาม DateRange ที่กําหนดไว้ใน DateSlider

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

// Use a DateSlider to create annual composites of this collection.
var collection = ee.ImageCollection('LANDSAT/LC08/C02/T1');
// Use the start of the collection and now to bound the slider.
var start = ee.Image(collection.first()).date().get('year').format();
var now = Date.now();
var end = ee.Date(now).format();

// Run this function on a change of the dateSlider.
var showMosaic = function(range) {
  var mosaic = ee.Algorithms.Landsat.simpleComposite({
    collection: collection.filterDate(range.start(), range.end())
  });
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var visParams = {bands: ['B4', 'B3', 'B2'], max: 100};
    var layer = ui.Map.Layer(mosaic, visParams, name + ' composite');
    Map.layers().set(0, layer);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showMosaic,
    style: {width: '180px'}
  });
  Map.add(dateSlider.setValue(now));
});

// Initialize the map location at southern Africa.
Map.setCenter(23.861, -27.144, 6);

ui.Textbox

กล่องข้อความเป็นตําแหน่งที่จะรวบรวมข้อความที่ผู้ใช้ป้อน เช่น

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

var textbox = ui.Textbox({
  placeholder: 'Enter text here...',
  onChange: function(text) {
    print('So what you are saying is ' + text + '?');
  }
});
print(textbox);

กล่องข้อความควรมีลักษณะดังนี้

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

ui.Select

วิดเจ็ตเลือกแสดงเมนูแบบเลื่อนลงของตัวเลือกที่ผู้ใช้เลือกได้ ตัวอย่างต่อไปนี้แสดงเมนูแบบเลื่อนลงที่อนุญาตให้ผู้ใช้เลือกสถานที่ตั้ง

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

var places = {
  MTV: [-122.0849, 37.3887],
  PEK: [116.4056, 39.9097],
  ZRH: [8.536, 47.376]
};

var select = ui.Select({
  items: Object.keys(places),
  onChange: function(key) {
    Map.setCenter(places[key][0], places[key][1]);
  }
});

// Set a place holder.
select.setPlaceholder('Choose a location...');

print(select);

วิดเจ็ตที่เลือกควรมีลักษณะดังนี้

ui.Chart

แผนภูมิในแพ็กเกจ ui.Chart จะทํางานคล้ายกับแผนภูมิในแพ็กเกจ Chart กล่าวโดยละเอียดคือ ui.Chart คือเปลือกบางๆ ล้อมรอบอินสแตนซ์ของ ChartWrapper ของ Google Visualization API ดูข้อมูลเพิ่มเติมเกี่ยวกับการดําเนินการกับออบเจ็กต์ ChartWrapper ได้ที่ข้อมูลอ้างอิงนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันตัวช่วยแผนภูมิใน Earth Engine ได้ที่เอกสารแผนภูมิ

ui.Thumbnail

วิดเจ็ตภาพขนาดย่อสามารถใช้แสดงตัวอย่างออบเจ็กต์ ee.Image และ ee.ImageCollection เมื่อได้รับ ee.Image วิดเจ็ตจะแสดงภาพนิ่ง เมื่อได้รับ ee.ImageCollection วิดเจ็ตจะแสดงภาพเคลื่อนไหวที่มี 1 เฟรมต่อรูปภาพในอินพุต คุณสามารถระบุพารามิเตอร์เพื่อควบคุมรูปแบบและขนาดของภาพขนาดย่อที่ได้ เช่นเดียวกับ ee.Image.getThumbURL() และ ee.ImageCollection.getVideoThumbURL()

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

// Create a box around an area in the Brazilian Amazon.
var box = ee.Geometry.Polygon([[
  [-62.9564, 2.5596], [-62.9550, 2.4313], [-62.8294, 2.4327], [-62.8294, 2.5596]
]]);

// Visualize the image in RGB.
var image = ee.Image('LANDSAT/LE07/C02/T1_L2/LE07_233058_20011113')
                .select(['SR_B[1-3]'])  // blue, green, red reflectance
                .multiply(0.0000275).add(-0.2)  // apply scaling factors
                .visualize({
                  bands: ['SR_B3', 'SR_B2', 'SR_B1'],
                  min: 0,
                  max: 0.12,
                  gamma: 1.3
                });

// Print a thumbnail to the console.
print(ui.Thumbnail({
  image: image,
  params: {dimensions: '256x256', region: box, format: 'png'},
  style: {height: '300px', width: '300px'}
}));

ภาพปกควรมีลักษณะดังนี้

ui.Map

ui.Map คือวิดเจ็ตแผนที่ (อันที่จริงแล้ว เครื่องมือแก้ไขโค้ดเริ่มต้นแผนที่คืออินสแตนซ์ของคลาสนี้) คุณสามารถพิมพ์แผนที่ไปยังคอนโซลได้เช่นเดียวกับวิดเจ็ตอื่นๆ จัดการเนื้อหาของแผนที่โดยการล้าง รับ หรือตั้งค่าเลเยอร์แต่ละเลเยอร์ ตัวอย่างต่อไปนี้จะพิมพ์แผนที่ไปยังคอนโซลซึ่งแสดงขอบเขตของแผนที่เครื่องมือแก้ไขโค้ด

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

// Make a little map.
var map = ui.Map();

// Make the little map display an inset of the big map.
var createInset = function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  map.centerObject(bounds);
  map.clear();
  map.addLayer(bounds);
};

// Run it once to initialize.
createInset();

// Get a new inset map whenever you click on the big map.
Map.onClick(createInset);

// Display the inset map in the console.
print(map);

แผนที่ที่ฝังควรมีลักษณะดังนี้

ในตัวอย่างนี้ ผู้ใช้ต้องคลิกแผนที่ขนาดใหญ่เพื่อดูแผนที่ย่อยที่จะวาดในแผนที่ขนาดเล็ก

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

ui.Map.Layer

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

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

var consoleMap = ui.Map({
  lon: -2.0174,
  lat: 48.6474,
  zoom: 13
});

// Create a Layer from this Sentinel-2 image
var image = ee.Image('COPERNICUS/S2/20150821T111616_20160314T094808_T30UWU');
var visParams = {bands: ['B4', 'B3', 'B2'], max: 2048, gamma: 1};
var layer = ui.Map.Layer(image, visParams);

// Update the map by updating the layers list.
var layers = consoleMap.layers();
layers.add(layer);

// Make a textbox to accept a gamma value.
// Update the layer when the gamma value is entered.
var gammaBox = ui.Textbox({
  value: 1,
  onChange: function(value) {
    // visParams is NOT an ActiveDictionary, so set it again.
    visParams.gamma = value;
    layer.setVisParams(visParams);
  }
});

print(ui.Label('Enter a gamma value:'));
print(gammaBox);
print(consoleMap);

ui.Map.CloudStorageLayer

หากต้องการแสดงเลเยอร์ที่มีการคำนวณค่อนข้างยาก (เช่น ในแอป) คุณอาจต้องส่งออกข้อมูลไปยังที่เก็บข้อมูล Cloud Storage เพื่อเหตุผลด้านประสิทธิภาพ เลเยอร์แบบคงที่ที่มีไว้สำหรับการแสดงภาพเท่านั้นเหล่านี้อาจทําให้แอปและสคริปต์ของคุณตอบสนองได้ดีขึ้น คุณสามารถสร้างเลเยอร์การแสดงผลแบบคงที่เพื่อวัตถุประสงค์นี้โดยใช้ Export.map.toCloudStorage() หากต้องการใช้ชุดไทล์ที่Export.map.toCloudStorage() ส่งออกไว้ก่อนหน้านี้ ให้สร้าง ui.Map.Layer ใหม่จากที่เก็บข้อมูล Cloud Storage และเส้นทางที่ระบุ ดังนี้

Map.add(ui.Map.CloudStorageLayer({
  bucket: 'earthenginepartners-hansen',
  path: 'tiles/gfc_v1.4/loss_year',
  maxZoom: 12,
  suffix: '.png'
}));

เมื่อเรียกใช้สคริปต์ที่โหลดเลเยอร์ Cloud Storage คุณอาจเห็นข้อความเตือนต่อไปนี้

ui.Map.DrawingTools

มีชุดเครื่องมือวาดรูปเรขาคณิตที่เพิ่มโดยค่าเริ่มต้นลงในMap ในตัวแก้ไขโค้ด คุณเปลี่ยนลักษณะการทํางานของเครื่องมือเหล่านี้ในMapเริ่มต้นได้โดยเรียกใช้ Map.drawingTools() เช่น หากต้องการซ่อนเครื่องมือวาดภาพ ให้ทำดังนี้

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

Map.drawingTools().setShown(false);

แผนที่ที่สร้างใหม่จะไม่มีเครื่องมือวาดโดยค่าเริ่มต้น แต่สามารถเปิดใช้ได้โดยการเรียกใช้เมธอด drawingTools() ในแผนที่

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

var map = ui.Map();
// Prints true since drawingTools() adds drawing tools to the map.
print(map.drawingTools().getShown());
// Replace the default Map with the newly created map.
ui.root.widgets().reset([map]);

ระบบจะใส่เลเยอร์เรขาคณิตที่วาดโดยเครื่องมือวาดลงใน ui.data.ActiveList ซึ่งคุณเข้าถึงได้โดยเรียกใช้ Map.drawingTools().layers() รายการเลเยอร์เรขาคณิตจะตอบสนองต่อเหตุการณ์เช่นเดียวกับรายการอื่นๆ ที่ใช้งานอยู่ เช่น รายการเลเยอร์ใน Map ที่แสดงโดย Map.layers() ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าระดับการมองเห็นของเลเยอร์เรขาคณิตที่เครื่องมือวาด (ซึ่งจะแสดงโดยค่าเริ่มต้น)

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

Map.drawingTools().layers().forEach(function(layer) {
  layer.setShown(false);
});

หากต้องการเพิ่มเลเยอร์ลงในเครื่องมือวาดภาพแบบเป็นโปรแกรม คุณสามารถเรียกใช้เมธอด addLayer ในเครื่องมือวาดภาพ หรือเพิ่มเลเยอร์ลงในรายการเลเยอร์โดยตรงก็ได้ ดังนี้

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

var geometries = [ee.Geometry.Point([0,0]), ee.Geometry.Rectangle([[0,0], [1,1]])];
Map.drawingTools().addLayer(geometries, 'my_geometry1', 'red');

var layer = ui.Map.GeometryLayer(geometries, 'my_geometry2', 'blue');
Map.drawingTools().layers().add(layer);

สถานะของเครื่องมือวาดภาพจะยังคงอยู่เมื่อคุณเผยแพร่แอปด้วย หากคุณแสดงหรือซ่อนเครื่องมือวาดภาพไว้ เครื่องมือเหล่านั้นก็จะแสดงหรือซ่อนอยู่ในแอปด้วย เรขาคณิตในการนําเข้าก็จะยังคงอยู่ในแอปด้วย

ui.Map.GeometryLayer

GeometryLayer คือชุดเรขาคณิตที่ทํางานเป็น Geometry, GeometryCollection หรือ FeatureCollection รายการเดียว ซึ่งเพิ่มลงในส่วนการนําเข้าที่ด้านบนของสคริปต์และอ้างอิงในโค้ดได้

GeometryLayer ที่วาดโดยเครื่องมือวาดภาพจะมีลักษณะการทำงานเริ่มต้นที่คุณลบล้างได้ด้วยการระบุฟังก์ชันการเรียกกลับใหม่ ตัวอย่างเช่น สมมติว่าคุณต้องการการเปลี่ยนแปลงแบบอินเทอร์แอกทีฟของรูปทรงเรขาคณิตเพื่อทริกเกอร์เหตุการณ์ หากต้องการใช้ลักษณะการทํางานบางอย่าง คุณสามารถตั้งค่าเมธอด onEdit(), onErase() หรือ onDraw() ในเครื่องมือเพื่อตอบสนองการดําเนินการของผู้ใช้ ตัวอย่างต่อไปนี้แสดงวิธีเรียกใช้การคํานวณและอัปเดตป้ายกํากับด้วยผลลัพธ์การคํานวณเมื่อผู้ใช้เพิ่ม/แก้ไข/ลบเรขาคณิต

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

// Load elevation data.
var srtm = ee.Image('USGS/SRTMGL1_003');
Map.addLayer(srtm, {min: 0, max: 5000}, 'SRTM');

// Make a label to display mean elevation at drawn points.
var label = new ui.Label('Draw points to calculate mean elevation');
var inspector = new ui.Panel([label]);
Map.add(inspector);
// Don't make imports that correspond to the drawn points.
Map.drawingTools().setLinked(false);
// Limit the draw modes to points.
Map.drawingTools().setDrawModes(['point']);
// Add an empty layer to hold the drawn points.
Map.drawingTools().addLayer([]);
// Set the geometry type to be point.
Map.drawingTools().setShape('point');
// Enter drawing mode.
Map.drawingTools().draw();

// This function gets called when the geometry layer changes.
// Use debounce to call the function at most every 100 milliseconds.
var getAverageElevation = ui.util.debounce(function() {
  var points = Map.drawingTools().layers().get(0).toGeometry();
  var elevation = srtm.reduceRegion({
    reducer: ee.Reducer.mean(),
    geometry: points,
    scale: 30
  }).get('elevation');
  // Asynchronously evaluate the mean elevation.
  elevation.evaluate(showElevation);
}, 100);

// Set the callback function on changes of the geometry layer.
Map.drawingTools().onEdit(getAverageElevation);
Map.drawingTools().onDraw(getAverageElevation);
Map.drawingTools().onErase(getAverageElevation);

// Set the label to the result of the mean reduction.
function showElevation(elevation) {
  inspector.clear();
  var elevationLabel = ui.Label('Mean elevation: ' + elevation);
  inspector.add(elevationLabel);
}

โปรดทราบว่า setLinked() ใช้เพื่อสลับการเชื่อมต่อระหว่างเครื่องมือวาดรูปเรขาคณิตกับส่วนการนําเข้าของเครื่องมือแก้ไขโค้ด ในตัวอย่างนี้ ระบบจะยกเลิกการลิงก์เครื่องมือเรขาคณิตเพื่อป้องกันไม่ให้สร้างการนําเข้า toGeometry ใช้เพื่อแปลงเลเยอร์เป็น ee.Geometry หากเลเยอร์ที่นำเข้าแสดงถึง Feature หรือ FeatureCollection คุณจะเรียกข้อมูลออบเจ็กต์ EE ที่เกี่ยวข้องได้โดยใช้ getEeObject() นอกจากนี้ โปรดสังเกตการใช้ ui.util.debounce เพื่อป้องกันไม่ให้การเคลื่อนไหวแต่ละครั้งของเรขาคณิตทริกเกอร์ฟังก์ชันการเรียกกลับ กล่าวโดยละเอียดคือ ฟังก์ชันจะไม่ทํางานจนกว่าจะผ่านไป 100 มิลลิวินาทีนับจากเหตุการณ์ล่าสุด ซึ่งช่วยให้มั่นใจว่าฟังก์ชันจะทํางานก็ต่อเมื่อผู้ใช้ดําเนินการแก้ไขเสร็จแล้วเท่านั้น

เลเยอร์เรขาคณิตในการนําเข้าจะเชื่อมโยงกับ Geometry หรือ GeometryCollection ดังนั้นจึงมีได้เฉพาะเรขาคณิตที่มีสถานะทรงกลมเดียวกันเท่านั้น เนื่องจากรูปแบบ GeoJSON อนุญาตให้มีสถานะทรงกลมเพียงสถานะเดียวสําหรับคอลเล็กชันเรขาคณิต (ดูข้อมูลเพิ่มเติมได้ที่หน้าเรขาคณิตทรงกลมกับเรขาคณิตแบบระนาบ) การแปลงเลเยอร์เรขาคณิตเป็น FeatureCollection โดยกดไอคอนรูปเฟืองข้างชื่อเลเยอร์จะช่วยให้คุณเพิ่มเรขาคณิตเชิงเรขาและเชิงระนาบลงในเลเยอร์เดียวกันได้ อย่างไรก็ตาม การแปลงกลับเป็น Geometry จะทำให้เกิดข้อผิดพลาด หากต้องการหลีกเลี่ยงปัญหานี้ ให้แปลงเป็น FeatureCollection หรือลบเรขาคณิตจนกว่าจะมีสถานะรูปทรงเรขาคณิตเชิงเรขาคณิตเพียงสถานะเดียวในเลเยอร์

ui.Map.Linker

เช่นเดียวกับเลเยอร์ ตัวลิงก์ไม่ใช่วิดเจ็ตที่กำหนดสไตล์ได้ ยูทิลิตีนี้ทำงานอยู่เบื้องหลังและสามารถใช้เพื่อซิงค์การเคลื่อนไหวของอินสแตนซ์ ui.Map หลายรายการ ดังนี้

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

// Add two maps to the screen.
var left = ui.Map();
var right = ui.Map();
ui.root.clear();
ui.root.add(left);
ui.root.add(right);

// Link the "change-bounds" event for the maps.
// When the user drags one map, the other will be moved in sync.
ui.Map.Linker([left, right], 'change-bounds');

ui.SplitPanel

ui.SplitPanel มีประโยชน์สำหรับการเปรียบเทียบข้อมูลต่างๆ ควบคู่กัน ข้อได้เปรียบของ ui.SplitPanel เหนือแผงธรรมดา 2 แผงคือสามารถใช้แฮนเดิลเพื่อทำให้แผงใน ui.SplitPanel เปลี่ยนผ่านแบบเลื่อน ตัวอย่างต่อไปนี้ใช้ ui.SplitPanel เพื่อแสดงความแตกต่างของคลื่นความถี่ของรอยแผลไหม้

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

// Load an image of the Santa Rosa, California 2017 fires.
var image = ee.Image('LANDSAT/LC08/C02/T1_TOA/LC08_045033_20171011');

// Add a color-SWIR composite to the default Map.
Map.setCenter(-122.6624, 38.5011, 12);
Map.addLayer(image, {bands: ['B7', 'B5', 'B3'], max: 0.3}, 'color-SWIR');

// Make another map and add a color-NIR composite to it.
var linkedMap = ui.Map();
linkedMap.addLayer(image, {bands: ['B5', 'B4', 'B3'], max: 0.3}, 'color-NIR');
// Add a thermal image to the map.
linkedMap.addLayer(image, {
  bands: ['B11'],
  min: 290,
  max: 305,
  palette: ['gray', 'white', 'yellow', 'red']
}, 'Thermal');

// Link the default Map to the other map.
var linker = ui.Map.Linker([ui.root.widgets().get(0), linkedMap]);

// Make an inset map and add it to the linked map.
var inset = ui.Map();
inset.style().set({position: 'bottom-right', width: '300px', height: '250px'});
inset.setControlVisibility({all: false, mapTypeControl: true});
linkedMap.add(inset);

// Register a function to the linked map to update the inset map.
linkedMap.onChangeBounds(function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  inset.centerObject(bounds);
  inset.layers().set(0, bounds);
});

// Create a SplitPanel which holds the linked maps side-by-side.
var splitPanel = ui.SplitPanel({
  firstPanel: linker.get(0),
  secondPanel: linker.get(1),
  orientation: 'horizontal',
  wipe: true,
  style: {stretch: 'both'}
});

// Set the SplitPanel as the only thing in root.
ui.root.widgets().reset([splitPanel]);

โปรดทราบว่ามีการตั้งค่าพารามิเตอร์ wipe เป็น true ในคอนสตรคเตอร์ ui.SplitPanel เพื่อให้ผู้ใช้ปัดแถบไปมาระหว่างการแสดงภาพ 2 รายการได้

การจัดรูปแบบวิดเจ็ต

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

คุณตั้งค่าสไตล์ของวิดเจ็ตได้ด้วยคอนสตรัคเตอร์ โดยเรียกใช้ style().set() หรือเรียกใช้ style() พร้อมอาร์กิวเมนต์พจนานุกรม เช่น

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

var redLabel = ui.Label('Big, Red Label');

redLabel.style().set('color', 'red');
redLabel.style().set('fontWeight', 'bold');
redLabel.style().set({
  fontSize: '32px',
  padding: '10px'
});

print(redLabel);

โปรดทราบว่าในตัวอย่างนี้ ป้ายกํากับจะได้รับการจัดรูปแบบก่อนโดยการเรียกใช้ style().set() ด้วยอาร์กิวเมนต์คีย์และค่า จากนั้นเรียกใช้ style().set() ด้วยอาร์กิวเมนต์พจนานุกรม การเรียกใช้ครั้งที่ 2 ไม่ได้ลบล้างการเรียกใช้ครั้งแรก แต่จะเพิ่มและแทนที่พร็อพเพอร์ตี้สไตล์แต่ละรายการแทนที่จะแทนที่ทั้งพจนานุกรมสไตล์

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการจัดสไตล์วิดเจ็ตได้ที่ข้อมูลอ้างอิงเกี่ยวกับชีตสไตล์แบบเป็นลําดับชั้น (CSS) นี้สําหรับสไตล์ที่แสดงในเอกสาร style() สําหรับวิดเจ็ตแต่ละรายการ โปรดทราบว่ารูปแบบที่อนุญาตสำหรับวิดเจ็ต Earth Engine จะแตกต่างจากรูปแบบ CSS ในหลายจุด โดยเฉพาะอย่างยิ่ง fontSize และ fontWeight สำหรับ font-style และ font-weight ตามลำดับ

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