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

一. 目标
①构建三个面板，分别显示不同来源数据；
②面板1显示哨兵数据+面版2显示谷歌高清数据+面板3实现用户恣意交互选点，并以该点为中心构建正方形，随后天生该正方形的区域NDVI平均值长时序曲线；
③包管前两个面板可以同步缩放检察数据。
二.代码

1. // 定义研究区域
2. var aoi = ee.FeatureCollection('你的aoi链接').geometry();
3. // 获取Sentinel-2影像集合
4. var sentinelCollection = ee.ImageCollection('COPERNICUS/S2')
5.   .filterBounds(aoi)
6.   .filterDate('2020-01-01', '2020-12-31')
7.   .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 20)) // remove clouds
8.   .select(['B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8', 'B8A', 'B9', 'B10', 'B11', 'B12']);
10. // 获取特定日期的影像
11. var image1 = sentinelCollection.filterDate('2020-04-01', '2020-04-30').median().clip(aoi);
12. var image2 = sentinelCollection.filterDate('2021-04-01', '2021-04-30').median().clip(aoi);
14. // 定义可视化参数
15. var visParams = {
16.   bands: ['B4', 'B3', 'B2'],
17.   min: 0,
18.   max: 3000,
19.   gamma: 1.4// change luminance
20. };
22. // 创建地图
23. var map1 = ui.Map().setOptions('Hybrid').setZoom(4);
24. var map2 = ui.Map().setOptions('SATELLITE').setZoom(4);
26. // 监听 map1 的缩放级别变化:将 map2 的缩放级别设置为 map1 缩放级别加 2；将 map3 的缩放级别设置为 map1 缩放级别加 5
27. map1.onChangeZoom(function(zoom){
28.   zoom = parseInt(zoom); // 转换为整数类型
29.   map2.setZoom(zoom);
30. });
32. map2.onChangeZoom(function(zoom){
33.   zoom = parseInt(zoom);
34.   map1.setZoom(zoom);
35. });
37. // 当在一个地图上平移时，其他两个地图会同步平移。
38. var linker = ui.Map.Linker([map1, map2], 'change-center');
40. // 添加图层到地图面板
41. map1.addLayer(image1, visParams, 'April 2020');
42. map2.addLayer(image2, visParams, 'April 2021');
44. // 获取MODIS影像集合
45. var modisCollection = ee.ImageCollection('MODIS/006/MOD13Q1')
46.   .filterBounds(aoi)
47.   .filterDate('2020-01-01', '2020-12-31'); // 修正日期范围
49. // 创建时间序列面板
50. var chartPanel = ui.Panel({
51.   style: {
52.     width: '34%'
53.   }
54. });
56. // 创建时间序列图表
57. var plotNDVI = function(geometry, title) {
58.   // ee.Reducer.mean() 计算该区域内像素值的平均值
59.   var timeSeries = ui.Chart.image.series({
60.     imageCollection: modisCollection.select('NDVI'),
61.     region: geometry,
62.     reducer: ee.Reducer.mean(),
63.     scale: 500,
64.     xProperty: 'system:time_start'
65.   }).setOptions({
66.     title: title,
67.     vAxis: {title: 'NDVI'},
68.     hAxis: {title: 'Date'},
69.     lineWidth: 1,
70.     pointSize: 3
71.   });
72.   chartPanel.clear();
73.   chartPanel.add(timeSeries);
74. };
76. // 添加绘制工具到 map1 和 map2
77. function addDrawingTools(map, mapTitle) {
78.   var drawingTools = map.drawingTools();
79.   drawingTools.addLayer([], 'geometry');
80.   drawingTools.setShape('point');
81.   drawingTools.draw();
83.   // 绘制正方形
84.   function onClickToDrawRectangle() {
85.     var point = drawingTools.layers().get(0).getEeObject();
86.     drawingTools.layers().reset();
88.     // 创建一个以该点为中心的500米的正方形
89.     var buffer = point.buffer(250); // 500米边长的正方形边长的一半是250米
90.     var square = buffer.bounds();
91.     //ee.Image() 创建一个空的影像对象；
92.     //toByte() 方法将影像的像素值转换为字节类型，使它们适合绘制和显示
93.     //paint() 方法用于将几何形状或特征绘制到影像上
94.     var square_display = ee.Image().toByte().paint({featureCollection:square,color:111112,width:1.5});
95.     map1.layers().set(1, ui.Map.Layer(square_display));将矢量边界空心显示在网页上，设置颜色
96.     map2.layers().set(0, ui.Map.Layer(square_display));
97.     map.centerObject(point, 15); // 设置地图中心到选择的点
99.     plotNDVI(square, mapTitle);
100.     drawingTools.draw();
101.   }
102.   
103.   drawingTools.onDraw(onClickToDrawRectangle); // 启用绘图工具
104. }
106. addDrawingTools(map1, 'Map 1 NDVI Time Series');
107. addDrawingTools(map2, 'Map 2 NDVI Time Series');
109. // 创建水平分割面板（宽度为整个用户界面的66%），其中 map1 和 map2 分别位于左侧和右侧
110. var split1 = ui.Panel(ui.SplitPanel({
111.   firstPanel: map1,
112.   secondPanel: map2,
113.   orientation: 'horizontal',
114.   wipe: false,
115. }), null, {width: '66%', height:'100%'});
117. // 创建水平分割面板（宽度为整个用户界面的34%），其中 chartPanel 位于map1和map2的右侧
118. var split2 = ui.Panel(ui.SplitPanel({
119.   firstPanel: split1,
120.   secondPanel: chartPanel,
121.   orientation: 'horizontal',
122.   wipe: false,
123. }), null, {width: '100%', height: '100%'});
125. ui.root.clear(); // 清空当前用户界面上的所有内容
126. ui.root.insert(0, split2); // 将新的布局 split2 插入到用户界面的根容器中，位置索引为 0（即第一个位置）

复制代码

三. 效果

使用最左侧面板的选点工具在图中点击后，即可得到下图，也就是最右侧的NDVI时间序列。

四. 参考
GEE中多视窗链接检察舆图要素
这是本文实现的基础，非常感谢这位大佬~
完结撒花~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。