الأدوات

تتوفّر مجموعة متنوعة من التطبيقات المصغّرة التي يمكنك استخدامها لإنشاء واجهات المستخدم. وتشمل هذه التطبيقات المصغّرة الأزرار ومربّعات الاختيار وأشرطة التمرير والحقول النصية وقوائم الخيارات. لا يمكن سوى طباعة التطبيقات المصغّرة أو إضافتها إلى لوحة مرة واحدة. توضِّح الأقسام التالية الوظيفة الأساسية للتطبيقات المصغّرة وشكلها وأسلوبها. راجِع قسم "التصميم" للحصول على مزيد من المعلومات عن تصميم التطبيقات المصغّرة. في الأمثلة التالية، ما عليك سوى 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

الزر هو تطبيق مصغّر لواجهة مستخدِم تفاعلية يمكن النقر عليه. يمكنك تحديد دالة يتمّ استدعاؤها (دالة "الرجوع") عندما ينقر المستخدِم على الزر. (لمزيد من المعلومات عن معالجة الأحداث باستخدام دوالّ ردّ الاتصال، اطّلِع على صفحة "الأحداث"). يطبع المثال التالي مركز الخريطة الحالي عند النقر على الزر:

محرِّر الرموز البرمجية (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.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، ستعرض صورة متحركة تتضمّن إطارًا واحدًا لكل صورة في الإدخال. كما هو الحال مع 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. وهو مجرد تمثيل data للطبقة على الخريطة. يوضّح المثال التالي كيفية تعديل خريطة من خلال إنشاء طبقة وتعديل خصائص الطبقة استنادًا إلى إدخال المستخدم:

محرِّر الرموز البرمجية (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 على لوحتَين عاديتين في أنّه يمكن استخدام مقبض لإجراء انتقال محو بين اللوحتَين في لوحة 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 للسماح للمستخدم بالتمرير سريعًا بالاسم ذهابًا وإيابًا بين العرضَين البيانيَين.

تصميم التطبيقات المصغّرة

يتم التحكّم في نمط التطبيق المصغّر من خلال قاموس خصائص النمط الخاص بالتطبيق المصغّر. يمكنك الوصول إلى القاموس من خلال النقر على 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() باستخدام وسيطة قاموس. لا تلغي الدعوة الثانية الدعوة الأولى، بل تضيف سمات نمط فردية وتستبدلها بدلاً من استبدال قاموس الأنماط بالكامل.

لمزيد من المعلومات عن خيارات التصميم للتطبيقات المصغّرة، اطّلِع على مرجع جدول الأنماط المتصاعدة (CSS) للأنماط المدرَجة في مستندات style() لكل تطبيق مصغّر. يُرجى العلم أنّ الأنماط المسموح بها لأداوت Earth Engine المصغّرة تختلف عن أنماط CSS في عدة مواضع، لا سيما fontSize وfontWeight بدلاً من font-style وfont-weight، على التوالي.

يحتوي قاموس الأنماط أيضًا على مفاتيح تتحكّم في موضع التطبيق المصغّر. اطّلِع على صفحة اللوحات والتنسيقات للحصول على مزيد من المعلومات عن كيفية استخدام الخصائص الموضعية.