GEE:多面板同步缩放查看多源数据，并实现交互选点构建NDVI曲线

news2024/12/23 10:00:07

一. 目标

①构建三个面板，分别显示不同来源数据；

②面板1显示哨兵数据+面版2显示谷歌高清数据+面板3实现用户任意交互选点，并以该点为中心构建正方形，随后生成该正方形的区域NDVI平均值长时序曲线；

③保证前两个面板可以同步缩放查看数据。

二.代码

// 定义研究区域
var aoi = ee.FeatureCollection('你的aoi链接').geometry(); 
// 获取Sentinel-2影像集合
var sentinelCollection = ee.ImageCollection('COPERNICUS/S2')
  .filterBounds(aoi)
  .filterDate('2020-01-01', '2020-12-31')
  .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 20)) // remove clouds
  .select(['B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8', 'B8A', 'B9', 'B10', 'B11', 'B12']);

// 获取特定日期的影像
var image1 = sentinelCollection.filterDate('2020-04-01', '2020-04-30').median().clip(aoi);
var image2 = sentinelCollection.filterDate('2021-04-01', '2021-04-30').median().clip(aoi);

// 定义可视化参数
var visParams = {
  bands: ['B4', 'B3', 'B2'],
  min: 0,
  max: 3000,
  gamma: 1.4// change luminance
};

// 创建地图
var map1 = ui.Map().setOptions('Hybrid').setZoom(4);
var map2 = ui.Map().setOptions('SATELLITE').setZoom(4);

// 监听 map1 的缩放级别变化:将 map2 的缩放级别设置为 map1 缩放级别加 2；将 map3 的缩放级别设置为 map1 缩放级别加 5
map1.onChangeZoom(function(zoom){
  zoom = parseInt(zoom); // 转换为整数类型
  map2.setZoom(zoom);
});

map2.onChangeZoom(function(zoom){
  zoom = parseInt(zoom);
  map1.setZoom(zoom);
});

// 当在一个地图上平移时，其他两个地图会同步平移。
var linker = ui.Map.Linker([map1, map2], 'change-center');

// 添加图层到地图面板
map1.addLayer(image1, visParams, 'April 2020');
map2.addLayer(image2, visParams, 'April 2021');

// 获取MODIS影像集合
var modisCollection = ee.ImageCollection('MODIS/006/MOD13Q1')
  .filterBounds(aoi)
  .filterDate('2020-01-01', '2020-12-31'); // 修正日期范围

// 创建时间序列面板
var chartPanel = ui.Panel({
  style: {
    width: '34%'
  }
});

// 创建时间序列图表
var plotNDVI = function(geometry, title) {
  // ee.Reducer.mean() 计算该区域内像素值的平均值
  var timeSeries = ui.Chart.image.series({
    imageCollection: modisCollection.select('NDVI'),
    region: geometry,
    reducer: ee.Reducer.mean(),
    scale: 500,
    xProperty: 'system:time_start'
  }).setOptions({
    title: title,
    vAxis: {title: 'NDVI'},
    hAxis: {title: 'Date'},
    lineWidth: 1,
    pointSize: 3
  });
  chartPanel.clear();
  chartPanel.add(timeSeries);
};

// 添加绘制工具到 map1 和 map2
function addDrawingTools(map, mapTitle) {
  var drawingTools = map.drawingTools();
  drawingTools.addLayer([], 'geometry');
  drawingTools.setShape('point');
  drawingTools.draw();

  // 绘制正方形
  function onClickToDrawRectangle() {
    var point = drawingTools.layers().get(0).getEeObject();
    drawingTools.layers().reset();

    // 创建一个以该点为中心的500米的正方形
    var buffer = point.buffer(250); // 500米边长的正方形边长的一半是250米
    var square = buffer.bounds();
    //ee.Image() 创建一个空的影像对象；
    //toByte() 方法将影像的像素值转换为字节类型，使它们适合绘制和显示
    //paint() 方法用于将几何形状或特征绘制到影像上
    var square_display = ee.Image().toByte().paint({featureCollection:square,color:111112,width:1.5});
    map1.layers().set(1, ui.Map.Layer(square_display));将矢量边界空心显示在网页上，设置颜色
    map2.layers().set(0, ui.Map.Layer(square_display));
    map.centerObject(point, 15); // 设置地图中心到选择的点

    plotNDVI(square, mapTitle);
    drawingTools.draw();
  }
  
  drawingTools.onDraw(onClickToDrawRectangle); // 启用绘图工具
}

addDrawingTools(map1, 'Map 1 NDVI Time Series');
addDrawingTools(map2, 'Map 2 NDVI Time Series');

// 创建水平分割面板（宽度为整个用户界面的66%），其中 map1 和 map2 分别位于左侧和右侧
var split1 = ui.Panel(ui.SplitPanel({
  firstPanel: map1,
  secondPanel: map2,
  orientation: 'horizontal',
  wipe: false,
}), null, {width: '66%', height:'100%'});

// 创建水平分割面板（宽度为整个用户界面的34%），其中 chartPanel 位于map1和map2的右侧
var split2 = ui.Panel(ui.SplitPanel({
  firstPanel: split1,
  secondPanel: chartPanel,
  orientation: 'horizontal',
  wipe: false,
}), null, {width: '100%', height: '100%'});

ui.root.clear(); // 清空当前用户界面上的所有内容
ui.root.insert(0, split2); // 将新的布局 split2 插入到用户界面的根容器中，位置索引为 0（即第一个位置）

三. 结果