0

再会

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

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

1 回答 1

0

我认为您必须使用 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 " )
])
};
于 2021-05-27T14:48:07.093 回答