Google Earth Engine（gee）中生成图例

效果图

实现代码

var legend = ui.Panel({
  style: {
    position: 'bottom-left',
    padding: '8px 15px'
  }
});

var legendTitle = ui.Label({
  value: 'NDVI',
  style: {
    fontWeight: 'bold',
    fontSize: '18px',
    margin: '0 0 9px 0',
    padding: '0'
    }
});

legend.add(legendTitle);

var makeRow = function(color, name) {
      
      var colorBox = ui.Label({
        style: {
          backgroundColor: '#' + color,
          padding: '8px',
          margin: '0 0 4px 0'
        }
      });
      
      var description = ui.Label({
        value: name,
        style: {margin: '0 0 4px 6px'}
      });

      return ui.Panel({
        widgets: [colorBox, description],
        layout: ui.Panel.Layout.Flow('horizontal')
      });
};

var palette =['FF0000', '22ff00', '1500ff'];

var names = ['Red','Green','Blue'];

for (var i = 0; i < 3; i++) {
  legend.add(makeRow(palette[i], names[i]));
  }  
  
Map.add(legend);  
  

ui.Thumbnail

function makeColorBarParams(palette) {
  return {
    bbox: [0, 0, 1, 0.1],
    dimensions: '100x10',
    format: 'png',
    min: 0,
    max: 1,
    palette: palette,
  };
}

var colorBar = ui.Thumbnail({
  image: ee.Image.pixelLonLat().select(0),
  params: makeColorBarParams('navy,blue,aqua'),
  style: {stretch: 'horizontal', margin: '0px 8px', maxHeight: '24px'},
});

var legendLabels = ui.Panel({
  widgets: [
    ui.Label(1, {margin: '4px 8px'}),
    ui.Label(15,{margin: '4px 8px', textAlign: 'center', stretch: 'horizontal'}),
    ui.Label(30, {margin: '4px 8px'})
  ],
  layout: ui.Panel.Layout.flow('horizontal')
});

print(colorBar)
print(legendLabels)