উইজেট

আপনার UI তৈরি করতে আপনি ব্যবহার করতে পারেন এমন বিভিন্ন উইজেট রয়েছে। এই উইজেটগুলির মধ্যে রয়েছে বোতাম, চেকবক্স, স্লাইডার, পাঠ্যবক্স এবং নির্বাচন মেনু। উইজেটগুলি শুধুমাত্র একবার প্রিন্ট বা প্যানেলে যোগ করা যেতে পারে। নিম্নলিখিত বিভাগগুলি উইজেটগুলির মৌলিক কার্যকারিতা, চেহারা এবং অনুভূতি চিত্রিত করে৷ আপনার উইজেট স্টাইল করার বিষয়ে আরও তথ্যের জন্য স্টাইল বিভাগটি দেখুন। নিম্নলিখিত উদাহরণগুলি কেবল উইজেটগুলিকে কনসোলে print() । প্যানেলে উইজেট যোগ করার বিষয়ে বিস্তারিত জানার জন্য, প্যানেল এবং লেআউট পৃষ্ঠা দেখুন।

ui.লেবেল

লেবেলগুলি কেবল এমন ক্ষেত্র যেখানে পাঠ্য প্রদর্শিত হয়৷ উদাহরণস্বরূপ, নিম্নলিখিত কোড একটি লেবেল প্রিন্ট করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

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

যা দেখতে এরকম কিছু:

একটি নতুন লাইন অক্ষর ( \n ) সন্নিবেশ করে দীর্ঘ লেবেলগুলি ভেঙে ফেলুন এবং whiteSpace শৈলীর সম্পত্তি আর্গুমেন্টকে 'pre' তে সেট করুন:

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

ui.বোতাম

একটি বোতাম একটি ইন্টারেক্টিভ UI উইজেট যা ক্লিক করা যেতে পারে। একজন ব্যবহারকারী বোতামে ক্লিক করলে আপনি কল করার জন্য একটি ফাংশন ("কলব্যাক" ফাংশন) নির্দিষ্ট করতে পারেন। (কলব্যাক ফাংশন সহ ইভেন্ট পরিচালনার বিষয়ে আরও তথ্যের জন্য, ইভেন্ট পৃষ্ঠা দেখুন)। বোতামটি ক্লিক করার সময় নিম্নলিখিত উদাহরণটি মানচিত্রের বর্তমান কেন্দ্রটি মুদ্রণ করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

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

যা দেখতে এরকম কিছু:

ui.চেকবক্স

একটি চেকবক্স হল একটি উইজেট যা ব্যবহারকারীকে একটি বাক্স চেক (বা আনচেক) করতে দেয়। যখন চেকবক্সের অবস্থা পরিবর্তিত হয়, উইজেটে নিবন্ধিত কলব্যাকগুলিকে একটি বুলিয়ান মান দেওয়া হয় যা নির্দেশ করে যে চেকবক্সটি এখন চেক করা হয়েছে কিনা৷ যেমন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

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.স্লাইডার

একটি স্লাইডার হল একটি উইজেট যা একজন ব্যবহারকারীকে স্লাইডার পরিসরের মধ্যে একটি নম্বর পেতে একটি স্লাইডার সামঞ্জস্য করতে দেয়। কনস্ট্রাক্টর ব্যবহার করে বা স্লাইডারের বৈশিষ্ট্য সেট করে পরিসীমা কনফিগার করুন। নিম্নলিখিত উদাহরণটি মানচিত্রের প্রথম স্তরের অস্বচ্ছতা সেট করতে স্লাইডার ব্যবহার করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

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 উইজেটের মতো, তবে তারিখগুলি স্পষ্টভাবে পরিচালনা করে। জুন 2018 থেকে একটি দিন নির্বাচন করার জন্য কনফিগার করা একটি DateSlider দেখতে এরকম দেখাচ্ছে:

DateSlider সংগ্রহগুলি ফিল্টার করার জন্য উপযোগী, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে, যা DateSlider এ সেট করা DateRange উপর ভিত্তি করে একটি বার্ষিক কম্পোজিট তৈরি করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// 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.টেক্সটবক্স

টেক্সটবক্স হল ব্যবহারকারীর লেখা টেক্সট সংগ্রহ করার জায়গা। যেমন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

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

টেক্সটবক্সটি এমন কিছু হওয়া উচিত:

নোট করুন যে কলব্যাক শুধুমাত্র তখনই বরখাস্ত হয় যখন ব্যবহারকারী পাঠ্য প্রবেশ করা শেষ করে (এবং রিটার্ন টিপে), অথবা ব্যবহারকারী পাঠ্যবক্স থেকে দূরে ক্লিক করে।

ui. নির্বাচন করুন

নির্বাচিত উইজেটটি পছন্দগুলির একটি ড্রপ-ডাউন মেনুকে প্রতিনিধিত্ব করে যেখান থেকে ব্যবহারকারী একটি বেছে নিতে পারেন। নিম্নলিখিত উদাহরণটি একটি ড্রপ-ডাউন মেনুকে চিত্রিত করে যাতে একজন ব্যবহারকারী একটি অবস্থান নির্বাচন করতে পারে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

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.চার্ট

ui.Chart প্যাকেজের চার্টগুলি Chart প্যাকেজের চার্টের মতোই আচরণ করে। বিশেষভাবে, একটি ui.Chart হল Google Visualization API-এর ChartWrapper এর একটি উদাহরণের চারপাশে একটি পাতলা শেল। ChartWrapper অবজেক্ট ম্যানিপুলেট করার বিষয়ে আরও তথ্যের জন্য, এই রেফারেন্সটি দেখুন। আর্থ ইঞ্জিনে চার্ট হেল্পার ফাংশন সম্পর্কে আরও তথ্যের জন্য, চার্ট ডক্স দেখুন।

