土地利用数据|气象数据|社会经济数据|npp数据|ndvi数据-地理遥感生态网

今天继续学习一下GEE中组件缩略图（Thumbnail）和输入文本框（Textbox）

缩略图组件是非常有意思的一个组件，在别的UI组件库基本上不会有这个组件，这个组件都是自己编写定义，但是GEE将其封装了一下，方便我们直接调用。API文档：

相关方法如下：

• 构造方法 ui.Thumbnail(image, params, onClick, style)

image：图片源

params：缩略图参数

onClick：点击事件

style：样式

• getImage()

获取缩略图的源

• getParams()

获取缩略图的参数

• onClick(callback)

点击回调方法

• setImage(image)

设置缩略图的源

• setParams(params)

设置生成的缩略图的参数，包括：宽高、图片的格式等设置

The parameters used in generating the thumbnail.
- dimensions (a number or pair of numbers in format WIDTHxHEIGHT) Maximum dimensions of the thumbnail to render, in pixels. If only one number is passed, it is used as the maximum, and the other dimension is computed by proportional scaling.
- region (E,S,W,N or GeoJSON) Geospatial region of the image to render. By default, the whole image.
- format (string) Either 'png' or 'jpg'.
- bands (comma-seprated strings) Comma-delimited list of band names to be mapped to RGB.
- min (comma-separated numbers) Value (or one per band) to map onto 00.
- max (comma-separated numbers) Value (or one per band) to map onto FF.
- gain (comma-separated numbers) Gain (or one per band) to map onto 00-FF.
- bias (comma-separated numbers) Offset (or one per band) to map onto 00-FF.
- gamma (comma-separated numbers) Gamma correction factor (or one per band)
- palette (comma-separated strings) List of CSS-style color strings (single-band previews only).
- opacity (number) a number between 0 and 1 for opacity.
- version (number) Version number of image (or latest)

• style()

缩略图显示的样式

• unlisted(idOrType)

取消点击事件

这里直接上代码，这段代码引用自官方文档：

//ui.Thumbnail
//定义缩略图可见的范围
var box = ee.Geometry.Polygon([[
 [-62.9564, 2.5596], [-62.9550, 2.4313],
 [-62.8294, 2.4327], [-62.8294, 2.5596]
]]);
//获取landsat5的图片
var image = ee.Image('LANDSAT/LT5_SR/LT52330581989212').visualize({
 bands: ['B3', 'B2', 'B1'],
 min: 0,
 max: 1200,
 gamma: [1.3, 1.3, 1]
});
var thumbnail = ui.Thumbnail({
 image: image,
 params: {
   dimensions: '256x256',  //缩略图大小
   region: box.toGeoJSON(), //地理信息
   format: ‘png’  //缩略图图片格式
 },
 //显示内容宽和高
 style: {height: '300px', width: '300px’},
 //点击缩略图触发事件
 onClick: function() {
   print("click thumbnail");
 }
});
print(thumbnail);
print("params is: ", thumbnail.getParams());
var img = thumbnail.getImage();
Map.centerObject(img, 9);
Map.addLayer(img);

输出内容：

地图上展示的image

文本输入框是接受用户输入内容的组件，相关API文档：

相关方法说明：

• 构造方法 ui.Textbox(placeholder, value, onChange, disabled, style)

placeholder：如果value为空时候默认显示的内容

value：显示的文本内容

onChange：当文本输入框内容修改后触发的回调方法

disabled：是否可用

style：显示样式

• getDisabled()

获取是否可用

• getPlaceholder()

获取默认显示内容

• getValue()

获取文本输入框内容

• onChange(callback)

文本输入框内容修改后触发的回调方法

• setDisabled(disabled)

设置是否可用

• setPlaceholder(placeholder)

设置value为空时候默认显示内容

• setValue(value, trigger)

设置输入框显示的内容（value），trigger意思是否触发onChange回调方法，默认是true

• style()

获取文本输入框样式，可参考前篇文章内容的样式

• unlisten(idOrType)

取消对输入框内容改变后触发的onChange内容

代码例子：

//ui.Textbox
var textbox1 = ui.Textbox({
 placeholder: "Enter your name ...",
 value: "LSW",
 onChange: function(value) {
   print("textbox1 enter text is: " + value);
 }
});
print("disabled is:" + textbox1.getDisabled());
print("placeholder is:" + textbox1.getPlaceholder());
print("value is:", textbox1.getValue());
print(textbox1);

var textbox2 = ui.Textbox({
 placeholder: "enter 123",
 value: "123"
});
textbox2.setDisabled(false);
//更新文本为空时候默认显示内容
textbox2.setPlaceholder("enter 456");
//更新默认文本
textbox2.setValue("456");
textbox2.onChange(function(value) {
 print("textbox2 enter text is: " + value);
});
print(textbox2);

输出结果：