Google Earth Engine中如何在forEach循环内设置差异化可视化参数

问题描述 #

需要为Hansen全球森林变化数据集加载到4幅联动地图的不同波段分别设置专属可视化参数，最初以数组形式存储多组差异化参数时，无法适配原有代码的调用逻辑，导致参数匹配失效。
最初尝试的参数定义写法：

var visParams = [{"bands":["treecover2000"],"min":0,"max":100,"gamma":1},
                 {"bands":["loss"],"min":0,"max":50,"gamma":1},
                 {"bands":["gain"],"min":0,"max":1000,"gamma":1},
                 {"bands":["lossyear"],"min":0,"max":1,"gamma":1}];

原有存在缺陷的代码中，所有波段共用一套写死的可视化参数，无法满足独立配置需求：

var image = ee.Image("UMD/hansen/global_forest_change_2021_v1_9");

// 地图名称与对应波段映射
var MAP_PARAMS = {
  'Img 1': ['treecover2000'],
  'Img 2': ['loss'],
  'Img 3': ['gain'],
  'Img 4': ['lossyear']
};


// 所有波段共用固定参数，无法实现独立配置
function getVisualization(bands) {
  return {min: 0, max: 10000, bands: bands, palette: ['yellow', 'green']};
}


// 遍历生成联动地图
var maps = [];
Object.keys(MAP_PARAMS).forEach(function(name) {
  var map = ui.Map();
  map.add(ui.Label(name,{backgroundColor: '#bbffec', color:'#19404c'}));
  map.addLayer(image, getVisualization(MAP_PARAMS[name]), name);
  map.setControlVisibility(false);
  maps.push(map);
});

var linker = ui.Map.Linker(maps);

maps[0].setControlVisibility({zoomControl: true});
maps[3].setControlVisibility({scaleControl: true});

var mapGrid = ui.Panel(
    [
      ui.Panel([maps[0], maps[1]], null, {stretch: 'both'}),
      ui.Panel([maps[2], maps[3]], null, {stretch: 'both'})
    ],
    ui.Panel.Layout.Flow('horizontal'), {stretch: 'both'});

maps[0].setCenter(-46.122, -12.726, 5);

ui.root.widgets().reset([mapGrid])
ui.root.setLayout(ui.Panel.Layout.Flow('horizontal'));

实现方法 #

数组存储参数需要遍历匹配才能找到对应波段的配置，实现繁琐且容易出错，直接将参数存储结构改为波段名为键、配置内容为值的对象，调整参数读取函数即可，原有地图遍历生成的逻辑完全不需要改动。

• 重构可视化参数存储结构，以波段名作为key直接索引对应配置
• 修改getVisualization函数逻辑，传入波段后直接读取对应专属参数
• 可根据需求单独为每个波段设置配色、拉伸范围等参数，互不干扰

可直接运行的修改后完整代码 #

var image = ee.Image("UMD/hansen/global_forest_change_2021_v1_9");

// 地图名称与对应波段映射
var MAP_PARAMS = {
  'Img 1': ['treecover2000'],
  'Img 2': ['loss'],
  'Img 3': ['gain'],
  'Img 4': ['lossyear']
};

// 按波段名存储独立可视化参数，可自定义每个波段的拉伸范围、配色
var visParams = {
  "treecover2000": {"min":0,"max":100,"gamma":1, "palette": ['#ffffcc', '#006837']},
  "loss": {"min":0,"max":50,"gamma":1, "palette": ['#ffeda0', '#f03b20']},
  "gain": {"min":0,"max":1000,"gamma":1, "palette": ['#f7fcf5', '#00441b']},
  "lossyear": {"min":0,"max":21,"gamma":1, "palette": ['#ffffff', '#d73027']}
};

// 重写参数获取函数，自动匹配对应波段的专属配置
function getVisualization(bands) {
  var targetBand = bands[0];
  return ee.Dictionary(visParams[targetBand]).combine({bands: bands}).getInfo();
}

// 原有地图生成逻辑无需改动
var maps = [];
Object.keys(MAP_PARAMS).forEach(function(name) {
  var map = ui.Map();
  map.add(ui.Label(name,{backgroundColor: '#bbffec', color:'#19404c'}));
  map.addLayer(image, getVisualization(MAP_PARAMS[name]), name);
  map.setControlVisibility(false);
  maps.push(map);
});

var linker = ui.Map.Linker(maps);

maps[0].setControlVisibility({zoomControl: true});
maps[3].setControlVisibility({scaleControl: true});

var mapGrid = ui.Panel(
    [
      ui.Panel([maps[0], maps[1]], null, {stretch: 'both'}),
      ui.Panel([maps[2], maps[3]], null, {stretch: 'both'})
    ],
    ui.Panel.Layout.Flow('horizontal'), {stretch: 'both'});

maps[0].setCenter(-46.122, -12.726, 5);

ui.root.widgets().reset([mapGrid])
ui.root.setLayout(ui.Panel.Layout.Flow('horizontal'));

说明：原参数中lossyear的max值设为1不符合数据集实际定义，该波段取值为0-21，0代表无森林损失，1-21对应2001-2021年的损失年份，上述代码已修正该取值，可根据实际展示需求调整每个波段的数值范围和配色方案。

内容的提问来源于stack exchange，提问作者vivirbr