GEE ui界面实现：用户自画多边形， 按面积比例在多边形中自动生成样点，导出多边形和样点shp，以及删除上一组多边形和样点（有视频效果展示）

零、背景

这几天在选样点，发现GEE有强大的ui功能，于是应用在我的工作上。

下述代码实现了几个功能：

①用户可以自己勾勒多边形，随后程序会按面积比例在多边形中自动生成样点，同时根据改多边形的区域生成区域平均月NDVI曲线；可以实现选取多个多边形。

②设置【Export】ui按钮，将已选的多边形和生成的样点以shp文件形式导出。

③如果对刚才画的多边形不满意，点击【Delete】ui按钮，即可将最近画的一个多边形，以及其上生成的样点删除。

一、录了个小视频，先来感受一下效果吧！

用户自画多边形， 按面积比例在多边形中自动生成样点，导出多边形

二、代码

GEE链接：https://code.earthengine.google.com/31d8edcd71f7b5d27201b88fc46c1e05

/*-----------                        --------------Sample
-------------                       --------------*/
// 创建地图
var map1 = ui.Map().setOptions('Hybrid').setZoom(4);
var map2 = ui.Map().setOptions('Hybrid').setZoom(4);// map1 监听 map2 的缩放级别变化；map2 监听 map1 的缩放级别变
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.centerObject(aoi,8);map1.addLayer(lucc_img.clip(aoi), luccVis, year+'_Land Cover Map');//lucc_img可替换为自己的可视化数据// 获取MODIS影像集合
var modisCollection = ee.ImageCollection('MODIS/061/MOD13Q1').filterBounds(aoi).filterDate(year+'-01-01', year+'-12-31'); // 修正日期范围// 创建时间序列面板
var chartPanel = ui.Panel({style: {width: '34%'}
});// 创建一个空的 FeatureCollection 来存储样本polygon
var polygonsCollection = ee.FeatureCollection([]);
// 创建一个空的 FeatureCollection 来存储样本points
var pointsCollection = ee.FeatureCollection([]);
var numPoints; // 全局变量// 创建region 的NDVI时间序列图表
var plotNDVI = function(geometry, title) {// 选择NDVI波段并将值乘以0.0001var adjustedModisCollection = modisCollection.map(function(image) {return image.reproject('EPSG:4326').select('NDVI').multiply(0.0001).copyProperties(image, ['system:time_start']);});// ee.Reducer.mean() 计算该区域内像素值的平均值var timeSeries = ui.Chart.image.series({imageCollection: adjustedModisCollection,region: geometry,reducer: ee.Reducer.mean(),scale: 250,xProperty: 'system:time_start'}).setOptions({title: title,vAxis: {title: 'NDVI'},hAxis: {title: 'Date'},lineWidth: 1,pointSize: 3});chartPanel.clear();chartPanel.add(timeSeries);
};// 导出函数
function exportPolygons_points() {// 检查 FeatureCollection 是否包含元素if (polygonsCollection.size().getInfo() > 0) {// 导出 FeatureCollection 到 Google Drive 为 SHP 格式Export.table.toDrive({collection: polygonsCollection,description: 'Exported_Polygons',fileFormat: 'SHP' // 指定文件格式为 SHP});print('Exporting polygons to Google Drive as SHP...');} else {print('No polygons to export.');}if (pointsCollection.size().getInfo() > 0) {// 导出 FeatureCollection 到 Google Drive 为 SHP 格式Export.table.toDrive({collection: pointsCollection,description: 'Exported_Points',fileFormat: 'SHP' // 指定文件格式为 SHP});print('Exporting points to Google Drive as SHP...');
} else {print('No points to export.');
}
}
// 创建导出按钮
var exportPolygons_points_Button = ui.Button({label: 'Export Polygons/points',onClick: exportPolygons_points
});
// 将导出按钮添加到 map2
map2.add(exportPolygons_points_Button);// Function to add drawing tools to the map
function addDrawingTools(map, mapTitle) {var drawingTools = map.drawingTools();drawingTools.addLayer([], 'geometry');drawingTools.setShape('polygon');drawingTools.draw();// Draw a polygonfunction onClickToDrawPoint(){var polygon = drawingTools.layers().get(0).getEeObject(); // Get the point drawn by the userdrawingTools.layers().reset(); // Clear the drawing toolsvar areaInMeters = polygon.area();print('areaInMeters',areaInMeters);// Create a feature with the coordinates as propertiesvar polygon_feature = ee.Feature(polygon);// Add the new point to the points collectionpolygonsCollection = polygonsCollection.merge(ee.FeatureCollection([polygon_feature])); // Merge the feature into the collection//print('polygonsCollection',polygonsCollection)// Calculate the number of random points based on the areanumPoints = areaInMeters.divide(1572500).ceil();  // Area / 1572500 (in square meters)不加var 即更新全局变量 numPoints，而不是定义局部变量print('numPoints', numPoints);// Generate random points within the polygonvar randomPoints = ee.FeatureCollection.randomPoints(polygon_feature.geometry(), numPoints);//print('randomPoints',randomPoints);pointsCollection = pointsCollection.merge(ee.FeatureCollection(randomPoints)); // Merge the feature into the collection//print('pointsCollection',pointsCollection)// Update the map with the new points collectionmap1.layers().set(4, ui.Map.Layer(polygonsCollection, {color: 'FF0000'}, 'Sample Polygons'));map2.layers().set(0, ui.Map.Layer(polygonsCollection, {color: 'FF0000'}, 'Sample Polygons'));map1.layers().set(5, ui.Map.Layer(pointsCollection, {color: '000000'}, 'Sample Points'));map2.layers().set(1, ui.Map.Layer(pointsCollection, {color: '000000'}, 'Sample Points'));// Redraw the NDVI chart (or any other chart you're displaying)plotNDVI(polygon_feature, mapTitle);drawingTools.draw();}drawingTools.onDraw(onClickToDrawPoint); // Enable drawing tools
}// Add drawing tools and delete button
addDrawingTools(map1, 'Click map 1 and add polygons!');
addDrawingTools(map2, 'Click map 2 and add polygons!');
addDeleteButton();  // Add the delete button to the UI// Function to add a delete button to remove the last drawn Polygon/Points
function addDeleteButton() {// Create the delete buttonvar deleteButton = ui.Button({label: 'Delete Last Polygon/Points',onClick: function() {// Delete last polygonif (polygonsCollection.size().getInfo() > 0) {// Get the index of the last featurevar lastPolygon = polygonsCollection.toList(polygonsCollection.size()).get(-1);  // Get the last polygon// Remove the last polygon by filtering it outpolygonsCollection = polygonsCollection.filter(ee.Filter.neq('system:index', ee.Feature(lastPolygon).get('system:index')));print('Last polygon deleted');} else {print('No polygon to delete');  // Print if no polygon exists}// Delete last pointsif (pointsCollection.size().getInfo() > 0) {// Calculate the size of the collectionvar collectionSize = pointsCollection.size();// Convert FeatureCollection to listvar pointsList = pointsCollection.toList(collectionSize);//var n = numPoints // assuming `numPoints` is defined elsewhere//print('numPoints2',numPoints)// Slice the list to exclude the last `n` pointsvar slicedPointsList = pointsList.slice(0, ee.Number(collectionSize).subtract(numPoints));  // Slice to remove last `numPoints` points// Convert the sliced list back to a FeatureCollectionpointsCollection = ee.FeatureCollection(slicedPointsList);// Update the map with the new polygon/points collectionmap1.layers().set(4, ui.Map.Layer(polygonsCollection, {color: 'FF0000'}, 'Sample Polygons'));map2.layers().set(0, ui.Map.Layer(polygonsCollection, {color: 'FF0000'}, 'Sample Polygons'));map1.layers().set(5, ui.Map.Layer(pointsCollection, {color: '000000'}, 'Sample Points'));map2.layers().set(1, ui.Map.Layer(pointsCollection, {color: '000000'}, 'Sample Points'));print('Last ' + numPoints.getInfo() + ' points deleted');} else {print('No points to delete.');}}});// Add the delete button to map2map2.add(deleteButton);
}// 创建水平分割面板（宽度为整个用户界面的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%'});map2.setControlVisibility(false);//设置 map2 地图的控制面板（如缩放、平移、图层选择等控制元素）不显示
ui.root.clear(); // 清空当前用户界面上的所有内容
ui.root.insert(0, split2); // 将新的布局 split2 插入到用户界面的根容器中，位置索引为 0（即第一个位置）

完结撒花！