Widget

Ada berbagai widget yang dapat Anda gunakan untuk mem-build UI. Widget ini mencakup tombol, kotak centang, penggeser, kotak teks, dan menu pilihan. Widget hanya dapat dicetak atau ditambahkan ke panel satu kali. Bagian berikut mengilustrasikan fungsi dasar, tampilan, dan nuansa widget. Lihat bagian Gaya untuk mengetahui informasi selengkapnya tentang gaya widget Anda. Contoh berikut hanya print() widget ke konsol. Untuk mengetahui detail tentang cara menambahkan widget ke panel, lihat halaman Panel dan Tata Letak.

ui.Label

Label hanyalah area tempat teks ditampilkan. Misalnya, kode berikut mencetak label:

Editor Kode (JavaScript)

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

Yang terlihat seperti ini:

Pisahkan label panjang dengan menyisipkan karakter baris baru (\n) dan menetapkan argumen properti gaya whiteSpace ke 'pre':

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

ui.Button

Tombol adalah widget UI interaktif yang dapat diklik. Anda dapat menentukan fungsi yang akan dipanggil (fungsi "callback") saat pengguna mengklik tombol. (Untuk informasi selengkapnya tentang penanganan peristiwa dengan fungsi callback, lihat halaman Peristiwa). Contoh berikut mencetak pusat peta saat ini saat tombol diklik:

Editor Kode (JavaScript)

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

Yang terlihat seperti ini:

ui.Checkbox

Kotak centang adalah widget yang memungkinkan pengguna mencentang (atau menghapus centang) kotak. Saat status kotak centang berubah, callback yang terdaftar ke widget akan menerima nilai boolean yang menunjukkan apakah kotak centang sekarang dicentang. Contoh:

Editor Kode (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);

Kotak centang yang dicetak akan terlihat seperti ini:

Perhatikan bahwa mencentang kotak akan mengaktifkan lapisan yang ditampilkan di peta. Seperti komponen UI lainnya, Peta Editor Kode dapat dimanipulasi secara terprogram. Pelajari lebih lanjut objek Peta di halaman Panel dan Tata Letak.

ui.Slider

Penggeser adalah widget yang memungkinkan pengguna menyesuaikan penggeser untuk mendapatkan angka dalam rentang penggeser. Konfigurasikan rentang menggunakan konstruktor atau dengan menetapkan properti penggeser. Contoh berikut menggunakan penggeser untuk menetapkan opasitas lapisan pertama di Peta:

Editor Kode (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);

Penggeser akan terlihat seperti ini:

Perhatikan bahwa nilai penggeser ditampilkan di sebelah kanan penggeser.

ui.DateSlider

Widget DateSlider mirip dengan widget Slider, tetapi menangani tanggal secara eksplisit. DateSlider yang dikonfigurasi untuk memilih hari dari Juni 2018 terlihat seperti ini:

DateSlider berguna untuk memfilter koleksi, seperti yang ditunjukkan dalam contoh berikut, yang membuat gabungan tahunan berdasarkan DateRange yang ditetapkan di DateSlider:

Editor Kode (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

Kotak teks adalah tempat untuk mengumpulkan teks yang dimasukkan pengguna. Contoh:

Editor Kode (JavaScript)

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

Kotak teks akan terlihat seperti ini:

Perhatikan bahwa callback hanya diaktifkan saat pengguna selesai memasukkan teks (dan menekan return), atau pengguna mengklik keluar dari kotak teks.

ui.Select

Widget pilih mewakili menu drop-down pilihan yang dapat dipilih oleh pengguna. Contoh berikut mengilustrasikan menu drop-down untuk memungkinkan pengguna memilih lokasi:

Editor Kode (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);

Widget yang dipilih akan terlihat seperti ini:

ui.Chart

Diagram dalam paket ui.Chart berperilaku mirip dengan diagram dalam paket Chart. Secara khusus, ui.Chart adalah shell tipis di sekitar instance ChartWrapper Google Visualization API. Untuk informasi selengkapnya tentang cara memanipulasi objek ChartWrapper, lihat referensi ini. Untuk mengetahui informasi selengkapnya tentang fungsi helper diagram di Earth Engine, lihat Dokumen diagram.

ui.Thumbnail

Widget thumbnail dapat digunakan untuk melihat pratinjau objek ee.Image dan ee.ImageCollection. Jika diberi ee.Image, widget akan menampilkan gambar statis; jika diberi ee.ImageCollection, widget akan menampilkan animasi dengan satu frame per gambar dalam input. Seperti ee.Image.getThumbURL() dan ee.ImageCollection.getVideoThumbURL(), Anda dapat menentukan parameter untuk mengontrol format dan dimensi thumbnail yang dihasilkan:

Editor Kode (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'}
}));

