Widget'lar

Kullanıcı arayüzlerinizi oluşturmak için kullanabileceğiniz çeşitli widget'lar vardır. Bu widget'lar düğmeler, onay kutuları, kaydırma çubukları, metin kutuları ve seçim menüleri içerir. Widget'lar yalnızca bir kez basılabilir veya bir panele eklenebilir. Aşağıdaki bölümlerde widget'ların temel işlevleri, görünümü ve Widget'larınızın stilini belirleme hakkında daha fazla bilgi için Stil bölümüne bakın. Aşağıdaki örneklerde, widget'lar konsola print() eklenmiştir. Panellere widget ekleme hakkında ayrıntılı bilgi için Paneller ve düzenler sayfasına göz atın.

ui.Label

Etiketler, metnin gösterildiği alanlardır. Örneğin, aşağıdaki kod bir etiket yazdırır:

Kod Düzenleyici (JavaScript)

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

Bu, aşağıdaki gibi görünür:

Yeni bir satır karakteri (\n) ekleyerek ve whiteSpace stil mülkü bağımsız değişkenini 'pre' olarak ayarlayarak uzun etiketleri bölün:

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

ui.Button

Düğme, tıklanabilir bir etkileşimli kullanıcı arayüzü widget'ıdır. Kullanıcı düğmeyi tıkladığında çağrılacak bir işlev ("geri çağırma" işlevi) belirtebilirsiniz. (Geri çağırma işlevleriyle etkinlik işleme hakkında daha fazla bilgi için Etkinlikler sayfasına bakın). Aşağıdaki örnekte, düğme tıklandığında haritanın mevcut merkezi yazdırılır:

Kod Düzenleyici (JavaScript)

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

Bu, aşağıdaki gibi görünür:

ui.Checkbox

Onay kutusu, kullanıcının bir kutuyu işaretlemesine (veya işaretini kaldırmasına) olanak tanıyan bir widget'tır. Onay kutusunun durumu değiştiğinde, widget'a kaydedilen geri çağırmalara onay kutusunun şu anda işaretli olup olmadığını belirten bir boole değeri iletilir. Örneğin:

Kod Düzenleyici (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);

Basılı onay kutusu aşağıdaki gibi görünmelidir:

Kutuyu işaretlediğinizde harita üzerinde gösterilen bir katmanın etkinleştirildiğini unutmayın. Diğer kullanıcı arayüzü bileşenlerinde olduğu gibi, Kod Düzenleyici'nin Haritası da programatik olarak değiştirilebilir. Paneller ve düzenler sayfasında Harita nesnesi hakkında daha fazla bilgi edinin.

ui.Slider

Kaydırma çubuğu, kullanıcının kaydırma çubuğu aralığında bir sayı elde etmek için kaydırma çubuğunu ayarlamasına olanak tanıyan bir widget'tır. Yapılandırmayı oluşturucuyu kullanarak veya kaydırma çubuğunun özelliklerini ayarlayarak yapılandırın. Aşağıdaki örnekte, haritadaki ilk katmanın opaklığını ayarlamak için kaydırma çubuğu kullanılmaktadır:

Kod Düzenleyici (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);

Kaydırma çubuğu aşağıdaki gibi görünmelidir:

Kaydırma çubuğu değerinin kaydırma çubuğunun sağında gösterildiğini unutmayın.

ui.DateSlider

DateSlider widget'ı Slider widget'ına benzer ancak tarihleri açıkça işler. Haziran 2018'den bir gün seçmek için yapılandırılmış bir DateSlider şu şekilde görünür:

DateSlider, aşağıdaki örnekte gösterildiği gibi koleksiyonları filtrelemek için yararlıdır. Bu örnekte, DateSlider içinde ayarlanan DateRange'ye göre yıllık bir kompozit oluşturulur:

Kod Düzenleyici (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

Metin kutusu, kullanıcı tarafından girilen metnin toplandığı yerdir. Örneğin:

Kod Düzenleyici (JavaScript)

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

Metin kutusu aşağıdaki gibi görünmelidir:

Geri çağırma işlevinin yalnızca kullanıcı metin girmeyi tamamladığında (ve Return tuşuna bastığında) veya kullanıcı metin kutusunun dışına tıkladığında tetiklendiğini unutmayın.

ui.Select

Seç widget'ı, kullanıcının aralarından seçim yapabileceği seçeneklerin bulunduğu bir açılır menüyü temsil eder. Aşağıdaki örnekte, kullanıcının konum seçmesine olanak tanıyan bir açılır menü gösterilmektedir:

Kod Düzenleyici (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);

Seçilen widget aşağıdaki gibi görünmelidir:

ui.Chart

ui.Chart paketindeki grafikler, Chart paketindeki grafiklere benzer şekilde çalışır. Daha açık belirtmek gerekirse ui.Chart, Google Visualization API'nin ChartWrapper örneğinin etrafındaki ince bir kabuktur. ChartWrapper nesnelerini değiştirme hakkında daha fazla bilgi için bu referans bölümüne bakın. Earth Engine'daki grafik yardımcı işlevleri hakkında daha fazla bilgi için Grafik belgelerine bakın.

ui.Thumbnail

Küçük resim widget'ı, ee.Image ve ee.ImageCollection nesnelerini önizlemek için kullanılabilir. ee.Image sağlandığında widget statik bir resim gösterir. ee.ImageCollection sağlandığında ise girişteki her resim için bir kare içeren bir animasyon gösterir. ee.Image.getThumbURL() ve ee.ImageCollection.getVideoThumbURL() ile olduğu gibi, elde edilen küçük resmin biçimini ve boyutlarını kontrol etmek için parametreler belirtebilirsiniz:

Kod Düzenleyici (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'}
}));

Küçük resim aşağıdaki gibi görünmelidir:

ui.Map

ui.Map, bir harita widget'ıdır. (Aslında varsayılan Kod Düzenleyici Haritası bu sınıfın bir örneğidir). Diğer widget'lar gibi, haritaları konsola yazdırabilirsiniz. Ayrı katmanları temizleyerek, alarak veya ayarlayarak haritanın içeriğini değiştirin. Aşağıdaki örnekte, Kod Düzenleyici Haritası'nın sınırlarını gösteren bir harita konsola yazdırılmaktadır:

Kod Düzenleyici (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);

Ek harita aşağıdaki gibi görünmelidir:

Bu örnekte, kullanıcının küçük haritada çizilecek ek haritayı görmek için büyük haritayı tıklaması gerekir.

Harita örneğinde layers() çağrısı yaparak haritada katmanlarla da işlem yapabilirsiniz. layers(), dizi benzeri bir nesne olan ui.data.ActiveList döndürür. Bu ayar değiştirildiğinde haritadaki katmanlar da değişir. Daha fazla bilgi için ui.Map.Layer bölümünü inceleyin.

ui.Map.Layer

Katman, ui.Button gibi stillenebilir bir widget değildir. Bu, haritada katmanın yalnızca bir veri temsilidir. Aşağıdaki örnekte, bir katman oluşturarak ve katmanın özelliklerini kullanıcı girişine göre güncelleyerek haritanın nasıl güncelleneceği gösterilmektedir:

Kod Düzenleyici (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

Hesaplaması nispeten pahalı olan bir katmanı görüntülemek (ör. bir uygulamada) istiyorsanız performans nedeniyle verilerinizi bir Cloud Storage paketine aktarmanız gerekebilir. Bu statik, yalnızca görselleştirme katmanları uygulamalarınızı ve komut dosyalarınızı daha duyarlı hale getirebilir. Bu amaçla Export.map.toCloudStorage() kullanarak statik bir görüntüleme katmanı oluşturabilirsiniz. Daha önce Export.map.toCloudStorage() tarafından dışa aktarılan bir karo setini kullanmak için belirli bir Cloud Storage paketinden ve yolundan yeni bir ui.Map.Layer oluşturun:

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

Cloud Storage katmanı yükleyen bir komut dosyası çalıştırırken şu uyarı mesajını görebilirsiniz:

ui.Map.DrawingTools

Kod Düzenleyici'de varsayılan olarak Map bölümündeki geometri çizim araçları bulunur. Map.drawingTools() işlevini çağırarak bu araçların varsayılan Map davranışını değiştirebilirsiniz. Örneğin, çizim araçlarını gizlemek için:

Kod Düzenleyici (JavaScript)

Map.drawingTools().setShown(false);

Yeni oluşturulan haritalara varsayılan olarak çizim araçları eklenmez ancak haritada drawingTools() yöntemi çağrılarak etkinleştirilebilir:

Kod Düzenleyici (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]);

Çizim araçları tarafından çizilen geometri katmanları, Map.drawingTools().layers()'ü çağırarak erişebileceğiniz bir ui.data.ActiveList içine yerleştirilir. Geometri katmanları listesi, Map.layers() tarafından döndürülen Map üzerindeki katmanların listesi gibi diğer etkin listeler gibi etkinliklere yanıt verir. Aşağıdaki örnekte, araçlar tarafından çizilen geometri katmanlarının görünürlüğünü nasıl ayarlayabileceğiniz gösterilmektedir (varsayılan olarak gösterilir):

Kod Düzenleyici (JavaScript)

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

Çizim araçlarına programatik olarak katman eklemek için çizim araçlarındaki addLayer yöntemini çağırabilir veya doğrudan katman listesine katman ekleyebilirsiniz:

Kod Düzenleyici (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);

Bir uygulama yayınladığınızda çizim araçlarının durumu da aktarılır. Çizim araçları gösteriliyor veya gizliyse uygulamanızda da gösterilir veya gizli olur. İçe aktarma işleminizdeki geometriler de uygulamanıza aktarılır.

ui.Map.GeometryLayer

GeometryLayer, tek bir Geometry, GeometryCollection veya FeatureCollection gibi davranan bir geometri koleksiyonudur. Komut dosyanızın üst kısmındaki içe aktarma bölümüne eklenir ve kodda referans verilebilir.

Çizim araçları tarafından çizilen GeometryLayer'ların varsayılan davranışı, yeni geri çağırma işlevleri sağlayarak geçersiz kılabileceğiniz bir davranıştır. Örneğin, geometrilerde yapılan etkileşimli değişikliklerin bir etkinliği tetiklemesini istediğinizi varsayalım. Belirli bir davranışı uygulamak için kullanıcı işlemlerine yanıt vermek amacıyla araçlarda onEdit(), onErase() veya onDraw() yöntemlerini ayarlayabilirsiniz. Aşağıdaki örnekte, kullanıcı bir geometri eklediğinde/düzenlediğinde/sildiğinde nasıl hesaplama tetikleneceği ve bir etiketin hesaplama sonucuyla nasıl güncelleneceği gösterilmektedir:

Kod Düzenleyici (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() simgesinin, geometri çizim araçları ile Kod Düzenleyici'nin İçe Aktarımlar bölümü arasındaki bağlantıyı değiştirmek için kullanıldığını unutmayın. Bu örnekte, içe aktarma işlemlerinin oluşturulmasını önlemek için geometri araçlarının bağlantısı kaldırılmıştır. toGeometry, katmanı ee.Geometry'a dönüştürmek için kullanılır. İçe aktarılan katman bir Feature veya FeatureCollection temsil ediyorsa getEeObject() kullanarak temel EE nesnesini alabilirsiniz. Ayrıca, bir geometrinin her hareketinin geri çağırma işlevini tetiklemesini önlemek için ui.util.debounce değerinin kullanıldığını unutmayın. Daha açık belirtmek gerekirse, işlev, son etkinlikten 100 milisaniye geçene kadar tetiklenmez. Bu, işlevin yalnızca kullanıcı düzenleme işlemini tamamladığında çalışmasını sağlar.

İçe aktarılan bir geometri katmanı, bir Geometry veya GeometryCollection ile ilişkilendirilir. Bu nedenle, GeoJSON biçimi geometri koleksiyonu için yalnızca tek bir jeodezik duruma izin verdiğinden, yalnızca aynı jeodezik duruma sahip geometriler içerebilir (daha fazla bilgi için Jeodezik ve Düzlem Geometriler sayfasına bakın). Katman adının yanındaki dişli simgesine basarak geometri katmanını FeatureCollection olarak dönüştürmek, aynı katmana jeodezik ve düz geometriler eklemenize olanak tanır. Ancak tekrar Geometry değerine dönüştürüldüğünde hata meydana gelir. Bunu önlemek için, katmanda yalnızca bir jeodezik durum kalana kadar geometrileri FeatureCollection olarak dönüştürün veya silin.

ui.Map.Linker

Katman gibi bir bağlayıcı da stillenebilir bir widget değildir. Bu, birden fazla ui.Map örneğinin hareketini senkronize etmek için kullanılabilen arka planda çalışan bir yardımcı programdır:

Kod Düzenleyici (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, öğeleri yan yana karşılaştırmak için kullanışlıdır. ui.SplitPanel'ün iki sıradan panele kıyasla avantajı, ui.SplitPanel'teki paneller arasında silme geçişi yapmak için bir tutamak kullanılabilmesidir. Aşağıdaki örnekte, yanık izlerinin spektral farklılıklarını göstermek için ui.SplitPanel kullanılmaktadır:

Kod Düzenleyici (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]);

Kullanıcının, iki görselleştirme arasında kaydırma çubuğunu ileri geri kaydırmasına izin vermek için wipe parametresinin ui.SplitPanel kurucusunda true olarak ayarlandığını unutmayın.

Widget'ları Şekillendirme

Bir widget'ın stili, widget'ın stil özellikleri sözlüğü tarafından kontrol edilir. Widget'ta style()'yi arayarak sözlüğe erişebilirsiniz. style() tarafından döndürülen nesne, ui.data.ActiveDictionary örneğidir. Bu, stil sözlüğünün özelliklerinin ayarlanmasıyla widget'ın görüntülenme şeklinin otomatik olarak güncellendiği anlamına gelir. Her widget'ın stil sözlüğü için izin verilen anahtarlar, widget'ın style() çağrısıyla ilgili referans belgelerinde ayrıntılı olarak açıklanmıştır.

Widget'ın stilleri, style().set() çağrılarak veya bir sözlük bağımsız değişkeni ile style() çağrılarak oluşturucuyla ayarlanabilir. Örneğin:

Kod Düzenleyici (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);

Bu örnekte, etiketin önce style().set() işlevi anahtar ve değer bağımsız değişkenleriyle, ardından style().set() işlevi sözlük bağımsız değişkeniyle çağrılarak biçimlendirildiğini unutmayın. İkinci çağrı, ilk çağrıyı geçersiz kılmaz; stil sözlüğünün tamamını değiştirmek yerine stil özelliklerini tek tek ekler ve değiştirir.

Widget'lar için stil seçenekleri hakkında daha fazla bilgi edinmek isterseniz her widget'ın style() dokümanlarında listelenen stiller için bu basamaklı stil sayfası (CSS) referansına göz atın. Earth Engine widget'ları için izin verilen stillerin, font-style ve font-weight için sırasıyla fontSize ve fontWeight gibi çeşitli yerlerde CSS stillerinden farklı olduğunu unutmayın.

Stil sözlüğü, widget'ın konumunu kontrol eden anahtarları da içerir. Konumsal özelliklerin nasıl kullanılacağı hakkında daha fazla bilgi için Paneller ve Düzenler sayfasına bakın.