GEE学习笔记 十九：文本、按钮和多选框

日期:

今天主要讲一下GEE自带组件中的Label、Button和checkBox。

Label这个组件就是显示我们输入的文本内容，也是最为基本和最简单的组件，相关的API文档如下图所示：

 

只有四个方法：

  • 构造方法 ui.Label(value, style)

构建一个Label组件，参数分别为：value（显示的文本内容）；style（文本样式）。其中style样式这个参数我们一般都默认参数，除非是你非常在乎文本显示的格式，否则采用默认设置。

  • getValue()

获取文本内容

  • setValue(value)

设置文本内容，参数value为要显示的文本内容

  • style()
   获取文本的样式具体的样式引用官方内容如下：

Returns the widget's style ActiveDictionary, which can be modified to update the widget's styles.Properties which behave like their CSS counterparts:
- height, maxHeight, minHeight (e.g. '100px’)  高度，最大高度，最小高度
- width, maxWidth, minWidth (e.g. '100px’) 宽度，最大宽度，最小宽度
- padding, margin (e.g. '4px 4px 4px 4px' or simply '4px’) 内边距，外边距
- color, backgroundColor (e.g. 'red' or '#FF0000’) 字体颜色，背景颜色
- border (e.g. '1px solid black’) 边界样式
- fontSize (e.g. '24px’) 字体大小
- fontWeight (e.g. 'bold' or '100’) 字体样式
- textAlign (e.g. 'left' or 'center’) 文本对齐方式
- shown (true or false) 是否显示
Supported custom layout properties (see ui.Panel.Layout documentation):
- stretch ('horizontal', 'vertical', 'both’) 拉伸
      - position ('top-right', 'top-center', 'top-left', 'bottom-right', …) 位置

 

例子：

//ui.Label
var label1 = ui.Label("this is label1");
print(label1);
print("pre label1 value is", label1.getValue());
label1.setValue("change label1 value");
print("after set label1 value is", label1.getValue());


//显示样式是红色字体，绿色背景，边界3px实心黑色
print("----------------------")
var label2 = ui.Label({
 value: "this is label2",
 style: {
   color: "#ff0000",
   backgroundColor: "#00ff00",
   border: "3px solid black"
 }
})
print(label2)
print("label2 style is: ", label2.style())

显示效果：

Button组件，顾名思义就是按钮组件，GEE的APP中所有按钮都是通过这个组件生成，相关的API如下图所示：

按钮是最为最为常用的组件，相关方法如下：

  • 构造方法 ui.Button(label, onClick, disabled, style)

构造一个按钮，参数含义：

label 按钮上显示的文本内容

onClick 点击按钮回调方法

disabled 按钮是否可用

style 按钮样式

  • getDisabled()

获取按钮显示状态是否可用

  • getLabel()

获取按钮文本内容

  • onClick(callback)

设置点击按钮回调方法

  • setDisabled(disabled)

设置按钮是否可用的状态，不影响点击的onClick事件

  • setLabel(label)

设置按钮文本内容

  • style()

获取按钮样式，参考label设置的style

  • unlisted(idOrType)

取消对按钮的监控

例子：

//ui.Button
var btn = ui.Button("button1");
btn.onClick(function() {
 print("click button1");
});
print(btn);


print("button is disabled", btn.getDisabled());
print("pre button label", btn.getLabel());
btn.setLabel("newButton1");
print("new button label", btn.getLabel());


print("-------------------------");
var btn2 = ui.Button({
 label: "button2",
 onClick: function() {
   print("click button2");
 },
 style: {
   color: "#ff0000"
 }
});
print(btn2);


print("-------------------------");
var btn3 = ui.Button({
 label: "button3"
});
var btnId = btn3.onClick(function() {
 print("click button3");
})
btn3.unlisten(btnId);
print(btn3);


print("-------------------------");
var btn4 = ui.Button({
 label: "button4"
});
btn4.onClick(function() {
 print("click button4");
})
btn4.setDisabled(true);
print(btn4);

 

结果显示：

 

checkBox组件也就是复选框组件，主要是用来做各种复选操作的的组件，API文档内容如下图：

复选框的方法比较多，其实都很简单：

  • 构造方法 ui.Checkbox(label, value, onChange, disabled, style)

构建一个复选框，参数分别为：

label 复选框显示内容

value 是否选中

onChange 选中或取消选中触发的方法

disabled 是否可用

style 样式，可参考label样式

  • getDisabled()

获取是否可用

  • getValue()

获取当前是否选中

  • onChange(callback)

选中或者取消回调方法

  • setDisabled(disabled)

设置是否可用

  • setValue(value, trigger)

设置是否选中，value是否布尔值，trigger意思是否触发onChange回调方法，默认是true

  • style()
  • unlisten(idOrType)

设置是否取消对当前组件的监听

例子：

//ui.CheckBox
var roi = ee.Geometry.Point([116.38778686523438,39.925535281697286]);
var srtm = ee.Image("USGS/SRTMGL1_003");
var checkbox1 = ui.Checkbox("checkbox 1", true);
checkbox1.onChange(function(checked){
 print("1 select box: " + checked);
 //改变地图层
 Map.layers().get(0).setShown(checked);
});
print(checkbox1);
print("checkbox1 getDisabled: ", checkbox1.getDisabled());
print("checkbox1 getValue: ", checkbox1.getValue());
print("checkbox1 style: ", checkbox1.style());
//map add layer
Map.centerObject(roi, 9);
Map.addLayer(srtm);


print("------------------------");
var checkbox2 = ui.Checkbox({
 label: "checkbox 2",
 value: false,
 onChange: function(checked) {
   print("2 select box : " + checked);
 }
});
print(checkbox2);


print("------------------------");
var checkbox3 = ui.Checkbox({
 label: "checkbox 3",
 value: false,
 onChange: function(checked) {
   print("3 select box : " + checked);
 }
});
//构造方法中默认不选中，但是这里设置为选中，同时触发onChange方法
checkbox3.setValue(true, true);
print("checkbox 3 value is: " + checkbox3.getValue());
print(checkbox3);




print("------------------------");
var checkbox4 = ui.Checkbox({
 label: "checkbox 4",
 value: false
});
var checkboxId = checkbox4.onChange(function(checked) {
 print("4 select box : " + checked);
});
//取消对复选框的监听，也就是不触发onChange方法
checkbox4.unlisten(checkboxId);
print(checkbox4);

 

显示效果：