C30 基础应用界面和应用程序(Part 6)

本节导读

演示如何使用JavaScript和Python设计和发布地球引擎应用程序。介绍地球引擎用户界面JavaScript API和geemap Python包。在完成本节后,你将能够发布一个带有拆分面板地图的地球引擎应用程序,用于可视化土地覆盖变化。

主要内容:

  • 使用JavaScript为地球引擎应用程序设计一个用户界面。
  • 发布一个地球引擎应用程序,用于可视化土地覆盖变化。
  • 使用Python和geemap开发一个地球引擎应用程序。
  • 使用本地计算机作为web服务器部署地球引擎应用程序。
  • 使用Python和免费云平台发布地球引擎应用程序。
  • 使用Anaconda/Miniconda创建conda环境。
  • 安装Python包和使用Jupyter Notebook。
  • 将更改提交到GitHub存储库。

1. 使用JavaScript构建一个GEE APP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
//==========================step 1 ====================================================
// Get an NLCD image by year.
var getNLCD = function(year) {
    // Import the NLCD collection.
    var dataset = ee.ImageCollection( 'USGS/NLCD_RELEASES/2019_REL/NLCD');
    // Filter the collection by year.
    var nlcd = dataset.filter(ee.Filter.eq('system:index', year)) .first();
    // Select the land cover band.
    var landcover = nlcd.select('landcover');
    return ui.Map.Layer(landcover, {}, year);
};
 
// Create a dictionary with each year as the key
// and its corresponding NLCD image layer as the value.
var images = {
    '2001': getNLCD('2001'),
    '2004': getNLCD('2004'),
    '2006': getNLCD('2006'),
    '2008': getNLCD('2008'),
    '2011': getNLCD('2011'),
    '2013': getNLCD('2013'),
    '2016': getNLCD('2016'),
    '2019': getNLCD('2019'),
};
 
//==========================step 2====================================================
// 创建左边的地图,并让它显示第一层。
var leftMap = ui.Map();
leftMap.setControlVisibility(false);
var leftSelector = addLayerSelector(leftMap, 0, 'top-left');
// 创建右边的地图,并让它显示最后一层。
var rightMap = ui.Map();
rightMap.setControlVisibility(true);
var rightSelector = addLayerSelector(rightMap, 7, 'top-right');
 
 
 
//为给定的地图添加一个图层选择小部件,允许用户更改在关联地图中显示的图像。
function addLayerSelector(mapToChange, defaultValue, position) {
    var label = ui.Label('Select a year:');
     
    // This function changes the given map to show the selected image.
    function updateMap(selection) {
        mapToChange.layers().set(0, images[selection]);
    }
    // Configure a selection dropdown to allow the user to choose
    // between images, and set the map to update when a user makes a selection.
    var select = ui.Select({
        items: Object.keys(images),
        onChange: updateMap
    });
    select.setValue(Object.keys(images)[defaultValue], true);
     
    var controlPanel =
        ui.Panel({
            widgets: [label, select],
            style: {
                position: position
            }
        });
    mapToChange.add(controlPanel);
}
 
//==========================step 3====================================================
//添加图例
// 设置图例标题。
var title = 'NLCD土地覆盖分类';
// 设置图例位置。
var position = 'bottom-right';
// Define a dictionary that will be used to make a legend
var dict = {
    'names': [
        '11 Open Water',
        '12 Perennial Ice/Snow',
        '21 Developed, Open Space',
        '22 Developed, Low Intensity',
        '23 Developed, Medium Intensity',
        '24 Developed, High Intensity',
        '31 Barren Land (Rock/Sand/Clay)',
        '41 Deciduous Forest',
        '42 Evergreen Forest',
        '43 Mixed Forest',
        '51 Dwarf Scrub',
        '52 Shrub/Scrub',
        '71 Grassland/Herbaceous',
        '72 Sedge/Herbaceous',
        '73 Lichens',
        '74 Moss',
        '81 Pasture/Hay',
        '82 Cultivated Crops',
        '90 Woody Wetlands',
        '95 Emergent Herbaceous Wetlands',
    ],
    'colors': [
        '#466b9f', '#d1def8', '#dec5c5', '#d99282', '#eb0000''#ab0000',
        '#b3ac9f', '#68ab5f', '#1c5f2c', '#b5c58f', '#af963c', '#ccb879',
        '#dfdfc2', '#d1d182', '#a3cc51', '#82ba9e', '#dcd939', '#ab6c28',
        '#b8d9eb', '#6c9fb8',
    ]
};
 
//创建一个面板来容纳图例小部件。
var legend = ui.Panel({
    style: {
        position: position,
        padding: '8px 15px'
    }
});
 
//函数用于生成图例。
function addCategoricalLegend(panel, dict, title) {
  // 创建并添加图例标题。
    var legendTitle = ui.Label({
        value: title,
        style: {
            fontWeight: 'bold',
            fontSize: '18px',
            margin: '0 0 4px 0',
            padding: '0'
        }
    });
    panel.add(legendTitle);
     
     
    var loading = ui.Label('Loading legend...', {
        margin: '2px 0 4px 0'
    });
    panel.add(loading);
  
     
    //创建并样式化图例
    var makeRow = function(color, name) {
        // Create the label that is actually the colored box.
        var colorBox = ui.Label({
            style: {
                backgroundColor: color,
                // Use padding to give the box height and width.
                padding: '8px',
                margin: '0 0 4px 0'
            }
        });
         
        //创建描述文本的标签。
        var description = ui.Label({
            value: name,
            style: {
            margin: '0 0 4px 6px'
            }
        });
         
        return ui.Panel({
            widgets: [colorBox, description],
            layout: ui.Panel.Layout.Flow('horizontal')
        });
    };
     
    //从图像中获取调色板颜色和类名的列表。
    var palette = dict.colors;
    var names = dict.names;
    loading.style().set('shown', false);
     
     
    for (var i = 0; i < names.length; i++) {
        panel.add(makeRow(palette[i], names[i]));
    }
    rightMap.add(panel);
//==========================step 4====================================================
addCategoricalLegend(legend, dict, title);
// Create a SplitPanel to hold the adjacent, linked maps.
var splitPanel = ui.SplitPanel({
    firstPanel: leftMap,
    secondPanel: rightMap,
    wipe: true,
    style: {
        stretch: 'both'
    }
});
 
 
// 将SplitPanel设置为UI根目录中唯一的东西。
ui.root.widgets().reset([splitPanel]);
var linker = ui.Map.Linker([leftMap, rightMap]);
leftMap.setCenter(-100, 40, 4);

  

 

2. 从Code Editor中发布APP

step1: 加载代码

step2: 打开“管理应用”面板,新建APP

step3: 设置相关信息,完成

 

3. 使用geemap开发一个APP(Python)

4.使用本地Web服务器发布APP

5.使用云平台发布APP

 

posted @   百里屠苏top  阅读(20)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示