ui. থাম্বনেইল

থাম্বনেইল উইজেটটি 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.মানচিত্র

একটি ui.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/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

আপনি যদি ( যেমন একটি অ্যাপে) একটি তুলনামূলকভাবে ব্যয়বহুল-থেকে-কম্পিউট লেয়ার প্রদর্শন করতে চান, তাহলে কর্মক্ষমতার কারণে আপনার ডেটা ক্লাউড স্টোরেজ বালতিতে রপ্তানি করা আপনার পক্ষে উপযুক্ত। এই স্ট্যাটিক, শুধুমাত্র ভিজ্যুয়ালাইজেশন স্তরগুলি আপনার অ্যাপ এবং স্ক্রিপ্টগুলিকে আরও প্রতিক্রিয়াশীল করে তুলতে পারে৷ আপনি Export.map.toCloudStorage() ব্যবহার করে এই উদ্দেশ্যে একটি স্ট্যাটিক ডিসপ্লে স্তর তৈরি করতে পারেন। Export.map.toCloudStorage() দ্বারা পূর্বে রপ্তানি করা একটি টাইল সেট ব্যবহার করতে, একটি নির্দিষ্ট ক্লাউড স্টোরেজ বাকেট এবং পথ থেকে একটি নতুন ui.Map.Layer তৈরি করুন:

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

একটি ক্লাউড স্টোরেজ স্তর লোড করে এমন একটি স্ক্রিপ্ট চালানোর সময়, আপনি সতর্কতা বার্তা দেখতে পারেন:

ui.Map.Drawing Tools

জ্যামিতি অঙ্কন সরঞ্জামগুলির একটি সেট রয়েছে যা কোড এডিটরের Map ডিফল্টরূপে যোগ করা হয়। আপনি Map.drawingTools() কল করে ডিফল্ট Map এই সরঞ্জামগুলির আচরণ পরিবর্তন করতে পারেন। উদাহরণস্বরূপ অঙ্কন সরঞ্জামগুলি লুকানোর জন্য:

কোড এডিটর (জাভাস্ক্রিপ্ট)

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('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 প্রতিনিধিত্ব করে, তাহলে আপনি getEeObject() ব্যবহার করে অন্তর্নিহিত EE অবজেক্টটি পুনরুদ্ধার করতে পারেন। এছাড়াও কলব্যাক ফাংশন ট্রিগার করা থেকে একটি জ্যামিতির প্রতিটি আন্দোলন প্রতিরোধ করতে ui.util.debounce ব্যবহার নোট করুন। বিশেষত, শেষ ইভেন্ট থেকে 100 মিলিসেকেন্ড অতিবাহিত না হওয়া পর্যন্ত ফাংশনটি চালু হবে না। এটি নিশ্চিত করতে সাহায্য করে যে ব্যবহারকারী সম্পাদনা ক্রিয়া সম্পন্ন করলেই ফাংশনটি চলে।

আমদানিতে একটি জ্যামিতি স্তর একটি Geometry বা GeometryCollection সাথে যুক্ত, তাই এটি শুধুমাত্র একই জিওডেসিক অবস্থার সাথে জ্যামিতি ধারণ করতে পারে কারণ জিওজেএসএন ফর্ম্যাট জ্যামিতি সংগ্রহের জন্য শুধুমাত্র একটি একক জিওডেসিক অবস্থার অনুমতি দেয় (আরো তথ্যের জন্য জিওডেসিক বনাম প্ল্যানার জ্যামিতি পৃষ্ঠা দেখুন)৷ স্তরের নামের পাশে গিয়ার আইকন টিপে জ্যামিতি স্তরটিকে একটি 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]);

নোট করুন যে ui.SplitPanel কনস্ট্রাক্টরে wipe প্যারামিটার true তে সেট করা হয়েছে যাতে ব্যবহারকারী দুটি ভিজ্যুয়ালাইজেশনের মধ্যে হ্যান্ডেলটিকে সামনে পিছনে সোয়াইপ করতে দেয়।

স্টাইলিং উইজেট

একটি উইজেটের শৈলী উইজেটের শৈলী বৈশিষ্ট্যের অভিধান দ্বারা নিয়ন্ত্রিত হয়। আপনি উইজেটে 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() কল করে। দ্বিতীয় কল প্রথমটিকে ওভাররাইড করে না; এটি সম্পূর্ণ শৈলী অভিধান প্রতিস্থাপনের পরিবর্তে পৃথক শৈলী বৈশিষ্ট্য যোগ করে এবং প্রতিস্থাপন করে।

উইজেটগুলির জন্য স্টাইলিং বিকল্পগুলি সম্পর্কে আরও তথ্যের জন্য, প্রতিটি উইজেটের জন্য style() ডক্সে তালিকাভুক্ত শৈলীগুলির জন্য এই ক্যাসকেডিং স্টাইল শীট (CSS) রেফারেন্সটি দেখুন৷ উল্লেখ্য যে আর্থ ইঞ্জিন উইজেটগুলির জন্য অনুমোদিত শৈলীগুলি বিভিন্ন জায়গায় CSS শৈলী থেকে পৃথক, বিশেষত font-style এবং font-weight জন্য যথাক্রমে fontSize এবং fontWeight ।

শৈলী অভিধানে কী রয়েছে যা উইজেটের অবস্থান নিয়ন্ত্রণ করে। অবস্থানগত বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য প্যানেল এবং বিন্যাস পৃষ্ঠাটি দেখুন।