Widget 如何在Google Earth引擎中向拆分面板地图添加自定义图例？

你好

请你帮我做以下几件事。我想在Google Earth引擎平台上的交互式分割面板地图中添加一个自定义图例。我能够创建自定义图例并将其打印到控制台，但不知道如何将其添加到地图的左侧查看窗格。如蒙协助，将不胜感激

//1. Define variables and images that will be used by the script
var ROI = ROI
var S2_LULC = S2_LULC
var S2_RGB = S2_RGB

//2. Create a colour palette for the LULC map
var LULCstyle = {
  min: 0.0,
  max: 5.0,
  palette: ['7f7464', '98ff00', '139c20', '8b640c', 'f3a6ff', 'e0fe18'],
}

//3. Create right map panel, select the RGB image, apply visualisation settings and create a label 
var rightMap = ui.Map()
var S2RGB = ui.Map.Layer(S2_RGB.select('B4','B3','B2'), {bands: ['B4','B3','B2'], max: 1500})
var S2RGB_layer = rightMap.layers()
var S2RGB_label = ui.Label('S2 RGB')
S2RGB_label.style().set('position', 'bottom-right')
rightMap.add(S2RGB_label)
S2RGB_layer.add(S2RGB)

//4. Create left map panel and apply visualisation settings and create a label
var leftMap = ui.Map()
var S2LULC = ui.Map.Layer(S2_LULC, LULCstyle)
var S2LULC_layer = leftMap.layers()
var S2LULC_label = ui.Label('S2 LULC')
S2LULC_label.style().set('position', 'bottom-left')
leftMap.add(S2LULC_label)
S2LULC_layer.add(S2LULC)

// 4. Create a list of images to select from a dropdown menu

var images = {
  'April_S2_LULC' : ee.Image('users/shaedengokool/classified_Sentinel-2_image')
};

//4.2 Create the left map panel to display the list of images
var lefttMap = ui.Map();
leftMap.setControlVisibility(true);
var leftSelector = addLayerSelector(leftMap, 0, 'top-left');

//4.3 Adds a layer selection widget to the given map, to allow users to change
// which image is displayed in the associated map.
function addLayerSelector(mapToChange, defaultValue, position) {
  var label = ui.Label('Choose an image to visualize');

  //This function changes the given map to show the selected image.
  function updateMap(selection) {
    mapToChange.layers().set(0, ui.Map.Layer(images[selection],LULCstyle));
  }

  //Configure a selection dropdown to allow the user to choose between images,
  // and set the map to update when a user makes a selection.
 var select = ui.Select({items: Object.keys(images), onChange: updateMap});
  select.setValue(Object.keys(images)[defaultValue], true);

  var controlPanel =
      ui.Panel({widgets: [label, select, ], style: {position: position}});

  mapToChange.add(controlPanel);
}

// 5. Combine the left and right maps and create an interactive spli-layer map panel for visualization

var splitPanel = ui.SplitPanel({
    firstPanel: leftMap,
    secondPanel: rightMap,
    orientation: 'horizontal',
    wipe:  true
})

ui.root.clear()

ui.root.add(splitPanel)

var linkPanel = ui.Map.Linker([leftMap, rightMap])
leftMap.centerObject(ROI, 20)

//6. Create a legend for the lULC map

//6.1 set position of panel
var legend = ui.Panel({
  style: {
    position: 'bottom-left',
    padding: '8px 15px'
  }
});
 
//6.2 Create legend title
var legendTitle = ui.Label({
  value: 'LULC',
  style: {
    fontWeight: 'bold',
    fontSize: '18px',
    margin: '0 0 4px 0',
    padding: '0'
    }
});
 
//6.3 Add the title to the panel
legend.add(legendTitle);
 
//6.4 Creates and styles 1 row of the legend.
var makeRow = function(color, name) {
 
      // Create the label that is actually the colored box.
      var colorBox = ui.Label({
        style: {
          backgroundColor: '#' + color,
          // Use padding to give the box height and width.
          padding: '8px',
          margin: '0 0 4px 0'
        }
      });
 
      // Create the label filled with the description text.
      var description = ui.Label({
        value: name,
        style: {margin: '0 0 4px 6px'}
      });
 
      // return the panel
      return ui.Panel({
        widgets: [colorBox, description],
        layout: ui.Panel.Layout.Flow('horizontal')
      });
};
 
//6.5  Palette with the colors
var palette = ['7f7464', '98ff00', '139c20', '8b640c', 'f3a6ff', 'e0fe18'];
 
//6.6 name of the legend
var names = ['Buildings','Grassland','Trees', 'Bareground','Amadumbe','Maize'];
 
//6.7 Add color and and names
for (var i = 0; i < 6; i++) {
  legend.add(makeRow(palette[i], names[i]));
  } 
print(legend)

