ابزارک‌ها

ابزاره‌های مختلفی وجود دارد که می‌توانید برای ساختن واسط‌های کاربرتان استفاده کنید. این ابزاره‌ها شامل دکمه‌ها، چارگوش‌های انتخاب، لغزنده‌ها، چارگوش‌های نوشتار، و منوهای انتخاب است. ابزارک‌ها را فقط یک‌بار می‌توان چاپ کرد یا به پانل اضافه کرد. بخش‌های زیر عملکرد، ظاهر، و حس اصلی ابزاره‌ها را نشان می‌دهد. برای اطلاعات بیشتر درباره سبک‌بندی ابزارهایتان، بخش «سبک» را ببینید. مثال‌های زیر به‌سادگی ابزاره‌ها را به کنسول print() می‌کنند. برای جزئیات مربوط به افزودن ابزاره به پانل‌ها، به صفحه پانل‌ها و چیدمان‌ها مراجعه کنید.

ui.Label

برچسب‌ها صرفاً مناطقی هستند که نوشتار در آن‌ها نمایش داده می‌شود. برای مثال، کد زیر برچسبی را چاپ می‌کند:

ویرایشگر کد (جاوا اسکریپت)

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

که چیزی شبیه به این است:

برچسب‌های طولانی را با درج نویسه خط جدید (\n) و تنظیم آرگومان ویژگی سبک whiteSpace روی 'pre' بشکنید:

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

ui.Button

دکمه یک ابزاره واسط کاربر تعاملی است که می‌توان روی آن کلیک کرد. می‌توانید تابعی را برای فراخوانی (تابع «فراخوانی») هنگام کلیک کاربر روی دکمه مشخص کنید. (برای اطلاعات بیشتر درباره مدیریت رویداد با توابع بازخوانی، به صفحه رویدادها مراجعه کنید). مثال زیر مرکز فعلی نقشه را هنگام کلیک روی دکمه چاپ می‌کند:

ویرایشگر کد (جاوا اسکریپت)

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

که چیزی شبیه به این است:

ui.Checkbox

چارگوش انتخاب ابزاره‌ای است که به کاربر امکان می‌دهد چارگوشی را علامت بزند (یا علامت آن را بردارد). وقتی وضعیت کادر انتخاب تغییر می‌کند، فراخوانی‌های برگشتی ثبت‌شده در ابزاره مقدار بولی را ارسال می‌کنند که نشان می‌دهد آیا کادر انتخاب اکنون علامت زده شده است یا نه. برای مثال:

ویرایشگر کد (جاوا اسکریپت)

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.Slider

لغزنده ابزاره‌ای است که به کاربر امکان می‌دهد لغزنده را تنظیم کند تا عددی در محدوده لغزنده دریافت کند. محدوده را بااستفاده از سازنده یا با تنظیم ویژگی‌های لغزنده پیکربندی کنید. مثال زیر از لغزنده برای تنظیم کردن ماتی لایه اول در نقشه استفاده می‌کند:

ویرایشگر کد (جاوا اسکریپت)

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 پیکربندی‌شده برای انتخاب روزی از ژوئن ۲۰۱۸ به این شکل است:

DateSlider برای فیلتر کردن مجموعه‌ها مفید است، همان‌طور که در مثال زیر نشان داده شده است، که یک ترکیب سالانه براساس DateRange تنظیم‌شده در DateSlider می‌سازد:

ویرایشگر کد (جاوا اسکریپت)

// 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

چارگوش نوشتاری جایی برای جمع‌آوری نوشتار واردشده توسط کاربر است. برای مثال:

ویرایشگر کد (جاوا اسکریپت)

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

چارگوش نوشتاری باید چیزی شبیه به این باشد:

توجه داشته باشید که فراخوانی برگشتی فقط زمانی فعال می‌شود که کاربر وارد کردن نوشتار را تمام کرده باشد (و بازگشت را فشار داده باشد)، یا کاربر روی جایی خارج از چارگوش نوشتار کلیک کند.

