PIE-Engine APP:1984-2021年黄河口及其附近海域的悬浮泥沙、透明度和叶绿素a的结果-阿里云开发者社区

本次教程我们主要是展示一个之前航天宏图竞赛的结果，主题是将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为索引，设置yearImg
        yearImg = 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为索引，设置yearImg
    yearImg = 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为索引，设置yearImg
        yearImg = 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 las
    var 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为索引，设置yearImg
        yearImg = 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为索引，设置yearImg
    yearImg = 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为索引，设置yearImg
        yearImg = 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 las
    var 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为索引，设置yearImg
        yearImg = 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为索引，设置yearImg
    yearImg = 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为索引，设置yearImg
        yearImg = 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 las
    var 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-Engine APP:1984-2021年黄河口及其附近海域的悬浮泥沙、透明度和叶绿素a的结果

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

PIE-Engine APP:1984-2021年黄河口及其附近海域的悬浮泥沙、透明度和叶绿素a的结果

热门文章

最新文章

相关课程

相关电子书

相关实验场景
