Google Earth engine (GEE) - create a simple panel demo to display the map

function ：

getDownloadURL(params, callback)

Get a download URL for small chunks of image data in GeoTIFF or NumPy format. Maximum request size is 32 MB, maximum grid dimension is 10000.

Use getThumbURL for RGB visualization formats PNG and JPG.

Returns returns a download URL, or undefined if a callback was specified.

obtain GeoTIFF or NumPy Download of small image data in format URL. The maximum request size is 32MB, The maximum mesh size is 10000.

about RGB Visual format PNG and JPG, Use getThumbURL.

return Return to a download URL, If a callback is specified , Then... Is not defined .

Arguments:

this:image (Image):

The Image instance.

params (Object):

An object containing download options with the following possible values:

- name: a base name to use when constructing filenames. Only applicable when format is "ZIPPED_GEO_TIFF" (default) or filePerBand is true. Defaults to the image id (or "download" for computed images) when format is "ZIPPED_GEO_TIFF" or filePerBand is true, otherwise a random character string is generated. Band names are appended when filePerBand is true.

- bands: a description of the bands to download. Must be an array of band names or an array of dictionaries, each with the following keys

(optional parameters apply only when filePerBand is true):

+ id: the name of the band, a string, required.

+ crs: an optional CRS string defining the band projection.

+ crs_transform: an optional array of 6 numbers specifying an affine transform from the specified CRS, in row-major order:

[xScale, xShearing, xTranslation, yShearing, yScale, yTranslation]

+ dimensions: an optional array of two integers defining the width and height to which the band is cropped.

+ scale: an optional number, specifying the scale in meters of the band; ignored if crs and crs_transform are specified.

- crs: a default CRS string to use for any bands that do not explicitly specify one.

- crs_transform: a default affine transform to use for any bands that do not specify one, of the same format as the crs_transform of bands.

- dimensions: default image cropping dimensions to use for any bands that do not specify them.

- scale: a default scale to use for any bands that do not specify one; ignored if crs and crs_transform are specified.

- region: a polygon specifying a region to download; ignored if crs and crs_transform is specified.

- filePerBand: whether to produce a separate GeoTIFF per band (boolean). Defaults to true. If false, a single GeoTIFF is produced and all band-level transformations will be ignored.

- format: the download format. One of: "ZIPPED_GEO_TIFF" (GeoTIFF file(s) wrapped in a zip file, default), "GEO_TIFF" (GeoTIFF file),

"NPY" (NumPy binary format). If "GEO_TIFF" or "NPY", filePerBand and all band-level transformations will be ignored. Loading a NumPy output results in a structured array.

callback (Function, optional):

An optional callback. If not supplied, the call is made synchronously.

Returns: Object|String

advance(delta, unit, timeZone)

Create a new Date by adding the specified units to the given Date.

Arguments:

this:date (Date)

delta (Float)

unit (String):

One of 'year', 'month' 'week', 'day', 'hour', 'minute', or 'second'.

timeZone (String, default: null):

The time zone (e.g. 'America/Los_Angeles'); defaults to UTC.

Returns: Date

ee.Date.fromYMD(year, month, day, timeZone)

Returns a Date given year, month, day.

Arguments:

year (Integer)

month (Integer)

day (Integer)

timeZone (String, default: null):

The time zone (e.g. 'America/Los_Angeles'); defaults to UTC.

Returns: Date

ee.Number.parse(input, radix) String to number function

Convert a string to a number.

Arguments:

input (String):

The string to convert to a number.

radix (Integer, default: 10):

An integer representing the base number system from which to convert. If input is not an integer, radix must equal 10 or not be specified.

Returns: Number

Code ：

//  Set panel width 
var mainPanel = ui.Panel({
  style: {width: '300px'}
});

// Set the title and size of the panel 
var title = ui.Label({
  value: 'demo',
  style: {'fontSize': '24px'}
});
//  Add a title to the panel 
mainPanel.add(title)

//  Also load other things 
var dropdownPanel = ui.Panel({
  layout: ui.Panel.Layout.flow('horizontal', true),
});
mainPanel.add(dropdownPanel);

var yearSelector = ui.Select({
  placeholder: 'please wait..',
  })