ui.Select

ابزاره انتخاب نشان‌دهنده منوِ کرکره‌ای از گزینه‌هایی است که کاربر می‌تواند یکی از آن‌ها را انتخاب کند. مثال زیر منوِ کرکره‌ای را نشان می‌دهد که به کاربر اجازه می‌دهد مکان را انتخاب کند:

ویرایشگر کد (جاوا اسکریپت)

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 ارائه شود، پویانمایی‌ای با یک قاب برای هر تصویر در ورودی نمایش می‌دهد. همانند ee.Image.getThumbURL() و ee.ImageCollection.getVideoThumbURL()، می‌توانید پارامترهایی را برای کنترل قالب و ابعاد ریزعکس حاصل مشخص کنید:

ویرایشگر کد (جاوا اسکریپت)

// 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 یک ابزاره نقشه است. (درواقع، Code Editor پیش‌فرض Map نمونه‌ای از این کلاس است). مثل ابزاره‌های دیگر، می‌توانید نقشه‌ای را در کنسول چاپ کنید. با پاک کردن، دریافت، یا تنظیم لایه‌های جداگانه، محتوای نقشه را دستکاری کنید. مثال زیر نقشه‌ای را در کنسول چاپ می‌کند که مرزهای نقشه «ویرایشگر کد» را نشان می‌دهد:

ویرایشگر کد (جاوا اسکریپت)

// 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 نیست. این فقط نمایش داده‌های لایه روی نقشه است. مثال زیر نحوه به‌روزرسانی نقشه را با ایجاد لایه و به‌روزرسانی ویژگی‌های لایه براساس ورودی کاربر نشان می‌دهد:

ویرایشگر کد (جاوا اسکریپت)

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_HARMONIZED/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() تغییر دهید. برای مثال، برای پنهان کردن ابزارهای طراحی:

ویرایشگر کد (جاوا اسکریپت)

Map.drawingTools().setShown(false);

نقشه‌های جدیداً ایجادشده به‌طور پیش‌فرض ابزارهای طراحی را دریافت نمی‌کنند، اما می‌توان آن‌ها را با فراخوانی روش drawingTools() در نقشه فعال کرد:

ویرایشگر کد (جاوا اسکریپت)

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() برگردانده شده است. مثال زیر نشان می‌دهد که چگونه می‌توانید نمایان بودن لایه‌های هندسی ترسیم‌شده توسط ابزارها را تنظیم کنید (که به‌طور پیش‌فرض نشان داده می‌شوند):

ویرایشگر کد (جاوا اسکریپت)

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

برای افزودن لایه به‌صورت برنامه‌نویسی به ابزارهای طراحی، می‌توانید روش addLayer را در ابزارهای طراحی فراخوانی کنید یا لایه را مستقیماً به فهرست لایه اضافه کنید:

ویرایشگر کد (جاوا اسکریپت)

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() را در ابزارها تنظیم کنید تا به کنش‌های کاربر پاسخ دهید. مثال زیر نشان می‌دهد که چگونه می‌توان محاسباتی را راه‌اندازی کرد و برچسبی را با نتیجه محاسبات به‌روز کرد وقتی کاربر هندسه‌ای را اضافه/ ویرایش/ پاک می‌کند:

ویرایشگر کد (جاوا اسکریپت)

// Load elevation data.
var srtm = ee.Image('NASA/NASADEM_HGT/001').select('elevation');
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 برای جلوگیری از فعال شدن تابع بازخوانی توسط هر حرکت هندسه توجه کنید. به‌طور مشخص، تابع تا زمانی که ۱۰۰ میلی‌ثانیه از آخرین رویداد نگذشته باشد، اجرا نخواهد شد. این کار کمک می‌کند تا اطمینان حاصل شود که تابع فقط زمانی اجرا می‌شود که کاربر کنش ویرایش را تکمیل کرده باشد.