//1。定义脚本将使用的变量和图像
var ROI=ROI
变量S2\u LULC=S2\u LULC
变量S2_RGB=S2_RGB
//2. 为LULC贴图创建调色板
变量LULCstyle={
最小值：0.0，
最高：5.0，
调色板：['7f7464'，'98ff00'，'139c20'，'8b640c'，'f3a6ff'，'e0fe18']，
}
//3. 创建右侧地图面板，选择RGB图像，应用可视化设置并创建标签
var rightMap=ui.Map（）
var S2RGB=ui.Map.Layer（S2_RGB.select（'B4'，'B3'，'B2'），{bands:['B4'，'B3'，'B2']，max:1500}）
var S2RGB_layer=rightMap.layers（）
var S2RGB_label=ui.label（'S2 RGB'）
S2RGB_label.style（）.set（'position'，'bottom right'）
rightMap.add（S2RGB_标签）
S2RGB_图层添加（S2RGB）
//4. 创建左侧地图面板，应用可视化设置并创建标签
var leftMap=ui.Map（）
var S2LULC=ui.Map.Layer（S2_LULC，LULCstyle）
var S2LULC_layer=leftMap.layers（）
var S2LULC\u label=ui.label（'S2 LULC'）
S2LULC_label.style（）.set（'position'，'bottom left'）
添加（S2LULC_标签）
S2LULC_图层添加（S2LULC）
// 4. 创建要从下拉菜单中选择的图像列表
变量图像={
“四月2日”：ee.Image（'users/shaedengool/classified\u Sentinel-2\u Image'）
};
//4.2创建左侧地图面板以显示图像列表
var lefttMap=ui.Map（）；
setControlVisibility（true）；
var leftSelector=addLayerSelector（leftMap，0，'左上'）；
//4.3向给定地图添加图层选择小部件，以允许用户进行更改
//关联地图中显示的图像。
函数addLayerSelector（映射更改、默认值、位置）{
var label=ui.label（'选择要可视化的图像'）；
//此函数用于更改给定贴图以显示选定图像。
函数更新映射（选择）{
mapToChange.layers（）.set（0，ui.Map.Layer（images[selection]，LULCstyle））；
}
//配置选择下拉列表，允许用户在图像之间进行选择，
//并将地图设置为在用户进行选择时更新。
var select=ui.select（{items:Object.keys（images），onChange:updateMap}）；
选择.setValue（对象.keys（图像）[defaultValue]，true）；
无功控制面板=
面板（{widgets:[label，select，]，style:{position:position}}）；
mapToChange.add（控制面板）；
}
// 5. 组合左右贴图并创建交互式spli图层贴图面板以进行可视化
var splitPanel=ui.splitPanel({
第一个面板：leftMap，
第二个面板：rightMap，
方向：“水平”，
擦拭：对
})
ui.root.clear（）
ui.root.add（拆分面板）
var linkPanel=ui.Map.Linker（[leftMap，rightMap]）
leftMap.centerObject（ROI，20）
//6. 为lULC地图创建图例
//6.1面板的设置位置
var legend=ui.Panel({
风格：{
位置：'左下'，
填充：“8px 15px”
}
});
//6.2创建图例标题
var legendTitle=ui.Label({
值：“LULC”，
风格：{
fontWeight:'粗体'，
fontSize:'18px'，
边距：“0 0 4px 0”，
填充：“0”
}
});
//6.3将标题添加到面板
图例。添加（legendTitle）；
//6.4创建并设置图例的一行样式。
var makeRow=函数（颜色、名称）{
//创建实际为彩色框的标签。
var colorBox=ui.Label({
风格：{
背景颜色：“#”+颜色，
//使用填充指定框的高度和宽度。
填充：“8px”，
边距：“0 0 4px 0”
}
});
//创建用描述文本填充的标签。
var description=ui.Label({
值：name，
样式：{margin:'0 0 4px 6px'}
});
//返回面板
返回ui.Panel({
小部件：[颜色框，说明]，
布局：ui.Panel.layout.Flow（'水平'）
});
};
//6.5调色板与颜色
变量调色板=['7f7464'，'98ff00'，'139c20'，'8b640c'，'f3a6ff'，'e0fe18']；
//6.6图例的名称
变量名称=[‘建筑物’、‘草地’、‘树木’、‘裸地’、‘阿马丹姆’、‘玉米’]；
//6.7添加颜色和名称
对于（变量i=0；i<6；i++）{
添加（makeRow（调色板[i]，名称[i]）；
} 
印刷品（图例）

我认为您必须使用ui.label，如下所示：

createPanels = function() {

intro = {
panel: ui.Panel([
  ui.Label({
    value: 'I am........',
    style: {fontWeight: 'bold', fontSize: '24px', margin: '10px 5px'}
}),
  ui.Label("xxxxxxxxxxxxxxxxxxxxxxxxxxx" + 
           "yyyyyyyyyyyyyyyyyyyy " )
])
};