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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)