یک لایه هندسی در واردات با Geometry یا GeometryCollection مرتبط است، بنابراین فقط می‌تواند شامل هندسه‌هایی با همان حالت ژئودزیک باشد زیرا قالب GeoJSON فقط یک حالت ژئودزیک را برای مجموعه هندسه‌ها مجاز می‌داند (برای اطلاعات بیشتر، به صفحه هندسه‌های ژئودزیک در مقابل هندسه‌های مسطح مراجعه کنید). با تبدیل لایه هندسی به FeatureCollection ازطریق فشار دادن نماد چرخ‌دنده در کنار نام لایه، می‌توانید هندسه‌های ژئودزیک و مسطح را به همان لایه اضافه کنید. اما تبدیل کردن آن به Geometry باعث ایجاد خطا می‌شود. برای جلوگیری از این اتفاق، یا به FeatureCollection تبدیل کنید یا هندسه‌ها را حذف کنید تا فقط یک حالت ژئودزیک در لایه وجود داشته باشد.

ui.Map.Linker

پیونددهنده مانند لایه، ابزاره‌ای نیست که بتوان به آن سبک داد. این ابزار پشت صحنه است که می‌تواند برای همگام‌سازی حرکت چندین نمونه ui.Map استفاده شود:

ویرایشگر کد (جاوا اسکریپت)

// 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 نسبت‌به دو پانل معمولی این است که می‌توان از دستگیره برای دستیابی به گذار پاک کردن بین پانل‌ها در ui.SplitPanel استفاده کرد. مثال زیر از ui.SplitPanel برای نمایش تفاوت‌های طیفی جای سوختگی استفاده می‌کند:

ویرایشگر کد (جاوا اسکریپت)

// 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 برای اینکه کاربر بتواند دسته را بین دو تجسم به جلو و عقب بکشد.

ابزاره‌های سبک‌بندی

سبک ابزاره توسط واژه‌نامه ویژگی‌های سبک ابزاره کنترل می‌شود. با فراخوانی style() در ابزاره می‌توانید به واژه‌نامه دسترسی پیدا کنید. شیء برگردانده‌شده توسط style() نمونه‌ای از ui.data.ActiveDictionary است. یعنی تنظیم ویژگی‌های فرهنگ لغت سبک، نحوه نمایش ابزاره را به‌طور خودکار به‌روز می‌کند. کلیدهای مجاز برای فرهنگ لغت سبک هر ابزاره در اسناد مرجع ابزاره برای فراخوانی style() به‌طور دقیق شرح داده شده است.

سبک‌های ابزاره را می‌توان با سازنده، با فراخوانی style().set() یا با فراخوانی style() با آرگومان واژه‌نامه تنظیم کرد. برای مثال:

ویرایشگر کد (جاوا اسکریپت)

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() با آرگومان واژه‌نامه سبک‌بندی می‌شود. فراخوانی دوم، فراخوانی اول را لغو نمی‌کند؛ بلکه به‌جای جایگزین کردن کل واژه‌نامه سبک، ویژگی‌های سبک جداگانه را اضافه و جایگزین می‌کند.

برای اطلاعات بیشتر درباره گزینه‌های سبک‌بندی ابزاره‌ها، این مرجع Cascading Style Sheet (CSS) را برای سبک‌های فهرست‌شده در اسناد style() برای هر ابزاره ببینید. توجه داشته باشید که سبک‌های مجاز برای ابزاره‌های Earth Engine در چندین جا با سبک‌های CSS تفاوت دارند، به‌ویژه fontSize و fontWeight به‌ترتیب برای font-style و font-weight.

واژه‌نامه سبک‌ها همچنین حاوی کلیدهایی است که موقعیت ابزاره را کنترل می‌کنند. برای اطلاعات بیشتر درباره نحوه استفاده از ویژگی‌های موقعیتی، به صفحه پانل‌ها و چیدمان‌ها مراجعه کنید.