GEE学习笔记 二十二：滑动条和下拉列表介绍

日期:

今天继续学习一下GEE中组件滑动条（Slider）和下拉列表（Select）

先说一下滑动条这个组件，相关的API定义如下：

方法解释：

  • 构造方法 ui.Slider(min, max, value, step, onChange, direction, disabled, style)
    • min 滑动条最小值
    • max 滑动条最大值
    • value 滑块当前值
    • step 步长
    • onChange 滑动条值修改时候触发事件
    • direction 滑动条的方式 水平或者垂直
    • disabled 是否可用
    • style 样式
  • getDisabled()

获取是否可用

  • getMax()

获取最大值

  • getMin()

获取最小值

  • getStep()

获取步长

  • getValue()

获取当前滑动条值

  • onChange(callback)

滑动条值改变时候触发事件（滑动滑块后松开触发一次）

  • onSlide(callback)

触发滑块滑动时候监听事件，每次滑块滑动时候都触发

  • setDisabled(disabled)

设置滑动条是否可用

  • setMax(value)

设置滑动条最大值

  • setMin(value)

设置滑动条最小值

  • setStep(value)

设置滑块每次更新的步长，默认是1

  • setValue(value, trigger)

设置滑块默认显示值

  • style()

获取样式，可参考前篇文章内容的样式

  • unlisted(idOrType)

取消事件的监听（比如onChange或onSlider）

相关代码例子：

//ui.Slider
var slider1 = ui.Slider({
 min:0,
 max:100,
 value:30,
 step:2,
 direction: "horizontal",
 onChange: function(value) {
   print("slider1 change value is:"+ value);
 }
});
print("slider1 min: " + slider1.getMin());
print("slider1 max: " + slider1.getMax());
print("slider1 step: " + slider1.getStep());
print("slider1 current value: " + slider1.getValue());
//这个方法在滑动时候实时触发的方法
slider1.onSlide(function(value) {
 print("slider1 onslide value is: " + value);
});
print(slider1);


//初始化一个不带参数的slider，然后通过各种set方法设置相关参数
var slider2 = ui.Slider();
slider2.setDisabled(false);
slider2.setMax(100);
slider2.setMin(10);
slider2.setValue(20);
slider2.setStep(3);
slider2.onChange(function(value) {
 print("slider2 value is: " + value);
});
print(slider2);

 

运行结果：

下拉列表（Select）相关API如下

相关方法解释：

  • 构造方法 ui.Select(items, placeholder, value, onChange, disabled, style)
    • items: 内容列表
    • placeholder: 当value为空时候默认提示内容
    • value: 默认显示的值
    • onChange: 选择列表内容触发事件
    • disabled: 是否可用
    • style: 下拉列表样式
  • getDisabled()

获取是否可用

  • getPlaceholder()

获取默认显示的提示内容

  • getValue()

获取当前下拉列表的值

  • items()

获取下拉列表的所有列表值

  • onChange(callback)

选择不同列表内容触发的事件

  • setDisabled(disabled)

设置是否可用

  • setPlaceholder(placeholder)

设置当当前列表为空时候，默认显示的提示内容

  • setValue(value, trigger)

设置当前下拉列表的值

  • style()

获取样式，可参考前篇文章内容的样式

  • unlisted(idOrType)

取消事件的监听（比如onChange）

代码例子：

//ui.Select
//数据是字典类型

var places = {
 a: [112, 40],
 b: [-122, 69],
 c: [20, 20]
};
var select = ui.Select({
 items: Object.keys(places),
 placeholder: "select pos",
 onChange: function(key) {
   print("select key is : " + key + ", value is : " + places[key]);
   Map.setCenter(places[key][0], places[key][1]);
 }
});
print("items is: ", select.items());
print(select);


//数据是列表

var items = ["a", "b", "c"];
var select1 = ui.Select({
 items: items,
 onChange: function(key) {
   print("select1 key is: " + key);
 }
});
print(select1);

 

输出结果：