如何向 Google Earth Engine 中的拆分面板地图添加自定义图例？

如何解决如何向 Google Earth Engine 中的拆分面板地图添加自定义图例？

美好的一天

请您帮我解决以下问题。我想向 Google Earth Engine 平台上的交互式拆分面板地图添加自定义图例。我能够创建自定义图例并将其打印到控制台，但不知道如何将其添加到地图的左侧查看窗格中。任何帮助将不胜感激。

//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','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,'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','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)

解决方法

我认为你必须使用 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 " )
])
};