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

//==========================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