PIE

admin管理员组

文章数量:1794759

PIE

本次教程我们主要是展示一个之前航天宏图竞赛的结果，主题是将PIE二次开发的作品结果的展示：“1984-2021年黄河口及其邻近海域水质遥感监测”，我们这里可以看到一个简单的APP界面，并没有太大的操作，但是代码达到1000+，我们首先看到代码加载矢量边界，并将填充颜色预加载，这里分别设定悬浮泥沙、透明度和叶绿素颜色的设定，然后开始进行相应的Landsat 5/7/8分别计算叶绿素函数，透明度和的计算，最后，加载相应的按钮和标签等控件

计算悬沙浓度的公式：

(((b4.power(2)).multiply(617919)).subtract(b4.multiply(1245.8))).add(27.333)

透明度计算公式：(((((b4.divide(b3)).power(2)).multiply(46.625)).subtract((((b4.divide(b3)).power(3)).multiply(21.035)))).subtract((b4.divide(b3)).multiply(26.701))).add(5.766);

这里用到的函数：

ui.Select(items,placeholder,value,multiple,onChange,disabled,style)

下拉列表组件。

方法参数：

- ui(ui)

调用者：ui对象。

- items(List)

每个下拉选项对应的具体内容。

- placeholder(String)

默认显示的文本。

- value(String|List)

当前选择值。

- multiple(Boolean)

是否可以多选。

- onChange(Function)

选择不同值时触发的方法。

- disabled(Boolean)

下拉列表是否可用。

- style(Object)

组件的样式。

返回值：ui.Select

ui.root.remove(widget)

删除指定的组件。

方法参数：

- root(ui.root)

调用者：ui.root实例。

- widget(UI)

要删除掉的组件。

返回值：Boolean

ui.Switch(value,onChange,disabled,style)

切换按钮组件。

方法参数：

- ui(ui)

调用者：ui对象。

- value(Boolean)

当前显示值。

- onChange(Function)

选择不同值时触发的方法。

- disabled(Boolean)

切换按钮是否禁用。

- style(Object)

组件的样式。

返回值：ui.Switch

toList(tupleSize,numOptional)

返回一个Reducer。它将其输入放入一个列表中，可以选择分组为元组。

方法参数：

- reducer(Reducer)

reducer实例。

- tupleSize(Int)

每个输出元组的大小；如果没有分组，则为null。

- numOptional(Int)

最后numOptional个输入将被视为可选；其他输入必须为非空，否则将删除输入元组。

返回值：Reducer

ui.TextBox(placeholder,value,onChange,disabled,style)

文本输入框。

方法参数：

- ui(ui)

调用者：ui对象。

- placeholder(String)

value为空时默认显示内容

- value(String)

显示内容。

- onChange(Function)

文本改变触发事件。

- disabled(boolean)

是否禁用。

- style(Object)

组件样式。

返回值：ui.TextBox

ui.Layout.flow(direction,wrap)

流式布局。

方法参数：

- layout(ui.Layout)

调用者：ui.Layout对象。

- direction(String)

布局的方向，可选值horizontal|vertical，默认vertical

- wrap(Boolean)

是否换行，默认false

返回值：ui.Layout

这是我们UI设计后的结果，以下的代码就是整个过程相对清晰：

代码：