var monthSelector = ui.Select({
  placeholder: 'please wait..',
  })

var button = ui.Button('Load')
var clear = ui.Button('Remove layer')
// var download_button = ui.Button('Download_button')
var download_button = ui.Label({
  value:'Load to download',
  style:{border:'2px solid black', padding:'4px'}
  })
dropdownPanel.add(yearSelector)
dropdownPanel.add(monthSelector)
dropdownPanel.add(button)
dropdownPanel.add(clear)
dropdownPanel.add(download_button)

// Set up a time series to complete the time selection 
var years = ee.List.sequence(2021, 2022)
var months = ee.List.sequence(1, 12)

//  Traverse the above list 
var yearStrings = years.map(function(year){
  return ee.Number(year).format('%04d')
})
var monthStrings = months.map(function(month){
  return ee.Number(month).format('%02d')
})

//  Evaluate the results and fill in the drop-down menu 
yearStrings.evaluate(function(yearList) {
  yearSelector.items().reset(yearList)
  yearSelector.setPlaceholder('select a year')
})

monthStrings.evaluate(function(monthList) {
  monthSelector.items().reset(monthList)
  monthSelector.setPlaceholder('select a month')

})
function maskS2clouds(image) {
  var qa = image.select('QA60');

  //  The first 10 and 11 The bits are clouds and cirrus clouds .
  var cloudBitMask = 1 << 10;
  var cirrusBitMask = 1 << 11;

  //  Both flags should be set to zero , To shift the operation to the cloud .
  var mask = qa.bitwiseAnd(cloudBitMask).eq(0)
      .and(qa.bitwiseAnd(cirrusBitMask).eq(0));

  return image.updateMask(mask).divide(10000);
}
//  Define a function , When any value changes, it will trigger 

var loadComposite = function() {
  var col = ee.ImageCollection("COPERNICUS/S2_SR");
  var year = yearSelector.getValue()
  var month = monthSelector.getValue()
  var startDate = ee.Date.fromYMD(
    ee.Number.parse(year), ee.Number.parse(month), 1)
// The end time set here is one month ahead of the month with the set number 
  var endDate = startDate.advance(1, 'month')
// Normal image time and cloud removal filtering 
  var filtered = col.filterDate(startDate,endDate)
                    .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE',10))
                    .map(maskS2clouds);
  // Select the area we want to load 
  var Beijing = ee.FeatureCollection("users/bqt2000204051/Beijing")
  var geometry = Beijing.geometry()

// Cut the image according to the vector boundary 
  var image = ee.Image(filtered.median().clip(geometry))
  var vis = {
    min: 0,
    max: 0.3,
    bands: ['B4','B3','B2'],
  };
  var name = startDate.format('yyyy-MM')
  var layerName = 'Cangio_S2_RGB_' + name.getInfo()
  Map.addLayer(image, vis, layerName)
  Map.centerObject(Beijing,11)
  
  // return [image,cangio]
image.getDownloadURL({
  params:{name:layerName,
    bands:['B4', 'B3', 'B2'],
    region:geometry,
    scale:30
    }, 
  callback:function(URL) {
    download_button.setUrl(URL)
    download_button.style().set({backgroundColor:'#90EE90'})
    download_button.setValue(layerName)
    //download_button.getImageUrl(URL)
  }
})

}
// var download_function = function(){
//     Export.image.toDrive({
//       image: loadComposite()[0].select(['B4', 'B3', 'B2']),
//       description: 'multi_band_S2',
//       folder:'S2',
//       fileNamePrefix:'multi_band_S2',
//       region:loadComposite()[1],//ee.Geometry(image.get('system:footprint')),
//       scale:10,
//       crs:'EPSG:4326',
//       maxPixels:10e13,
//       fileFormat:'GeoTIFF'
//     });
//     var download = image.getDownloadURL({
//     name: 'multi_band',
//     bands: ['R', 'G', 'B'],
//     region: geometry,
//     scale: 30,
//     filePerBand: false
//   })
//   download_button.onClick(download_function)

// }
//download_button.onClick(function(){loadComposite()})
button.onClick(function(){loadComposite()})

clear.onClick(function(){Map.clear()})

ui.root.add(mainPanel);

result ：