• PIE-Engine APP:凉山州火灾高发地异常度分析系统

    这里我们利用凉山州作为火灾边界，同样可以切换我们所需要的区域，可以切换省级代码来进行，需要手动修改。这里我们用到的swith 和case的案例条件判断分析，

    语法

    1. switch(n)
    2. {
    3.     case 1:
    4.         执行代码块 1
    5.         break;
    6.     case 2:
    7.         执行代码块 2
    8.         break;
    9.     default:
    10.         与 case 1 和 case 2 不同时执行的代码
    11. }

    实例

    显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：

    1. var d=new Date().getDay(); 
    2. switch (d) 
    3. { 
    4.   case 0:x="今天是星期日"; 
    5.   break; 
    6.   case 1:x="今天是星期一"; 
    7.   break; 
    8.   case 2:x="今天是星期二"; 
    9.   break; 
    10.   case 3:x="今天是星期三"; 
    11.   break; 
    12.   case 4:x="今天是星期四"; 
    13.   break; 
    14.   case 5:x="今天是星期五"; 
    15.   break; 
    16.   case 6:x="今天是星期六"; 
    17.   break; 
    18. }
    '
    运行

    这里面所需的函数：

    ui.DateSelect(type,placeholder,value,onChange,disabled,style)

    时间选择。

    方法参数：

    - ui(ui)

    调用者：ui对象。

    - type(String)

    日期选择类型，可选值为date|daterange|year|month|datetime|datetimerange。

    - placeholder(String)

    占位符内容。

    - value(String|List)

    选择具体的日期，格式为：yyyy-MM-dd|yyyy-MM-dd HH:mm:ss

    - onChange(Function)

    更新选择日期触发事件。

    - disabled(Boolean)

    是否禁用日期组件。

    - style(Object)

    组件样式。

    返回值：ui.DateSelect

    这里同样可以导出影像：

    image(image,description,assetId,pyramidingPolicy,dimensions,region,scale,crs,crsTransform,maxPixels)

    导出影像到个人存储空间。

    方法参数：

    - export(Export)

    Export方法。

    - image(Image)

    要导出的影像。

    - description(String, optional)

    导出影像任务的描述。

    - assetId(String, optional)

    导出影像的存储路径。

    - pyramidingPolicy(Object, optional)

    金字塔规则。

    - dimensions(Int, optional)

    维度。

    - region(Geometry, optional)

    导出影像的范围。

    - scale(Float, optional)

    缩放比例，目前默认都是1。

    - crs(Projection, optional)

    投影的基准坐标参考系，暂指定为EPSG：4326或EPSG：3857参考系。

    - crsTransform(List, optional)

    投影坐标系变换值的列表。

    - maxPixels(Long, optional)

    要导出的最大像素数。

    返回值：null

    这个代码的还有提升的结果，如果要发布成为APP，那么就不太容易改变我们的研究区，因为在APP中没有code editor的界面，同样此APP的影像导出结果如果要下载，并没有出现在面板上。另外，对于chart图表的加载并没有加载到MAP上，如果转化为APP的化可能结果都无法显示，所以这个程序只能在code Editor界面中的控制台查看

    代码：

    1. /**
    2.  * @Name    :   凉山州火灾高发地异常度分析系统
    3.  * @Author  :   西南大学天生一队
    4.  * @Source  :   航天宏图第四届 “航天宏图杯”PIE软件二次开发大赛云开发组三等奖获奖作品
    5.  */
    6.  
    7. //定义程序运行过程需要用到的变量
    8. var date = ["2018-03-20", "2018-04-20"]; //开始日期和结束日期
    9. var mapID = null; //当前图层ID
    10. var maplegend = null; //当前图层图例ID
    11. var roiID = null; //当前研究范围ID
    12. var selectTag = "LST"; //选择的计算项目
    13. var areaCode = "0"; //行政区划代码，默认为0
    14. var roi = null; //研究区，在程序运行时动态变化
    15. var default_roi = null; //默认研究区，凉山州
    16. var sec_year = 2018; //要显示TVDI变化图的年份
    17. var animationlayerID = []; //如果显示了动态图，则用此数组记录动态图的图层ID
    18. var currentImg = null; //当前图层所对应的影像，导出时使用
    19. var exportScale = 500; //导出分辨率
    20. //获得凉山州矢量
    21. roi = pie
    22.   .FeatureCollection("NGCC/CHINA_CITY_BOUNDARY")
    23.   .filter(pie.Filter.eq("name", "凉山彝族自治州"))
    24.   .getAt(0)
    25.   .geometry();
    26. default_roi = roi; //将默认研究区设置为凉山彝族自治州
    27. //设置渲染样式（默认拉伸渲染，参数为最小值为最大值）
    28. function setVis(minvalue, maxvalue) {
    29.   var newVis = {
    30.     min: minvalue,
    31.     max: maxvalue,
    32.     palette: [
    33.       "217303",
    34.       "268303",
    35.       "2a9203",
    36.       "2fa203",
    37.       "33b203",
    38.       "37c203",
    39.       "3bd203",
    40.       "40e203",
    41.       "44f203",
    42.       "4bfc09",
    43.       "56fd18",
    44.       "6dfe37",
    45.       "79fe47",
    46.       "8cff05",
    47.       "98ff04",
    48.       "a5fe04",
    49.       "b1fe03",
    50.       "befe02",
    51.       "cbfe02",
    52.       "d7fd02",
    53.       "e3fc02",
    54.       "effb02",
    55.       "faf802",
    56.       "f9eb02",
    57.       "f7dd03",
    58.       "f6cf03",
    59.       "f5c203",
    60.       "f4b503",
    61.       "f3a803",
    62.       "f29b04",
    63.       "f18e04",
    64.       "f08104",
    65.       "ef7404",
    66.       "ee6804",
    67.       "ed5b05",
    68.       "ec4f05",
    69.       "eb4305",
    70.       "e93705",
    71.       "e82b05",
    72.       "e72006",
    73.       "e61406",
    74.       "e50906",
    75.     ],
    76.   };
    77.   return newVis;
    78. }
    79.  
    80. //按顺序输入影像集，起始时间、结束时间，要提取的波段名，研究区矢量【仅限单个波段提取】
    81. function loadCol(nameCol, start, end, bandname, roi) {
    82.   var rCol = pie
    83.     .ImageCollection(nameCol)
    84.     .filterDate(start, end)
    85.     .filterBounds(roi)
    86.     .select(bandname)
    87.     .mean()
    88.     .clip(roi);
    89.   return rCol;
    90. }
    91. //更改行政区划后调用的函数
    92. function getROI(code) {
    93.   var new_roi = null;
    94.   if (code !== 0) {
    95.     var fCol = pie.FeatureCollection("NGCC/CHINA_PROVINCE_BOUNDARY");
    96.     new_roi = fCol
    97.       .filter(pie.Filter.eq("code", parseInt(code)))
    98.       .first()
    99.       .geometry();
    100.   } else {
    101.     new_roi = default_roi;
    102.   }
    103.   return new_roi;
    104. }
    105. //下载landsat8影像
    106. function l8Col_load(start, end) {
    107.   var l8Col = pie
    108.     .ImageCollection("LC08/01/T1")
    109.     .filterDate(start, end)
    110.     .select(["B2", "B3", "B4", "B5", "B6", "BQA"])
    111.     .filterBounds(roi)
    112.     .map(function (image) {
    113.       var qa = image.select("BQA");
    114.       var cloudMask = qa.bitwiseAnd(1 << 3).eq(0);
    115.       return image.updateMask(cloudMask);
    116.     });
    117.   return l8Col;
    118. }
    119. //定义Landsat8不同指数计算方式
    120. var landsat8 = {
    121.   //NDWI: (B03 - B05)/(B03 + B05)
    122.   NDWI: function (image) {
    123.     var b3 = image.select("B3");
    124.     var b5 = image.select("B5");
    125.     var ndvi = b3.subtract(b5).divide(b3.add(b5));
    126.     return ndvi.rename("NDVI");
    127.   },
    128.   //MNDWI: (G - SWIR)/(G + SWIR)
    129.   MNDWI: function (image) {
    130.     var b3 = image.select("B3");
    131.     var b6 = image.select("B6");
    132.     var ndvi = b3.subtract(b6).divide(b3.add(b6));
    133.     return ndvi.rename("MNDWI");
    134.   },
    135.   //NDVI: (B05 - B04)/(B05 + B04)
    136.   NDVI: function (image) {
    137.     var b5 = image.select("B5");
    138.     var b4 = image.select("B4");
    139.     var ndvi = b5.subtract(b4).divide(b5.add(b4));
    140.     return ndvi.rename("NDVI");
    141.   },
    142.   //EVI: 2.5*(B05 - B04) / (B05 + 6*B04 - 7.5*B02 + 1)
    143.   EVI: function (image) {
    144.     var nir = image.select("B5").divide(10000);
    145.     var red = image.select("B4").divide(10000);
    146.     var blue = image.select("B2").divide(10000);
    147.     var evi = nir
    148.       .subtract(red)
    149.       .multiply(2.5)
    150.       .divide(nir.add(red.multiply(6)).subtract(blue.multiply(7.5)).add(1));
    151.     return evi.rename("EVI");
    152.   },
    153. };
    154. //点击“确定”按钮后调用的计算函数，用于计算选择的指标
    155. function calcuate(roi, startDate, endDate, tag) {
    156.   //影像集合
    157.   var l8Col = pie.ImageCollection("LC08/01/T1");
    158.   //通过日期过滤影像集合，并计算
    159.   l8Col = l8Col
    160.     .filterDate(startDate, endDate)
    161.     .select(["B2", "B3", "B4", "B5", "B6", "BQA"])
    162.     .filterBounds(roi)
    163.     .map(function (image) {
    164.       var qa = image.select("BQA");
    165.       var cloudMask = qa.bitwiseAnd(1 << 4).eq(0);
    166.       return image.updateMask(cloudMask);
    167.     });
    168.   var image = null;
    169.   var vis = null;
    170.   switch (tag) {
    171.     case "LST":
    172.       image = loadCol("USGS/MOD11A1/006", date[0], date[1], "LST_Day_1km", roi)
    173.         .multiply(0.02)
    174.         .subtract(273.15);
    175.       vis = setVis(0, 40);
    176.       addLegend("地表温度(°C)", [10, 20, 30, 40]);
    177.       break;
    178.     case "NDVI":
    179.       image = l8Col.map(landsat8.NDVI).mean().clip(roi);
    180.       vis = setVis(-0.2, 0.8);
    181.       addLegend("NDVI Value", ["0", "0.6"]);
    182.       break;
    183.     case "NDWI":
    184.       image = l8Col.map(landsat8.NDWI).mean().clip(roi);
    185.       vis = setVis(-1, 0.3);
    186.       addLegend("NDWI Value", ["-0.8", "0.1"]);
    187.       break;
    188.     case "MNDWI":
    189.       image = l8Col.map(landsat8.MNDWI).mean().clip(roi);
    190.       vis = setVis(-1, 0.3);
    191.       addLegend("MNDWI Value", ["-0.8", "0.1"]);
    192.       break;
    193.     case "EVI":
    194.       image = l8Col.map(landsat8.EVI).mean().clip(roi);
    195.       vis = setVis(-0.2, 0.8);
    196.       addLegend("EVI Value", ["0", "0.6"]);
    197.       break;
    198.     case "TVDI": //调用TVDI数据产品
    199.       image = loadCol("BNU/GLOBAL_1KM_TVDI", date[0], date[1], "B1", roi);
    200.       image = image.divide(10000);
    201.       vis = setVis(0, 1);
    202.       addLegend("TVDI Value(0~1)", ["0.25", "0.75"]);
    203.       break;
    204.     case "火点": //调用MODIS数据产品
    205.       image = loadCol("USGS/MOD14A2/006", date[0], date[1], "FireMask", roi);
    206.       vis = setVis(3, 8);
    207.       addLegend("置信等级", ["<3", 4, 5, 6, 7, 8]);
    208.       break;
    209.   }
    210.   if (mapID !== null) {
    211.     Map.removeLayer(mapID); //如果有图层ID则将其移除，保证只有1个图层显示
    212.   }
    213.   mapID = Map.addLayer(image, vis, tag);
    214.   currentImg = image;
    215. }
    216. //添加图例样式的函数，作用在于计算的项目发生改变时动态调整图例,参数：1）titile:string;2）labels:object[]
    217. function addLegend(title, labels) {
    218.   var data = {
    219.     title: title,
    220.     colors: [
    221.       "#217303",
    222.       "#268303",
    223.       "#2a9203",
    224.       "#2fa203",
    225.       "#33b203",
    226.       "#37c203",
    227.       "#3bd203",
    228.       "#40e203",
    229.       "#44f203",
    230.       "#4bfc09",
    231.       "#56fd18",
    232.       "#6dfe37",
    233.       "#79fe47",
    234.       "#8cff05",
    235.       "#98ff04",
    236.       "#a5fe04",
    237.       "#b1fe03",
    238.       "#befe02",
    239.       "#cbfe02",
    240.       "#d7fd02",
    241.       "#e3fc02",
    242.       "#effb02",
    243.       "#faf802",
    244.       "#f9eb02",
    245.       "#f7dd03",
    246.       "#f6cf03",
    247.       "#f5c203",
    248.       "#f4b503",
    249.       "#f3a803",
    250.       "#f29b04",
    251.       "#f18e04",
    252.       "#f08104",
    253.       "#ef7404",
    254.       "#ee6804",
    255.       "#ed5b05",
    256.       "#ec4f05",
    257.       "#eb4305",
    258.       "#e93705",
    259.       "#e82b05",
    260.       "#e72006",
    261.       "#e61406",
    262.       "#e50906",
    263.     ],
    264.     labels: labels,
    265.     step: 30,
    266.   };
    267.   var style = {
    268.     right: "150px",
    269.     bottom: "10px",
    270.     height: "70px",
    271.     width: "350px",
    272.   };
    273.   if (maplegend !== null) {
    274.     Map.removeUI(maplegend); //如果存在图例则将其移除，保证只有一个图例
    275.   }
    276.   maplegend = ui.Legend(data, style);
    277.   Map.addUI(maplegend);
    278. }
    279. //导出当前图层所对应的影像
    280. function exportCurrentMap(img, description, roi, scale) {
    281.   if (currentImg !== null && animationlayerID.length == 0) {
    282.     Export.image({
    283.       image: img,
    284.       description: description,
    285.       region: roi,
    286.       scale: scale,
    287.     });
    288.     print("导出成功！");
    289.   } else {
    290.     print("当前图层为空或图层不唯一！");
    291.   }
    292. }
    293. //根据年份计算每个月的TVDI,并显示折线图。TVDI值越大，土壤湿度越低，反之土壤湿度越高
    294. function calculateTVDI(start, end) {
    295.   var img = pie
    296.     .ImageCollection("BNU/GLOBAL_1KM_TVDI")
    297.     .filterDate(start, end)
    298.     .select("B1")
    299.     .filterBounds(roi)
    300.     .mean()
    301.     .clip(roi)
    302.     .divide(10000);
    303.   return img;
    304. }
    305. function showTVDI(year) {
    306.   var month = [
    307.     "-01",
    308.     "-02",
    309.     "-03",
    310.     "-04",
    311.     "-05",
    312.     "-06",
    313.     "-07",
    314.     "-08",
    315.     "-09",
    316.     "-10",
    317.     "-11",
    318.     "-12",
    319.   ];
    320.   var day = [
    321.     "-31",
    322.     "-28",
    323.     "-31",
    324.     "-30",
    325.     "-31",
    326.     "-30",
    327.     "-31",
    328.     "-31",
    329.     "-30",
    330.     "-31",
    331.     "-30",
    332.     "-31",
    333.   ];
    334.   var data = [];
    335.   for (var i = 0; i < 12; i++) {
    336.     var t1 = calculateTVDI(year + month[i] + "-01", year + month[i] + day[i]);
    337.     var t2 = t1.reduceRegion(pie.Reducer.mean(), roi, 1000);
    338.     data.push(t2);
    339.   }
    340.   var line_a = {
    341.     title: year + "年TVDI变化",
    342.     legend: ["TVDI"],
    343.     xAxisName: "月份",
    344.     yAxisName: "TVDI值",
    345.     chartType: "line",
    346.     yMin: 0,
    347.     yMax: 1,
    348.     smooth: true,
    349.   };
    350.  
    351.   // 显示折线图
    352.   var mark = [
    353.     "01",
    354.     "02",
    355.     "03",
    356.     "04",
    357.     "05",
    358.     "06",
    359.     "07",
    360.     "08",
    361.     "09",
    362.     "10",
    363.     "11",
    364.     "12",
    365.   ];
    366.   ChartImage(data, mark, line_a);
    367. }
    368. //显示某年动态图的函数
    369. function showAnimation(year) {
    370.   var month = [
    371.     "-01",
    372.     "-02",
    373.     "-03",
    374.     "-04",
    375.     "-05",
    376.     "-06",
    377.     "-07",
    378.     "-08",
    379.     "-09",
    380.     "-10",
    381.     "-11",
    382.     "-12",
    383.   ];
    384.   var day = [
    385.     "-31",
    386.     "-28",
    387.     "-31",
    388.     "-30",
    389.     "-31",
    390.     "-30",
    391.     "-31",
    392.     "-31",
    393.     "-30",
    394.     "-31",
    395.     "-30",
    396.     "-31",
    397.   ];
    398.   var data = [];
    399.   if (mapID !== null) {
    400.     Map.removeLayer(mapID);
    401.   }
    402.   if (animationlayerID.length > 0) {
    403.     for (var i = 0; i < animationlayerID.length; i++) {
    404.       Map.removeLayer(animationlayerID[i]);
    405.     }
    406.     animationlayerID = [];
    407.   }
    408.   switch (selectTag) {
    409.     case "TVDI":
    410.       for (var i = 0; i < 12; i++) {
    411.         var img = null;
    412.         var start = year + month[i] + "-01";
    413.         var end = year + month[i] + day[i];
    414.         img = calculateTVDI(start, end);
    415.         var map = Map.addLayer(
    416.           img,
    417.           setVis(0, 1),
    418.           year + month[i] + "TVDI",
    419.           false
    420.         );
    421.         animationlayerID.push(map);
    422.         data.push(year + month[i] + "TVDI");
    423.       }
    424.       addLegend("TVDI Value(0~1)", ["0.25", "0.75"]);
    425.       break;
    426.     case "LST":
    427.       for (var i = 0; i < 12; i++) {
    428.         var img = null;
    429.         var start = year + month[i] + "-01";
    430.         var end = year + month[i] + day[i];
    431.         img = loadCol("USGS/MOD11A1/006", start, end, "LST_Day_1km", roi)
    432.           .multiply(0.02)
    433.           .subtract(273.15);
    434.         var map = Map.addLayer(
    435.           img,
    436.           setVis(0, 40),
    437.           year + month[i] + "LST",
    438.           false
    439.         );
    440.         animationlayerID.push(map);
    441.         data.push(year + month[i] + "LST");
    442.       }
    443.       addLegend("地表温度(°C)", [10, 20, 30, 40]);
    444.       break;
    445.     case "火点":
    446.       for (var i = 0; i < 12; i++) {
    447.         var img = null;
    448.         var start = year + month[i] + "-01";
    449.         var end = year + month[i] + day[i];
    450.         img = loadCol("USGS/MOD14A2/006", start, end, "FireMask", roi);
    451.         var map = Map.addLayer(
    452.           img,
    453.           setVis(3, 8),
    454.           year + month[i] + "火点",
    455.           false
    456.         );
    457.         animationlayerID.push(map);
    458.         data.push(year + month[i] + "火点");
    459.       }
    460.       addLegend("置信等级", ["<3", 4, 5, 6, 7, 8]);
    461.       break;
    462.     case "NDVI":
    463.       for (var i = 0; i < 12; i++) {
    464.         var img = null;
    465.         var start = year + month[i] + "-01";
    466.         var end = year + month[i] + day[i];
    467.         img = l8Col_load(start, end).map(landsat8.NDVI).mean().clip(roi);
    468.         var map = Map.addLayer(
    469.           img,
    470.           setVis(-0.2, 0.8),
    471.           year + month[i] + "NDVI",
    472.           false
    473.         );
    474.         animationlayerID.push(map);
    475.         data.push(year + month[i] + "NDVI");
    476.       }
    477.       addLegend("NDVI Value", ["0", "0.6"]);
    478.       break;
    479.     case "NDWI":
    480.       for (var i = 0; i < 12; i++) {
    481.         var img = null;
    482.         var start = year + month[i] + "-01";
    483.         var end = year + month[i] + day[i];
    484.         img = l8Col_load(start, end).map(landsat8.NDWI).mean().clip(roi);
    485.         var map = Map.addLayer(
    486.           img,
    487.           setVis(-1, 0.3),
    488.           year + month[i] + "NDWI",
    489.           false
    490.         );
    491.         animationlayerID.push(map);
    492.         data.push(year + month[i] + "NDWI");
    493.       }
    494.       addLegend("NDWI Value", ["-0.8", "0.1"]);
    495.       break;
    496.     case "MNDWI":
    497.       for (var i = 0; i < 12; i++) {
    498.         var img = null;
    499.         var start = year + month[i] + "-01";
    500.         var end = year + month[i] + day[i];
    501.         img = l8Col_load(start, end).map(landsat8.MNDWI).mean().clip(roi);
    502.         var map = Map.addLayer(
    503.           img,
    504.           setVis(-1, 0.3),
    505.           year + month[i] + "MNDWI",
    506.           false
    507.         );
    508.         animationlayerID.push(map);
    509.         data.push(year + month[i] + "MNDWI");
    510.       }
    511.       addLegend("MNDWI Value", ["-0.8", "0.1"]);
    512.       break;
    513.     case "EVI":
    514.       for (var i = 0; i < 12; i++) {
    515.         var img = null;
    516.         var start = year + month[i] + "-01";
    517.         var end = year + month[i] + day[i];
    518.         img = l8Col_load(start, end).map(landsat8.EVI).mean().clip(roi);
    519.         var map = Map.addLayer(
    520.           img,
    521.           setVis(-0.2, 0.8),
    522.           year + month[i] + "EVI",
    523.           false
    524.         );
    525.         animationlayerID.push(map);
    526.         data.push(year + month[i] + "EVI");
    527.       }
    528.       addLegend("EVI Value", ["0", "0.6"]);
    529.       break;
    530.   }
    531.   Map.playLayersAnimation(data, 1, -1); //动图间隔时间1秒，无限次循环。
    532. }
    533.  
    534. Map.centerObject(roi, 5); //将地图中心转到研究范围
    535. /* -------------------------以下代码是控件的布局以及事件的绑定等参数设置----------------------------- */
    536. function funDateSelect(value) {
    537.   date[0] = value[0];
    538.   date[1] = value[1];
    539. }
    540. var dateSelect = ui.DateSelect({
    541.   type: "daterange",
    542.   placeholder: "请输入数值",
    543.   value: ["2018-03-20", "2018-04-20"],
    544.   onChange: funDateSelect,
    545.   disabled: false,
    546. });
    547. function changeSelect(value) {
    548.   selectTag = value;
    549. }
    550. var select1 = ui.Select({
    551.   items: ["LST", "TVDI", "火点", "NDVI", "NDWI", "MNDWI", "EVI"],
    552.   placeholder: "请选择",
    553.   value: selectTag,
    554.   multiple: false,
    555.   onChange: changeSelect,
    556. });
    557. var selectIndex = ui.Label("选择项目：");
    558. var selectPanel = ui.Panel({
    559.   widgets: [selectIndex, select1],
    560.   layout: ui.Layout.flow("horizontal"),
    561. });
    562. function inputArea(value) {
    563.   areaCode = value;
    564.   roi = getROI(areaCode);
    565. }
    566. var textBox3 = ui.TextBox({
    567.   placeholder: "请输入行政区划编码",
    568.   value: areaCode,
    569.   onChange: inputArea,
    570.   disabled: false,
    571. });
    572. var textboxName3 = ui.Label("更改行政区划(省级)：");
    573. var txtPanel1 = ui.Panel({
    574.   widgets: [textboxName3, textBox3],
    575.   layout: ui.Layout.flow("horizontal"),
    576. });
    577. var selecDateLabel = ui.Label("选择日期范围：");
    578. var txtPanel2 = ui.Panel({
    579.   widgets: [selecDateLabel, dateSelect],
    580.   layout: ui.Layout.flow("horizontal"),
    581. });
    582. //点击“确定”按钮调用的函数
    583. function click_BtnOK() {
    584.   print("当前计算项目：", selectTag + "," + date[0] + "~" + date[1]);
    585.   //调用计算函数计算选择的指标添加到地图
    586.   calcuate(roi, date[0], date[1], selectTag);
    587.   if (animationlayerID.length > 0) {
    588.     for (var i = 0; i < animationlayerID.length; i++) {
    589.       Map.removeLayer(animationlayerID[i]);
    590.     }
    591.     animationlayerID = [];
    592.   }
    593. }
    594. var btnOK = ui.Button({
    595.   label: "确定",
    596.   type: "success",
    597.   onClick: click_BtnOK,
    598.   style: { left: "50px" },
    599. });
    600. function click_btnExport() {
    601.   exportCurrentMap(
    602.     currentImg,
    603.     date[0] + "-" + date[1] + selectTag,
    604.     roi,
    605.     exportScale
    606.   );
    607. }
    608. var btnExport = ui.Button({
    609.   label: "导出当前图层",
    610.   type: "success",
    611.   onClick: click_btnExport,
    612.   style: { left: "50px" },
    613. });
    614. function changeScale(value) {
    615.   exportScale = value;
    616. }
    617. var select2 = ui.Select({
    618.   items: [30, 50, 100, 200, 500, 1000, 2000],
    619.   placeholder: "请选择",
    620.   value: exportScale,
    621.   multiple: false,
    622.   onChange: changeScale,
    623. });
    624. var selectPanel2 = ui.Panel({
    625.   widgets: [ui.Label("选择导出分辨率（米）："), select2],
    626.   layout: ui.Layout.flow("horizontal"),
    627. });
    628. function click_btnMonthly() {
    629.   showAnimation(sec_year);
    630. }
    631. var btnMonthly = ui.Button({
    632.   label: "显示当前指标每月动态图",
    633.   type: "success",
    634.   onClick: click_btnMonthly,
    635.   style: { left: "10px" },
    636. });
    637. function click_showBtn() {
    638.   //画出选择的年份TVDI变化图
    639.   showTVDI(sec_year);
    640. }
    641. var btnShow = ui.Button({
    642.   label: "显示TVDI变化折线图",
    643.   type: "success",
    644.   onClick: click_showBtn,
    645.   style: { left: "10px" },
    646. });
    647. var btnPanel1 = ui.Panel({
    648.   widgets: [btnOK, btnExport],
    649.   layout: ui.Layout.flow("horizontal"),
    650. });
    651. function inputYear(value) {
    652.   sec_year = value;
    653. }
    654. var txtBoxyear = ui.TextBox({
    655.   placeholder: "请输入年份",
    656.   value: sec_year,
    657.   onChange: inputYear,
    658.   disabled: false,
    659. });
    660. var labelyear = ui.Label("输入年份：");
    661. var txtPanel3 = ui.Panel({
    662.   widgets: [labelyear, txtBoxyear],
    663.   layout: ui.Layout.flow("horizontal"),
    664. });
    665. var btnPanel2 = ui.Panel({
    666.   widgets: [btnShow, btnMonthly],
    667.   layout: ui.Layout.flow("horizontal"),
    668. });
    669. var panel = ui.Panel({
    670.   widgets: [
    671.     ui.Label("凉山彝族自治州火灾异常监测", { "font-size": "18px" }),
    672.     ui.Label(
    673.       "默认区域为凉山彝族自治州，若想更换区域请输入行政区代码(省级),若输入0则为默认区域",
    674.       { "font-size": "18px" }
    675.     ),
    676.     selectPanel,
    677.     txtPanel1,
    678.     txtPanel2,
    679.     btnPanel1,
    680.     selectPanel2,
    681.     txtPanel3,
    682.     btnPanel2,
    683.   ],
    684.   style: {
    685.     width: "400px",
    686.     height: "500px",
    687.     backgroundColor: "#fff",
    688.   },
    689. });
    690. ui.root.add(panel);
    691. /* 以上是网页上的整体框架布局*/

    结果： 

     

     

  • 相关阅读:
    中科大遭钓鱼邮件攻击了？3500名师生中招
    Docker 镜像库国内加速的几种方法
    java 20 Stream流
    【华为OD机考B卷 | 100分】整数编码（JAVA题解——也许是全网最详）
    Acise : A CAx Industrial Software Ecology
    骑行上下坡，如何分配重心？让你的骑行更稳定、更安全
    python究竟可以用来做些什么
    emqx 启动正常，但是1883端口无法telnet，emqx无法正常工作
    Python 搭建虚拟环境
    vue+element plus 使用table组件，清空用户的选择项
  • 原文地址：https://blog.csdn.net/qq_31988139/article/details/127035792