/*** @Name    :   1984-2021年黄河口及其临近海域水质遥感监测* @Author  :   齐鲁工业大学初识黄河口队* @Source  :   航天宏图第四届 “航天宏图杯”PIE软件二次开发大赛云开发组三等奖获奖作品*///加载黄河口边界矢量并添加至图层，得到边界图形
var hhk = pie.FeatureCollection('user/pieadmin/hhkrs').first().geometry();
//设置图像显示的中心点和放大倍数      
Map.centerObject(hhk, 7);
//设置边界矢量图形的边框颜色为黄色以及填充颜色为透明
Map.addLayer(hhk, { color: 'FFFF00FF', fillColor: '00000000' }, "hhk");var color1 = ['#040274', '#040281', '#0502a3', '#0502b8', '#0502ce', '#0502e6', '#0602ff', '#235cb1','#307ef3', '#269db1', '#30c8e2', '#32d3ef', '#3be285', '#3ff38f', '#86e26f', '#3ae237', '#b5e22e','#d6e21f', '#fff705', '#ffd611', '#ffb613', '#ff8b13', '#ff6e08', '#ff500d', '#ff0000', '#de0101','#c21301', '#a71001', '#911003'
];
var color2 = ['#911003', '#a71001', '#c21301', '#de0101', '#ff0000', '#ff500d', '#ff6e08','#ff8b13', '#ffb613', '#ffd611', '#fff705', '#d6e21f', '#b5e22e', '#3ae237', '#86e26f','#3ff38f', '#3be285', '#32d3ef', '#30c8e2', '#269db1', '#307ef3', '#235cb1', '#0602ff','#0502e6', '#0502ce', '#0502b8', '#0502a3', '#040281', '#040274'
];
//悬浮泥沙显示颜色设置
var vis = {min: 0,max: 16000,palette: color1
};
//透明度显示颜色设置
var vis1 = {min: 0,max: 10,palette: color1
};
//叶绿素颜色设置
var vis2 = {min: 0,max: 5,palette: color2
};
//悬沙浓度色度条颜色设置
var data1 = {title: "悬浮泥沙浓度 (mg/L)",colors: color1,labels: ["0", "4000", "8000", "12000", "16000"],step: 30
};
//UI样式设置
var style1 = {bottom: "10px",left: "40%",width: "300px",height: "70px"
};
//添加UI
var legend1 = ui.Legend(data1, style1);//透明度色度条颜色设置
var data2 = {title: "透明度 (m)",colors: color1,labels: ["10", "8", "6", "4", "2", "0"],step: 30
};
//UI样式设置
var style2 = {bottom: "10px",left: "40%",width: "300px",height: "70px"
};
//添加UI
var legend2 = ui.Legend(data2, style2);//叶绿素浓度色度条颜色设置
var data3 = {title: "叶绿素a (ug/L)",colors: color1,labels: ["0", "1", "2", "3", "4", "5"],step: 30
};
//UI样式设置
var style3 = {bottom: "10px",left: "40%",width: "300px",height: "70px"
};
//添加UI
var legend3 = ui.Legend(data3, style3);var imgKey = null;//叶绿素浓度-L8-年份
function changeC8(value) {var year = value;var l8img = pie.ImageCollection("LC08/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B5", "B4"]);var yearImg = l8img.mosaic();var image = yearImg.clip(hhk);var b5 = image.select("B5");var b4 = image.select("B4");b5 = b5.updateMask(b5.lte(43636).and(b5.gte(7273)))b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b5 = (b5.multiply(0.0000275)).subtract(0.2);b4 = (b4.multiply(0.0000275)).subtract(0.2);//计算叶绿素浓度var chl = b5.divide(b4).multiply(-6.69).add(7.22);//清理图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(chl, vis2, year, true);//提供图像下载Export.image({image: chl,description: year,region: hhk,scale: 30});
}
var C8 = ui.Select({items: ["2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"],placeholder: "请选择",value: "",multiple: false,onChange: changeC8,
});//叶绿素浓度-L7-年份
function changeC7(value) {var year = value;var l7img = pie.ImageCollection("LE07/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3"]);var yearImg = l7img.mosaic();var image = yearImg.clip(hhk);var b4 = image.select("B4");var b3 = image.select("B3");b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b4 = b4.multiply(0.0000275).subtract(0.2);b3 = b3.multiply(0.0000275).subtract(0.2);//计算叶绿素浓度var chl = b4.divide(b3).multiply(-6.69).add(7.22);//清理图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(chl, vis2, year, true);//提供图像下载Export.image({image: chl,description: year,region: hhk,scale: 30});
}
var C7 = ui.Select({items: ["2012"],placeholder: "请选择",value: "",multiple: false,onChange: changeC7,
});//叶绿素浓度-L5-年份
function changeC5(value) {var year = value;var l5img = pie.ImageCollection("LT05/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3"]);var yearImg = l5img.mosaic();var image = yearImg.clip(hhk);var b4 = image.select("B4");var b3 = image.select("B3");b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b4 = b4.multiply(0.0000275).subtract(0.2);b3 = b3.multiply(0.0000275).subtract(0.2);//计算叶绿素浓度var chl = b4.divide(b3).multiply(-6.69).add(7.22);//清理图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(chl, vis2, year, true);//提供图像下载Export.image({image: chl,description: year,region: hhk,scale: 30});
}
var C5 = ui.Select({items: ["1984", "1985", "1986", "1987", "1988", "1989", "1990","1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"],placeholder: "请选择",value: "",multiple: false,onChange: changeC5,
});//选择叶绿素的数据源
function changeSelect3(value) {switch (value) {case "Landsat 5 TM":ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(B8);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(C5);break;case "Landsat 7 ETM+":ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(B8);ui.root.remove(C5);ui.root.remove(C8);ui.root.add(C7);break;case "Landsat 8 OLI":ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(B8);ui.root.remove(C5);ui.root.remove(C7);ui.root.add(C8)break;}
}
var select3 = ui.Select({items: ["Landsat 5 TM", "Landsat 7 ETM+", "Landsat 8 OLI"],placeholder: "请选择",multiple: false,onChange: changeSelect3,
});//透明度-L8-年份
function changeB8(value) {var year = value;var l8img = pie.ImageCollection("LC08/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3", "B2"]);var yearImg = l8img.mosaic();var image = yearImg.clip(hhk);var b4 = image.select("B4");var b3 = image.select("B3");var b2 = image.select("B2");b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b2 = b2.updateMask(b2.lte(43636).and(b2.gte(7273)))b4 = ((b4).multiply(0.0000275)).subtract(0.2);b3 = ((b3).multiply(0.0000275)).subtract(0.2);b2 = ((b2).multiply(0.0000275)).subtract(0.2);//计算透明度var ssd = (((((b4.divide(b3)).power(2)).multiply(46.625)).subtract((((b4.divide(b3)).power(3)).multiply(21.035)))).subtract((b4.divide(b3)).multiply(26.701))).add(5.766);//清理图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(ssd, vis1, year, true);//提供图像下载Export.image({image: ssd,description: year,region: hhk,scale: 30});
}
var B8 = ui.Select({items: ["2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"],placeholder: "请选择",value: "",multiple: false,onChange: changeB8,
});//透明度-L7-年份
function changeB7(value) {var year = value;var l7img = pie.ImageCollection("LE07/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3", "B2"]);var yearImg = l7img.mosaic();var image = yearImg.clip(hhk);var b4 = image.select("B4");var b3 = image.select("B3");var b2 = image.select("B2");b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b2 = b2.updateMask(b2.lte(43636).and(b2.gte(7273)))b4 = ((b4).multiply(0.0000275)).subtract(0.2);b3 = ((b3).multiply(0.0000275)).subtract(0.2);b2 = ((b2).multiply(0.0000275)).subtract(0.2);//计算透明度var ssd = (((((b3.divide(b2)).power(2)).multiply(46.625)).subtract((((b3.divide(b2)).power(3)).multiply(21.035)))).subtract((b3.divide(b2)).multiply(26.701))).add(5.766);//清理图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(ssd, vis1, year, true);//提供图像下载Export.image({image: ssd,description: year,region: hhk,scale: 30});
}
var B7 = ui.Select({items: ["2012"],placeholder: "请选择",value: "",multiple: false,onChange: changeB7,
});//透明度-L5-年份
function changeB5(value) {var year = value;var l5img = pie.ImageCollection("LT05/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3", "B2"]);var yearImg = l5img.mosaic();var image = yearImg.clip(hhk);var b4 = image.select("B4");var b3 = image.select("B3");var b2 = image.select("B2");b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b2 = b2.updateMask(b2.lte(43636).and(b2.gte(7273)))b4 = ((b4).multiply(0.0000275)).subtract(0.2);b3 = ((b3).multiply(0.0000275)).subtract(0.2);b2 = ((b2).multiply(0.0000275)).subtract(0.2);//计算透明度var ssd = (((((b3.divide(b2)).power(2)).multiply(46.625)).subtract((((b3.divide(b2)).power(3)).multiply(21.035)))).subtract((b3.divide(b2)).multiply(26.701))).add(5.766);//清理图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(ssd, vis1, year, true);//提供图像下载Export.image({image: ssd,description: year,region: hhk,scale: 30});
}
var B5 = ui.Select({items: ["1984", "1985", "1986", "1987", "1988", "1989", "1990","1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998","1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006","2007", "2008", "2009", "2010", "2011"],placeholder: "请选择",value: "",multiple: false,onChange: changeB5,
});//选择透明度的数据源
function changeSelect2(value) {switch (value) {case "Landsat 5 TM":ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(B7);ui.root.remove(B8);ui.root.remove(C5);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(B5);break;case "Landsat 7 ETM+":ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(B5);ui.root.remove(B8);ui.root.remove(C5);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(B7);break;case "Landsat 8 OLI":ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(C5);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(B8);break;}
}var select2 = ui.Select({items: ["Landsat 5 TM", "Landsat 7 ETM+", "Landsat 8 OLI"],placeholder: "请选择",multiple: false,onChange: changeSelect2,
});
//悬沙-L5-年份
function changeA5(value) {var year = value;var l5img = pie.ImageCollection("LT05/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B3"]);var yearImg = l5img.mosaic();var image = yearImg.clip(hhk);var b3 = image.select("B3");b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b3 = ((b3).multiply(0.0000275)).subtract(0.2);//计算悬沙浓度var ssc = (((b3.power(2)).multiply(614561.673)).add(b3.multiply(1349.630))).add(5.184);//清理图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(ssc, vis, year, true);//提供图像下载Export.image({image: ssc,description: year,region: hhk,scale: 30});
}
var A5 = ui.Select({items: ["1984", "1985", "1986", "1987", "1988", "1989", "1990","1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998","1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006","2007", "2008", "2009", "2010", "2011"],placeholder: "请选择",value: "",multiple: false,onChange: changeA5,
});
//悬沙-L7-年份
function changeA7(value) {var year = value;var l7img = pie.ImageCollection("LE07/02/SR").filterDate("2012-01-01", "2012-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B3", "B1"]);var yearImg = l7img.mosaic();var image = yearImg.clip(hhk);var b3 = image.select("B3");var b1 = image.select("B1");b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)));b1 = b1.updateMask(b1.lte(43636).and(b1.gte(7273)));b1 = ((b1).multiply(0.0000275)).subtract(0.2);b3 = ((b3).multiply(0.0000275)).subtract(0.2);//计算悬沙浓度var ssc = (((b3.power(2)).multiply(614561.673)).add(b3.multiply(1349.630))).add(5.184);//清理图层   if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像至图层imgKey = Map.addLayer(ssc, vis, year, true);Export.image({image: ssc,description: year,region: hhk,scale: 30});
}
var A7 = ui.Select({items: ["2012"],placeholder: "请选择",value: "",multiple: false,onChange: changeA7,
});
//悬沙-L8-年份
function changeA8(value) {var year = value;var l8img = pie.ImageCollection("LC08/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4"]);var yearImg = l8img.mosaic();var image = yearImg.clip(hhk);var b4 = image.select("B4");b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b4 = (b4.multiply(0.0000275)).subtract(0.2);//计算悬沙浓度var ssc = (((b4.power(2)).multiply(617919)).subtract(b4.multiply(1245.8))).add(27.333);//清理图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(ssc, vis, year, true);//提供图像下载Export.image({image: ssc,description: year,region: hhk,scale: 30});
}
var A8 = ui.Select({items: ["2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"],placeholder: "请选择",value: "",multiple: false,onChange: changeA8,
});//选择悬沙的数据源
function changeSelect1(value) {switch (value) {case "Landsat 5 TM":ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(B8);ui.root.remove(C5);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(A5);break;case "Landsat 7 ETM+":ui.root.remove(A5);ui.root.remove(A8);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(B8);ui.root.remove(C5);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(A7);break;case "Landsat 8 OLI":ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(B8);ui.root.remove(C5);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(A8);break;}
}
var select1 = ui.Select({items: ["Landsat 5 TM", "Landsat 7 ETM+", "Landsat 8 OLI"],placeholder: "请选择",multiple: false,onChange: changeSelect1,
});var label1 = ui.Label("1984-2021年黄河口及其邻近海域水质遥感监测", {"font-size": "24px",color: "blue"
});
var label2 = ui.Label("数据源及时间", {"font-size": "18px",color: "blue"
});
var label3 = ui.Label("水质参数", {"font-size": "18px",color: "blue"
});
//水质参数单选条
function funRadio1(value) {Map.removeUI(label4);Map.removeUI(label5);Map.removeUI(label6);switch (value) {case "悬浮泥沙":Map.removeUI(legend2);Map.removeUI(legend3);Map.addUI(legend1);ui.root.remove(select2);ui.root.remove(select3);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(B8);ui.root.remove(C5);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(select1);break;case "透明度":Map.removeUI(legend1);Map.removeUI(legend3);Map.addUI(legend2);ui.root.remove(select1);ui.root.remove(select3);ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(C5);ui.root.remove(C7);ui.root.remove(C8);ui.root.add(select2);break;case "叶绿素a":Map.removeUI(legend1);Map.removeUI(legend2);Map.addUI(legend3);ui.root.remove(select1);ui.root.remove(select2);ui.root.remove(A5);ui.root.remove(A7);ui.root.remove(A8);ui.root.remove(B5);ui.root.remove(B7);ui.root.remove(B8);ui.root.add(select3);break;}
}
var radio1 = ui.Radio({label: ["悬浮泥沙", "透明度", "叶绿素a"],value: "",onChange: funRadio1
});var label4 = ui.Label("")
label4 = label4.setStyle({"backgroundColor": "white"
})var label5 = ui.Label("")
label5 = label5.setStyle({"backgroundColor": "white"
})var label6 = ui.Label("")
label6 = label6.setStyle({"backgroundColor": "white"
})//动图展示
//悬浮泥沙
//1984-2021年间黄河口悬浮泥沙浓度反演结果动态展示
function clickBtn1() {Map.removeUI(legend1);Map.removeUI(legend2);Map.removeUI(legend3);Map.addUI(legend1);Map.removeUI(label4);Map.removeUI(label5);Map.removeUI(label6);Map.addUI(label4);//利用landsat 5 TM遥感影像反演1984-2011年研究区域内悬沙浓度var l5Imgs = [];//设置图像选择器，选择1984-2011年云量小于5%的Landsat 5 TM遥感影像//按照加载的黄河口矢量图形进行裁剪for (var year = 1984; year <= 2011; year++) {var l5img = pie.ImageCollection("LT05/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4"]);var yearImg = l5img.mosaic();var image = yearImg.clip(hhk);var b4 = image.select("B4");b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b4 = ((b4).multiply(0.0000275)).subtract(0.2);//计算悬沙浓度var ssc = (((b4.power(2)).multiply(614561.673)).add(b4.multiply(1349.630))).add(5.184);//清空图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像至图层Map.addLayer(ssc, vis, year, false);//分别以year,sscmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l5Imgs数列l5Imgs.push(yearImg);}//2012年黄河口悬沙浓度反演结果动态展示//利用landsat 7 ETM+遥感影像反演2012年研究区域内悬沙浓度var l7Imgs = [];//设置图像选择器，选择2012年云量小于5%的Landsat 7 ETM+遥感影像//按照加载的黄河口矢量图形进行裁剪var l7img = pie.ImageCollection("LE07/02/SR").filterDate("2012-01-01", "2012-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B1"]);var yearImg = l7img.mosaic();var image = yearImg.clip(hhk);var b1 = image.select("B1");var b4 = image.select("B4");b1 = b1.updateMask(b1.lte(43636).and(b1.gte(7273)))b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b1 = ((b1).multiply(0.0000275)).subtract(0.2);b4 = ((b4).multiply(0.0000275)).subtract(0.2);//计算悬沙浓度var ssc = (((b4.power(2)).multiply(614561.673)).add(b4.multiply(1349.630))).add(5.184);//添加图像至图层Map.addLayer(ssc, vis, year, false);//分别以year,ssdmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l7Imgs数列l7Imgs.push(yearImg);//利用landsat 8 OLI遥感影像反演2013-2021年研究区域内悬沙浓度var l8Imgs = [];//设置图像选择器，选择2013-2021年云量小于5%的Landsat 8 OLI遥感影像，并按照加载的黄河口矢量图形进行裁剪for (var year = 2013; year <= 2021; year++) {var l8img = pie.ImageCollection("LC08/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4"]);var yearImg = l8img.mosaic();var image = yearImg.clip(hhk);var b4 = image.select("B4");b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b4 = (b4.multiply(0.0000275)).subtract(0.2);//计算悬沙浓度var ssc = (((b4.power(2)).multiply(617919)).subtract(b4.multiply(1245.8))).add(27.333);//添加图像至图层Map.addLayer(ssc, vis, year, false);//分别以year,sscmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l8Imgs数列l8Imgs.push(yearImg);}//构建Landsat 5、Landsat 7、Landsat 8影像集合l5Imgs = pie.ImageCollection.fromImages(l5Imgs);l7Imgs = pie.ImageCollection.fromImages(l7Imgs);l8Imgs = pie.ImageCollection.fromImages(l8Imgs);//合并Landsat 5、Landsat 7和Landsat 8影像集，得到imageCollection lasvar las = l5Imgs.merge(l7Imgs);las = las.merge(l8Imgs);//定义年份和悬沙浓度均值数列为空集var dates = [];//根据影像集合 las 长度，分别以year和sscmean索引将年份和悬沙浓度均值添加至dates和meanValues数据集var result = las.reduceColumns(pie.Reducer.toList(2), ["year", "sscmean"]).getInfo(function(msgInfo) {dates = msgInfo["list"]["year"];//以1984-2021年的黄河口悬沙浓度示意图在图层上循环展示Map.playLayersAnimation(dates, 1, 1, function(name, index) {label4 = label4.setValue(name);});});return;
};var btn1 = ui.Button({label: "悬浮泥沙",type: "success",onClick: clickBtn1,
});//透明度
//1984-2021年间黄河口透明度反演结果动态展示与平均浓度展示
function clickBtn2() {Map.removeUI(legend1);Map.removeUI(legend2);Map.removeUI(legend3);Map.addUI(legend2);Map.removeUI(label4);Map.removeUI(label5);Map.removeUI(label6);Map.addUI(label5);//利用landsat 5 TM遥感影像反演1984-2011年研究区域内透明度//var imgKey = null;var l5Imgs = [];//设置图像选择器，选择1984-2011年云量小于5%的Landsat 5 TM遥感影像//按照加载的黄河口矢量图形进行裁剪for (var year = 1984; year <= 2011; year++) {var l5img = pie.ImageCollection("LT05/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B3", "B4", "B2"]);var yearImg = l5img.mosaic();var image = yearImg.clip(hhk);var b2 = image.select("B2");var b3 = image.select("B3");var b4 = image.select("B4");b2 = b2.updateMask(b2.lte(43636).and(b2.gte(7273)))b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b2 = ((b2).multiply(0.0000275)).subtract(0.2);b3 = ((b3).multiply(0.0000275)).subtract(0.2);b4 = ((b4).multiply(0.0000275)).subtract(0.2);//计算透明度var ssd = (((((b4.divide(b3)).power(2)).multiply(46.625)).subtract((((b4.divide(b3)).power(3)).multiply(21.035)))).subtract((b4.divide(b3)).multiply(26.701))).add(5.766);//清空图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像至图层Map.addLayer(ssd, vis1, year, false);//分别以year,ssdmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l5Imgs数列l5Imgs.push(yearImg);}//2012年黄河口透明度反演结果动态展示与平均展示//利用landsat 7 ETM+遥感影像反演2012年研究区域内透明度var l7Imgs = [];//设置图像选择器，选择2012年云量小于5%的Landsat 7 ETM+遥感影像//按照加载的黄河口矢量图形进行裁剪var l7img = pie.ImageCollection("LE07/02/SR").filterDate("2012-01-01", "2012-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B3", "B4", "B2"]);var yearImg = l7img.mosaic();var image = yearImg.clip(hhk);var b2 = image.select("B2");var b3 = image.select("B3");var b4 = image.select("B4");b2 = b2.updateMask(b2.lte(43636).and(b2.gte(7273)))b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b2 = ((b2).multiply(0.0000275)).subtract(0.2);b3 = ((b3).multiply(0.0000275)).subtract(0.2);b4 = ((b4).multiply(0.0000275)).subtract(0.2);//计算透明度var ssd = (((((b4.divide(b3)).power(2)).multiply(46.625)).subtract((((b4.divide(b3)).power(3)).multiply(21.035)))).subtract((b4.divide(b3)).multiply(26.701))).add(5.766);//添加图像至图层Map.addLayer(ssd, vis1, year, false);//分别以year,ssdmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l7Imgs数列l7Imgs.push(yearImg);//利用landsat 8 OLI遥感影像反演2013-2021年研究区域内透明度var l8Imgs = [];//设置图像选择器，选择2013-2021年云量小于5%的Landsat 8 OLI遥感影像，并按照加载的黄河口矢量图形进行裁剪for (var year = 2013; year <= 2021; year++) {var l8img = pie.ImageCollection("LC08/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3", "B2"]);var yearImg = l8img.mosaic();var image = yearImg.clip(hhk);var b2 = image.select("B2");var b3 = image.select("B3");var b4 = image.select("B4");b2 = b2.updateMask(b2.lte(43636).and(b2.gte(7273)))b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b2 = (b2.multiply(0.0000275)).subtract(0.2);b3 = (b3.multiply(0.0000275)).subtract(0.2);b4 = (b4.multiply(0.0000275)).subtract(0.2);//计算透明度var ssd = (((((b4.divide(b3)).power(2)).multiply(46.625)).subtract((((b4.divide(b3)).power(3)).multiply(21.035)))).subtract((b4.divide(b3)).multiply(26.701))).add(5.766);//添加图像至图层Map.addLayer(ssd, vis1, year, false);//分别以year,ssdmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l5Imgs数列l8Imgs.push(yearImg);}//构建Landsat 5、Landsat 7、Landsat 8影像集合l5Imgs = pie.ImageCollection.fromImages(l5Imgs);l7Imgs = pie.ImageCollection.fromImages(l7Imgs);l8Imgs = pie.ImageCollection.fromImages(l8Imgs);//合并Landsat 5、Landsat 7和Landsat 8影像集，得到imageCollection lasvar las = l5Imgs.merge(l7Imgs);las = las.merge(l8Imgs);//定义年份和透明度均值数列为空集var dates = [];//根据影像集合 las 长度，分别以year和ssdmean索引将年份和透明度均值添加至dates和meanValues数据集var result = las.reduceColumns(pie.Reducer.toList(), ["year", "ssdmean"]).getInfo(function(msgInfo) {dates = msgInfo["list"]["year"];//以1984-2021年的黄河口透明度示意图在图层上循环展示Map.playLayersAnimation(dates, 1, 1, function(name, index) {label5 = label5.setValue(name);});});return;
};
var btn2 = ui.Button({label: "透明度",type: "success",onClick: clickBtn2,
});
//叶绿素
//1984-2021年间黄河口叶绿素浓度反演结果动态展示与平均浓度展示
function clickBtn3() {Map.removeUI(legend1);Map.removeUI(legend2);Map.removeUI(legend3);Map.addUI(legend3);Map.removeUI(label4);Map.removeUI(label5);Map.removeUI(label6);Map.addUI(label6);//利用landsat 5 TM遥感影像反演1984-2011年研究区域内叶绿素浓度//var imgKey = null;var l5Imgs = [];//设置图像选择器，选择1984-2011年云量小于5%的Landsat 5 TM遥感影像//按照加载的黄河口矢量图形进行裁剪for (var year = 1984; year <= 2011; year++) {var l5img = pie.ImageCollection("LT05/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3"]);var yearImg = l5img.mosaic();var image = yearImg.clip(hhk);var b3 = image.select("B3");var b4 = image.select("B4");b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b3 = ((b3).multiply(0.0000275)).subtract(0.2);b4 = ((b4).multiply(0.0000275)).subtract(0.2);//计算叶绿素浓度var chl = ((b4.divide(b3)).multiply(-6.69)).add(7.22);//清空图层if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像至图层Map.addLayer(chl, vis2, year, false);//分别以year,chlmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l5Imgs数列l5Imgs.push(yearImg);}//2012年黄河口叶绿素浓度反演结果动态展示与平均展示//利用landsat 7 ETM+遥感影像反演2012年研究区域内叶绿素浓度var l7Imgs = [];//设置图像选择器，选择2012年云量小于5%的Landsat 7 ETM+遥感影像//按照加载的黄河口矢量图形进行裁剪var l7img = pie.ImageCollection("LE07/02/SR").filterDate("2012-01-01", "2012-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3"]);var yearImg = l7img.mosaic();var image = yearImg.clip(hhk);var b3 = image.select("B3");var b4 = image.select("B4");b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b3 = b3.multiply(0.0000275).subtract(0.2);b4 = b4.multiply(0.0000275).subtract(0.2);//计算var chl = ((b4.divide(b3)).multiply(-6.69)).add(7.22);//添加图像至图层Map.addLayer(chl, vis2, year, false);//分别以year,chlmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l7Imgs数列l7Imgs.push(yearImg);//利用landsat 8 OLI遥感影像反演2013-2021年研究区域内叶绿素浓度var l8Imgs = [];//设置图像选择器，选择2013-2021年云量小于5%的Landsat 8 OLI遥感影像，并按照加载的黄河口矢量图形进行裁剪for (var year = 2013; year <= 2021; year++) {var l8img = pie.ImageCollection("LC08/02/SR").filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', 5)).select(["B4", "B3"]);var yearImg = l8img.mosaic();var image = yearImg.clip(hhk);var b3 = image.select("B3");var b4 = image.select("B4");b3 = b3.updateMask(b3.lte(43636).and(b3.gte(7273)))b4 = b4.updateMask(b4.lte(43636).and(b4.gte(7273)))b3 = b3.multiply(0.0000275).subtract(0.2);b4 = b4.multiply(0.0000275).subtract(0.2);//计算叶绿素浓度var chl = ((b4.divide(b3)).multiply(-6.69)).add(7.22);//添加图像至图层Map.addLayer(chl, vis2, year, false);//分别以year,chlmean为索引，设置yearImgyearImg = yearImg.set("year", year.toString());//将yearImg添加至l8Imgs数列l8Imgs.push(yearImg);}//构建Landsat 5、Landsat 7、Landsat 8影像集合l5Imgs = pie.ImageCollection.fromImages(l5Imgs);l7Imgs = pie.ImageCollection.fromImages(l7Imgs);l8Imgs = pie.ImageCollection.fromImages(l8Imgs);//合并Landsat 5和Landsat 8影像集，得到imageCollection lasvar las = l5Imgs.merge(l7Imgs);las = las.merge(l8Imgs);//定义年份和叶绿素浓度均值数列为空集var dates = [];//根据影像集合 las 长度，分别以year和sscmean索引将年份和叶绿素浓度均值添加至dates和meanValues数据集var result = las.reduceColumns(pie.Reducer.toList(), ["year", "chlmean"]).getInfo(function(msgInfo) {dates = msgInfo["list"]["year"];//以1984-2021年的黄河口叶绿素浓度示意图在图层上循环展示Map.playLayersAnimation(dates, 1, 1, function(name, index) {label6 = label6.setValue(name);});});return;
};var btn3 = ui.Button({label: "叶绿素a",type: "success",onClick: clickBtn3,
});var panel2 = ui.Panel({widgets: [btn1, btn2, btn3],style: {width: "300px",height: "140px",backgroundColor: "white"}
});function clickBtn4() {ui.root.add(panel2);
}var btn4 = ui.Button({label: "动图展示",type: "success",onClick: clickBtn4,
});var panel = ui.Panel({widgets: [label1,btn4,label3,radio1,label2],style: {width: "300px",height: "300px",backgroundColor: "white"}
});
ui.root.add(panel);//遥感影像数据查询
//云量
var selectCloud = null;function funSlider(value) {selectCloud = value;
}
var slider = ui.Slider({min: 0,max: 100,value: 0,step: 5,onChange: funSlider,
});
slider.setStyle({ width: "200px", top: "20px" });
var sliderName = ui.Label("云量：");
var sliderPanel = ui.Panel({widgets: [sliderName, slider],style: {width: "300px",height: "100px",backgroundColor: "#fff"},layout: ui.Layout.flow("horizontal")
});var selectYear = 1984;
// TextBox
function inputSDate(value) {selectYear = value;
}
var textBox = ui.TextBox({placeholder: "请输入年份",value: selectYear,onChange: inputSDate,disabled: false
})
var textboxName = ui.Label("年份：");
var textboxPanel = ui.Panel({widgets: [textboxName, textBox],layout: ui.Layout.flow("horizontal")
});var selectTag = null;
// select
function changeSelect(value) {switch (value) {case "Landsat-5-TM":selectTag = "LT05/02/SR";break;case "Landsat-7-ETM+":selectTag = "LE07/02/SR";break;case "Landsat-8-OLI":selectTag = "LC08/02/SR";break;}
}
var select = ui.Select({items: ['Landsat-5-TM', 'Landsat-7-ETM+', 'Landsat-8-OLI'],placeholder: "请选择",value: selectTag,multiple: false,onChange: changeSelect
})
var selectName = ui.Label("数据源：");
var selectPanel = ui.Panel({widgets: [selectName, select],layout: ui.Layout.flow("horizontal")
});
var biaoti = ui.Label("原始影像查询");
print(biaoti);
print(selectPanel);
print(textboxPanel);
print(sliderPanel);function showImg(tag, year, cloud) {var laimg = pie.ImageCollection(tag).filterDate(year + "-01-01", year + "-12-31").filterBounds(hhk.bounds()).filter(pie.Filter.lte('cloud_cover', cloud)).select(["B1", "B2", "B3", "B4", "B5", "B6", "B7"]);print(laimg);var yearImg = laimg.mosaic();var image = yearImg.clip(hhk);if (imgKey != null) {Map.removeLayer(imgKey);}//添加图像imgKey = Map.addLayer(image, { min: 0, max: 30000 }, year);
};// Button
function clickBtn6() {print("点击按钮，选择的参数是：", selectTag + "：" + selectYear + "年-云量" + selectCloud + "%");showImg(selectTag, selectYear, selectCloud);
}
var btn5 = ui.Button({label: "取消",style: { left: "50px" }
});
var btn6 = ui.Button({label: "确定",type: "success",onClick: clickBtn6,style: { left: "50px" }
});
var btnPanel = ui.Panel({widgets: [btn5, btn6],layout: ui.Layout.flow("horizontal")
});
print(btnPanel);

 

本文标签： Pie