Thumbnail akan terlihat seperti ini:

ui.Map

ui.Map adalah widget peta. (Bahkan, Peta Editor Kode default adalah instance dari class ini). Seperti widget lainnya, Anda dapat mencetak peta ke konsol. Manipulasi konten peta dengan menghapus, mendapatkan, atau menetapkan lapisan satu per satu. Contoh berikut mencetak peta ke konsol yang menampilkan batas Peta Code Editor:

Editor Kode (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);

Peta inset akan terlihat seperti ini:

Dalam contoh ini, pengguna perlu mengklik peta besar agar inset dapat digambar di peta kecil.

Anda juga dapat memanipulasi lapisan pada peta dengan memanggil layers() pada instance peta. layers() menampilkan ui.data.ActiveList, objek seperti array. Jika diubah, lapisan pada peta juga akan berubah. Pelajari lebih lanjut di bagian ui.Map.Layer.

ui.Map.Layer

Lapisan bukan widget yang dapat diberi gaya seperti ui.Button. Ini hanyalah representasi data lapisan di peta. Contoh berikut menunjukkan cara memperbarui peta dengan membuat lapisan dan memperbarui properti lapisan berdasarkan input pengguna:

Editor Kode (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

Jika Anda ingin menampilkan (misalnya di aplikasi) lapisan yang relatif mahal untuk dikomputasi, sebaiknya ekspor data Anda ke bucket Cloud Storage karena alasan performa. Lapisan statis khusus visualisasi ini dapat membuat aplikasi dan skrip Anda lebih responsif. Anda dapat membuat lapisan tampilan statis untuk tujuan ini menggunakan Export.map.toCloudStorage(). Untuk menggunakan set kartu yang sebelumnya diekspor oleh Export.map.toCloudStorage(), buat ui.Map.Layer baru dari bucket dan jalur Cloud Storage yang ditentukan:

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

Saat menjalankan skrip yang memuat lapisan Cloud Storage, Anda mungkin melihat pesan peringatan:

ui.Map.DrawingTools

Ada serangkaian alat gambar geometri yang ditambahkan secara default ke Map di Editor Kode. Anda dapat mengubah perilaku alat ini di Map default dengan memanggil Map.drawingTools(). Misalnya, untuk menyembunyikan alat gambar:

Editor Kode (JavaScript)

Map.drawingTools().setShown(false);

Peta yang baru dibuat tidak mendapatkan alat gambar secara default, tetapi dapat diaktifkan dengan memanggil metode drawingTools() pada peta:

Editor Kode (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]);

Lapisan geometri yang digambar oleh alat gambar dimasukkan ke dalam ui.data.ActiveList yang dapat Anda akses dengan memanggil Map.drawingTools().layers(). Daftar lapisan geometri merespons peristiwa seperti daftar aktif lainnya, misalnya daftar lapisan di Map yang ditampilkan oleh Map.layers(). Contoh berikut menunjukkan cara menetapkan visibilitas lapisan geometri yang digambar oleh alat (yang ditampilkan secara default):

Editor Kode (JavaScript)

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

Untuk menambahkan lapisan secara terprogram ke alat gambar, Anda dapat memanggil metode addLayer pada alat gambar atau menambahkan lapisan langsung ke daftar lapisan:

Editor Kode (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);

Status alat gambar juga akan diterapkan saat Anda memublikasikan Aplikasi. Jika Anda menampilkan atau menyembunyikan alat gambar, alat tersebut juga akan ditampilkan atau disembunyikan di Aplikasi Anda. Geometri dalam impor juga akan diterapkan di Aplikasi Anda.

ui.Map.GeometryLayer

GeometryLayer adalah kumpulan geometri yang bertindak sebagai satu Geometry, GeometryCollection, atau FeatureCollection yang ditambahkan ke bagian impor di bagian atas skrip dan dapat direferensikan dalam kode.

