本节导读
演示如何使用JavaScript和Python设计和发布地球引擎应用程序。介绍地球引擎用户界面JavaScript API和geemap Python包。在完成本节后,你将能够发布一个带有拆分面板地图的地球引擎应用程序,用于可视化土地覆盖变化。
主要内容:
- 使用JavaScript为地球引擎应用程序设计一个用户界面。
- 发布一个地球引擎应用程序,用于可视化土地覆盖变化。
- 使用Python和geemap开发一个地球引擎应用程序。
- 使用本地计算机作为web服务器部署地球引擎应用程序。
- 使用Python和免费云平台发布地球引擎应用程序。
- 使用Anaconda/Miniconda创建conda环境。
- 安装Python包和使用Jupyter Notebook。
- 将更改提交到GitHub存储库。
1. 使用JavaScript构建一个GEE APP
//==========================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