GEE学习笔记 三十九：日期滑动组件和分屏查看地图组件

北京时间9月15日3点，Google Earth Engine（GEE）更新了两个组件日期滑动组件（ui.DateSlider）和分屏查看地图组件（ui.SplitePanel）。目前这两个组件在正式的工作空间中已经可以正常引用了。

分屏查看地图组件（ui.SplitePanel）

分屏查看地图组件（ui.SplitePanel）在

GEE学习笔记 三十四：分屏查看地图组件介绍

已经介绍过了，我看了一下正式版和测试版上的区别，主要是多了两个方法：getPanel(index)和setPanel(index)，其余的方法都一致，这里我只简单说一下这两个方法。这两个方法就是获取分屏的panel组件和设置分屏的panel组件，其中index值为0和1。0代表上侧或者左侧的panel组件，1代表是下侧或者右侧的panel组件。

日期滑动组件（ui.DateSlider）

首先显示看组件包含的方法

主要方法都是一个set和get方法，我们先介绍一下构造方法

从英文介绍中可以看到，这个组件就是为两个时间间隔设计的可以拖动的日期列表组件。

• start ： 开始日期，可以是数值或者是"2010-1-1"这种字符串。
• end ：结束日期，可以是数值或者是"2010-1-1"这种字符串。
• value ： 初始化的值。如果不设置默认的是开始日期的昨天。这里需要注意的是如果设置了这个日期，那么显示的时候依然是设置日期的前一天。
• period ： 滑动条滑动间隔天数，默认是1天。
• onChange ：滑动回调方法，参数是ee.DateRange()
• disabled ： 滑动条是否可用
• style ： 设置样式

下面所有的方法都是这几个参数的set和get方法，这里就不具体说了。接下来我会通过几个例子来说明如何使用这个组件。

1、先看一个简单的例子：

var start = "2016-1-1";
var end = "2016-2-1";

var showImage = function(range) {
  print("show image", range);
 
};
var dateSlider = ui.DateSlider({
  start: start,
  end: end,
  value: null,
  period: 1,
  onChange: showImage,
  style: {
    width: "200px"
  }
});
Map.add(dateSlider);

显示结果：

这里需要说明的是点击Jump to date可以跳转到指定的日期

点击跳转到下一天：

可以看到右侧输出，showImage()方法被调用

2、set和get方法使用的例子

var start = "2016-1-1";
var end = "2016-2-1";


var showImage = function(range) {
  print("show image", range);
 
};
var dateSlider = ui.DateSlider({
  start: start,
  end: end,
  value: null,
  period: 1,
  onChange: showImage,
  style: {
    width: "200px"
  }
});

dateSlider = dateSlider.setValue("2016-1-10");
print("start", dateSlider.getStart());
print("end", dateSlider.getEnd());
print("period", dateSlider.getPeriod());
print("value", dateSlider.getValue());
print("disabled", dateSlider.getDisabled());
Map.add(dateSlider);

显示结果：

3、综合例子，显示MOD09GA数据每天的影像

var mod09ga = ee.ImageCollection("MODIS/006/MOD09GA");
var start = "2016-1-1";
var end = "2017-1-1";
var showImage = function(range){
  print("---", range);
  var col = mod09ga.filterDate(range.start(), range.end());
  var mosaic = col.mosaic().unitScale(0, 10000);
  var visParams = {bands: ["sur_refl_b01","sur_refl_b04","sur_refl_b03"], min: 0, max:1};
  var layer = ui.Map.Layer(mosaic, visParams, "layer");
  Map.layers().set(0, layer);
};

showImage(ee.DateRange(start, ee.Date(start).advance(1, "day")));
ee.DateRange(start, end).evaluate(function(range) {
  print("+++",range);
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: start,
    period: 1,
    onChange: showImage,
    style: {
      width: "200px",
      padding: "2px"
    }
  });
  var main_panel = ui.Panel({
    widgets: [dateSlider],
    style: {
      width: "280px",
      padding: "4px"
    }
  });
  ui.root.insert(0, main_panel);
});

显示结果如下图：

通过这个方法，我们可以非常方便做查看某一个时间序列的影像了。