GeometryLayer yang digambar oleh alat gambar memiliki perilaku default yang dapat Anda ganti dengan menyediakan fungsi callback baru. Misalnya, Anda ingin perubahan interaktif pada geometri untuk memicu peristiwa. Untuk menerapkan perilaku tertentu, Anda dapat menetapkan metode onEdit(), onErase(), atau onDraw() pada alat untuk merespons tindakan pengguna. Contoh berikut menunjukkan cara memicu komputasi dan memperbarui label dengan hasil komputasi saat pengguna menambahkan/mengedit/menghapus geometri:

Editor Kode (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);
}

Perhatikan bahwa setLinked() digunakan untuk mengalihkan koneksi antara alat gambar geometri dan bagian Impor Editor Kode. Dalam contoh ini, alat geometri dibatalkan tautannya untuk mencegah impor dibuat. toGeometry digunakan untuk mengonversi lapisan menjadi ee.Geometry. Jika lapisan yang diimpor mewakili Feature atau FeatureCollection, Anda dapat mengambil objek EE yang mendasarinya menggunakan getEeObject(). Perhatikan juga penggunaan ui.util.debounce untuk mencegah setiap gerakan geometri memicu fungsi callback. Secara khusus, fungsi tidak akan diaktifkan hingga 100 milidetik berlalu sejak peristiwa terakhir. Hal ini membantu memastikan bahwa fungsi hanya berjalan saat pengguna telah menyelesaikan tindakan edit.

Lapisan geometri dalam impor dikaitkan dengan Geometry atau GeometryCollection, sehingga hanya dapat berisi geometri dengan status geodesik yang sama karena format GeoJSON hanya mengizinkan satu status geodesik untuk kumpulan geometri (lihat halaman Geodesic vs. Planar Geometries untuk mengetahui info selengkapnya). Mengonversi lapisan geometri ke FeatureCollection dengan menekan ikon roda gigi di samping nama lapisan akan memungkinkan Anda menambahkan geometri geodesik dan planar ke lapisan yang sama. Namun, mengonversinya kembali ke Geometry akan menghasilkan error. Untuk menghindarinya, konversikan ke FeatureCollection atau hapus geometri hingga hanya ada satu status geodesik di lapisan.

ui.Map.Linker

Seperti lapisan, penaut bukan widget yang dapat ditata gayanya. Ini adalah utilitas di balik layar yang dapat digunakan untuk menyinkronkan pergerakan beberapa instance ui.Map:

Editor Kode (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 berguna untuk membandingkan hal-hal secara berdampingan. Keuntungan ui.SplitPanel dibandingkan dua panel biasa adalah bahwa handle dapat digunakan untuk mencapai transisi penghapusan antara panel dalam ui.SplitPanel. Contoh berikut menggunakan ui.SplitPanel untuk menampilkan perbedaan spektral bekas luka bakar:

Editor Kode (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]);

Perhatikan bahwa parameter wipe disetel ke true, di konstruktor ui.SplitPanel agar pengguna dapat menggeser handle bolak-balik di antara dua visualisasi.

Menata Gaya Widget

Gaya widget dikontrol oleh kamus properti gaya widget. Anda dapat mendapatkan akses ke kamus dengan memanggil style() di widget. Objek yang ditampilkan oleh style() adalah instance ui.data.ActiveDictionary. Artinya, menetapkan properti kamus gaya akan otomatis memperbarui cara widget ditampilkan. Kunci yang diizinkan untuk setiap kamus gaya widget dijelaskan dalam dokumen referensi widget untuk panggilan style().

Gaya widget dapat ditetapkan dengan konstruktor, dengan memanggil style().set() atau dengan memanggil style() dengan argumen kamus. Contoh:

Editor Kode (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);

Perhatikan bahwa dalam contoh ini, label diberi gaya terlebih dahulu dengan memanggil style().set() dengan argumen kunci dan nilai, lalu dengan memanggil style().set() dengan argumen kamus. Panggilan kedua tidak mengganti panggilan pertama; panggilan kedua menambahkan dan mengganti setiap properti gaya, bukan mengganti seluruh kamus gaya.

Untuk informasi selengkapnya tentang opsi gaya untuk widget, lihat referensi Cascading Style Sheet (CSS) ini untuk gaya yang tercantum dalam dokumen style() untuk setiap widget. Perhatikan bahwa gaya yang diizinkan untuk widget Earth Engine berbeda dengan gaya CSS di beberapa tempat, terutama fontSize dan fontWeight untuk font-style dan font-weight.

Kamus gaya juga berisi kunci yang mengontrol posisi widget. Lihat halaman Panel dan Tata Letak untuk mengetahui informasi selengkapnya tentang cara menggunakan properti posisi.