基于 GEE 的 NDVI 交互式时序可视化与趋势分析工具

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

一、研究区设置模块

该模块主要用于定义分析的空间范围，并在地图中进行可视化展示。

var roi = table;
Map.addLayer(roi, {color: 'red'}, "研究区");
Map.centerObject(roi, 7);

研究区（Region of Interest, ROI）作为空间分析的边界约束，本例中采用已导入 Google Earth Engine 的矢量数据（如行政区划边界）作为分析区域。

roi = table

roi

table

通过将研究区图层以红色边框形式叠加至地图界面，图层命名为“研究区”，便于用户直观识别分析范围。

Map.addLayer()

同时调用地图居中功能，使视角自动聚焦于研究区，设定缩放级别为7（数值越大视野越近），确保整个区域完整呈现于视窗中央。

Map.centerObject(roi, 7)

二、界面面板构建模块

此部分负责搭建用户交互界面，集成标题、说明文本、日期选择控件及操作按钮，构成工具的主要操作入口。

（一）主面板初始化

采用垂直流式布局结构，设置面板宽度为320px，定位方式为右上角悬浮显示。背景设为白色半透明（透明度0.9），配以灰色边框，并添加适当的内外边距，提升整体视觉体验且避免遮挡地图主体内容。

var panel = ui.Panel({
  layout: ui.Panel.Layout.flow('vertical'),
  style: {
    width: '320px',
    padding: '12px',
    position: 'top-right',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    border: '1px solid gray',
    margin: '8px'
  }
});
ui.root.insert(0, panel);

vertical

为保障操作便捷性，将该控制面板插入UI层级最顶层，确保其始终可见并优先响应用户交互。

ui.root.insert(0, panel)

（二）面板标题与说明文字

标题部分使用绿色图标配合加粗居中的文字样式，突出植被监测主题，增强识别度。

var title = ui.Label({
  value: '???? NDVI 时段对比分析工具',
  style: {
    fontWeight: 'bold',
    fontSize: '16px',
    color: '#1b5e20',
    textAlign: 'center',
    margin: '6px 0'
  }
});
panel.add(title);
panel.add(ui.Label({
  value: '选择基线期与对比期，计算并显示NDVI变化。',
  style: {fontSize: '12px', color: '#555', margin: '0 0 8px 0', textAlign: 'center'}
}));

说明文字采用较小字号和灰色字体颜色，简洁传达工具用途，在不干扰主视觉的前提下明确操作逻辑。

（三）日期选择滑块

该组件为核心交互控件，用于选定基线期的起止时间。

var startSlider = ui.DateSlider({
  start: '2001-01-01',
  end: '2023-12-31',
  value: '2015-01-01',
  period: 1,
  style: {stretch: 'horizontal'}
});
var endSlider = ui.DateSlider({
  start: '2001-01-01',
  end: '2023-12-31',
  value: '2019-12-31',
  period: 1,
  style: {stretch: 'horizontal'}
});

滑块的时间范围限定在2001年至2023年之间，与MODIS数据的产品时间跨度保持一致。

start

end

默认选中时间段设为2015–2019年，提供合理初始值，降低用户配置成本。

value

日期调整精度设置为每日一级，确保时间选取的精确性。

period: 1

控件横向拉伸以填充整个面板宽度，优化界面排布效果。

stretch: 'horizontal'

（四）功能按钮

按钮用于触发核心计算流程，绑定主逻辑函数 updateMap()，实现NDVI差异图的生成与更新。

var button = ui.Button({
  label: '???? 更新 NDVI 地图',
  onClick: updateMap,
  style: {
    stretch: 'horizontal',
    color: 'white',
    backgroundColor: '#388e3c',
    border: '1px solid #2e7d32',
    fontWeight: 'bold',
    margin: '4px 0'
  }
});
panel.add(button);

样式设计上采用绿色背景搭配白色加粗文字，并结合图标与文字组合形式，提高可读性和点击识别度。按钮横向扩展以占满面板宽度，方便移动端或桌面端操作。

updateMap

三、全局变量定义

定义一个全局变量用于存储图例面板对象，以便统一管理图例的创建与移除过程，防止重复添加导致界面混乱。

var legendPanelGlobal = null;

初始状态下该变量为空（null），当新图例生成时赋值；后续更新时可通过该引用定位旧图例并执行清除操作。

null

四、主逻辑函数：updateMap ()

该函数是系统的核心处理单元，负责从数据获取、指数计算到结果可视化的全流程控制，由“更新 NDVI 地图”按钮触发执行。

（一）地图图层重置

在每次执行更新前，首先清空地图上的所有已有图层，防止新旧图层叠加造成混淆。随后重新加载研究区边界图层，维持空间参考的一致性。

Map.layers().reset();  // 清除旧图层
Map.addLayer(roi, {color: 'red'}, "研究区");

（二）日期参数获取

从日期滑块控件中提取用户选定的起始与结束日期，并将其转换为 GEE 平台所需的 Date 对象格式，满足数据筛选的时间条件要求。

var start = ee.Date(startSlider.getValue()[0]);
var end = ee.Date(endSlider.getValue()[0]);

ee.Date

注意：由于滑块返回的是 JavaScript 原生日期类型，需通过 GEE 提供的方法进行格式转换，确保兼容性。

getValue()[0]

DateSlider

（三）NDVI 数据获取与计算

基于 MOD13Q1.061 Terra 植被指数产品（16天合成周期，250米分辨率），分别提取基线期与固定对比期（2023全年）的影像集合。对每个时期内的影像序列进行中值合成，以减少云影等噪声影响，进而计算各像元的 NDVI 值。

（四）差异图可视化

通过减法运算获得两个时段间的 NDVI 差值图。利用色彩映射规则进行渲染：绿色表示 NDVI 上升或稳定（植被状况改善），红色表示下降趋势（植被退化），黄色代表过渡区域。最终将结果图层添加至地图显示。

（五）日志打印

在控制台输出关键处理信息，包括所选时间段、数据集名称、处理进度提示等，辅助调试与运行状态监控。

（六）图例调用

执行 addLegend() 函数，动态生成对应的颜色梯度图例，帮助用户理解地图色彩所代表的数值含义。

五、图例函数：addLegend ()

（一）旧图例移除

若已存在图例面板，则先根据全局变量引用将其从界面中移除，避免多个图例共存造成冗余。

（二）图例面板创建

新建一个独立的浮动面板用于承载图例内容，设置合适的尺寸、位置与透明背景，使其不影响地图观察。

（三）图例标题与渐变条

添加图例标题“NDVI 变化等级”，并在下方绘制连续的颜色渐变条，反映从负值（退化）到正值（改善）的变化区间。

（四）图例标签

在渐变条两侧标注关键阈值标签，例如“-1.0”（严重退化）至“+1.0”（显著改善），增强解读能力。

（五）图例添加与全局赋值

将构建完成的图例面板添加至地图界面，并将其实例赋值给全局变量，供下次更新时调用删除。

六、初始化调用

程序启动后自动执行一次 updateMap() 函数，加载默认时间段下的 NDVI 差异图，确保用户进入界面即可查看初始结果。

七、关键技术亮点与设计逻辑

• 基于 GEE 实现大规模遥感数据的云端快速处理，无需本地下载原始影像。
• 采用交互式 UI 设计，提升非专业用户的使用友好性。
• 通过中值合成策略有效抑制云污染，提高结果可靠性。
• 动态图例机制支持可视化结果的即时解释。

八、使用场景与注意事项

适用于生态环境监测、土地利用变化评估、荒漠化分析等领域。建议使用高精度边界数据作为研究区；注意 MOD13Q1 数据存在一定的空间缺失区域，复杂地形下可能存在数据空洞。

九、运行结果

系统成功实现了 NDVI 时空差异的交互式分析功能，能够清晰呈现不同年份间植被覆盖的变化趋势。绿色区域指示植被恢复或生长良好，红色区域反映植被覆盖减少或生态退化，为决策支持提供直观依据。

返回值以数组形式呈现，选取第一个元素即可获得所选日期。

三、NDVI 数据获取与计算

// 基线期NDVI计算
var baseline = ee.ImageCollection('MODIS/006/MOD13Q1')
  .filterBounds(roi)
  .filterDate(start, end)
  .select('NDVI')
  .mean();

// 对比期NDVI计算（固定2023年）
var recent = ee.ImageCollection('MODIS/006/MOD13Q1')
  .filterBounds(roi)
  .filterDate('2023-01-01', '2023-12-31')
  .select('NDVI')
  .mean();

// NDVI差异计算
var diff = baseline.subtract(recent);

数据来源

采用 MODIS 传感器的 MOD13Q1 产品（植被指数 16 天合成数据，版本 006），空间分辨率为 250 米，时间序列从 2001 年延续至今，适用于大范围植被动态监测与长期变化分析。

数据筛选与处理流程

MOD13Q1

• 空间裁剪：提取研究区域范围内的像元数据，减少无效计算负担。

filterBounds(roi)

• 时间筛选：根据用户选定的基线期与固定对比期（2023 年全年）进行影像子集提取。

filterDate()

• 波段选择：保留 NDVI 波段（该数据集同时包含 EVI 等其他指标，本分析仅聚焦于 NDVI）。

select('NDVI')

• 均值合成：对筛选后的影像集合在时间维度上求平均值，生成代表该时段整体植被覆盖水平的平均 NDVI 图层。

.mean()

差异计算方法

通过计算基线期与对比期之间的平均 NDVI 差值，评估植被覆盖变化情况。差值大于零表示植被退化或覆盖下降；差值小于或接近零则表明植被状态稳定或有所改善。

baseline.subtract(recent)

四、差异图可视化设置

Map.addLayer(diff.clip(roi), {
  min: 0,
  max: 2000,
  palette: ['green', 'yellow', 'red']
}, 'NDVI差异图');

影像裁剪

将计算得出的 NDVI 差异图依据研究区边界进行裁剪，排除无关地理区域，提升结果专注度与视觉清晰度。

diff.clip(roi)

可视化参数配置

min: 0

/

max: 2000

显示范围设定：MODIS 的原始 NDVI 值经过放大处理（范围 -2000 至 10000），实际分析中重点关注 0～2000 区间内的显著变化。

palette: ['green', 'yellow', 'red']

颜色映射方案：采用绿-黄-红渐变色系，绿色代表较小差值（植被稳定或上升），黄色为过渡状态，红色表示较大差值（植被明显衰退），直观展示植被健康趋势。

五、日志信息输出

print('基线期:', start.format('YYYY-MM-dd'), '→', end.format('YYYY-MM-dd'));
print('对比期: 2023-01-01 → 2023-12-31');

功能说明：在 Google Earth Engine 控制台输出当前分析的时间段信息，便于用户确认基线期选择是否准确，辅助结果验证和调试过程。

六、图例模块调用机制

addLegend();

作用描述：调用 addLegend() 函数，在地图界面上添加 NDVI 差异图对应的图例组件，帮助使用者理解色彩分布所反映的生态含义。

addLegend()

七、图例函数实现：addLegend()

该函数用于构建并管理可视化图例面板，确保其样式与差异图解译规则一致，增强成果可读性与专业性。

（一）已有图例清除逻辑

if (legendPanelGlobal) {
  try { ui.root.remove(legendPanelGlobal); } catch (e) {}
  legendPanelGlobal = null;
}

执行逻辑：每次更新地图前，先判断是否存在先前创建的图例实例，若存在则予以移除，防止多个图例重叠显示，维持界面整洁。

异常容错机制：通过 try...catch 结构避免因尝试删除不存在对象而导致程序中断，提高代码鲁棒性。

try...catch

（二）图例面板布局设计

var legendPanel = ui.Panel({
  layout: ui.Panel.Layout.flow('vertical'),
  style: {
    position: 'bottom-right',
    padding: '8px',
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    border: '1px solid gray',
    margin: '8px'
  }
});

界面样式：采用垂直流式布局，定位在地图底部右侧，背景设为半透明白色，边框为灰色，既突出信息又不遮挡主图内容，风格与主控面板协调统一。

（三）标题与色彩梯度条生成

var legendTitle = ui.Label({
  value: 'NDVI 差异图例',
  style: {fontWeight: 'bold', fontSize: '13px', margin: '0 0 4px 0', textAlign: 'center'}
});
legendPanel.add(legendTitle);

// 渐变条生成
var legendImage = ee.Image.pixelLonLat().select(0);
var gradient = legendImage.visualize({
  min: 0,
  max: 1,
  palette: ['green', 'yellow', 'red']
});
var thumbnail = ui.Thumbnail({
  image: gradient,
  params: {bbox: [0, 0, 1, 0.1], dimensions: '120x14'},
  style: {stretch: 'horizontal', margin: '4px 0'}
});
legendPanel.add(thumbnail);

图例标题：设置加粗居中的文本标题，明确标识图例主题，提升辨识度。

渐变图像生成：

• 基于预设数值区间创建基础影像，并利用 visualize() 方法应用与差异图相同的绿-黄-红配色方案。

pixelLonLat()

visualize()

• 使用 createThumbnail() 将可视化结果转换为缩略图，尺寸设为 120x14 像素，并横向拉伸填充图例区域，清晰展现颜色过渡。

ui.Thumbnail

（四）标签布局与语义对应

var labelsPanel = ui.Panel({
  layout: ui.Panel.Layout.flow('horizontal'),
  style: {width: '100%'}
});
var leftLabel = ui.Label('NDVI 稳定/上升', {fontSize: '11px', color: 'green', margin: '0 4px 0 0'});
var spacer = ui.Label({value: ' ', style: {stretch: 'horizontal'}});
var rightLabel = ui.Label('NDVI 下降', {fontSize: '11px', color: 'red', margin: '0 0 0 4px'});
labelsPanel.add(leftLabel);
labelsPanel.add(spacer);
labelsPanel.add(rightLabel);
legendPanel.add(labelsPanel);

排版方式：采用横向流式布局，借助空白占位标签   实现左右文字标签两端对齐，优化视觉平衡与美观性。

spacer

标签释义：左侧绿色标签对应渐变条起点，表示 NDVI 稳定或上升趋势；右侧红色标签对应终点，表示 NDVI 显著下降，与地图颜色编码完全匹配，便于快速解读。

（五）图例集成与全局引用赋值

ui.root.add(legendPanel);
legendPanelGlobal = legendPanel;

界面集成：将完成构建的图例面板添加至地图 UI 层，实现可视化呈现。

状态维护：将新生成的图例对象赋值给全局变量，以便后续更新时能够正确识别并移除旧图例，保障界面一致性。

legendPanelGlobal

八、系统初始化机制

updateMap();

功能说明：脚本加载完成后自动执行 updateMap() 调用，初始化地图视图，默认展示 2015–2019 年作为基线期与 2023 年对比的 NDVI 变化图，无需手动触发，提升用户体验流畅度。

updateMap()

九、核心技术优势与设计思路

交互体验优化

• 提供图形化操作界面（如日期滑块、按钮控件、自动图例），免除编程要求，降低使用门槛。
• 界面元素布局科学——主控面板置于右上角，图例位于右下角，避免遮挡核心地图内容，支持同步操作与结果判读。

数据处理科学性

• 选用 MODIS 的 MOD13Q1 数据产品，兼具长时间序列（自 2001 年起）与适中空间分辨率（250 米），适合开展区域乃至流域尺度的植被演变研究。

MOD13Q1

• 采用“时段均值”策略融合多期影像，有效削弱季节更替、短期气候波动等噪声干扰，更能体现长期植被发展趋势。

可视化一致性保障

• 主面板与图例面板采用统一视觉风格（半透明底色、灰边框），增强整体界面协调感。
• 差异图与图例使用完全一致的颜色映射规则，确保用户解读无歧义。

程序健壮性设计

• 通过全局变量追踪图例状态，防止重复添加。

try...catch

• 引入异常捕获机制，避免因非致命错误导致脚本崩溃。
• 建立图层重置机制，保证每次更新均基于干净的地图环境，杜绝冗余图层叠加影响显示效果。

十、应用场景与使用前提

典型应用领域

• 省级、市级或流域级的大范围植被覆盖长期动态监测。
• 生态保护工程成效评估、土地利用变更影响分析、荒漠化进程或绿化进展追踪等。

使用注意事项

研究区域矢量文件需提前导入 Google Earth Engine 平台，且必须为标准矢量格式（如 Shapefile、GeoJSON 等），否则无法完成空间裁剪与分析。

table

在选择基线期时，应注意其与对比期（2023年）的时间跨度保持一致。建议两者均采用多年平均值或同为单年数据，避免因时间尺度不统一而导致分析结果出现偏差。

MODIS 数据的空间分辨率为250米，适用于大范围区域的植被动态监测，但不适用于小区、小流域等小尺度区域的精细化分析。对于此类场景，应优先选用更高分辨率的遥感数据源，例如 Landsat 或 Sentinel-2，以提升空间细节表达能力。

NDVI 差值参数当前设置范围为0~2000，可根据研究区域实际植被变化幅度进行调整。若区域内变化较为显著，可适当扩大该参数取值，以确保颜色梯度能够清晰反映不同等级的变化强度，增强可视化效果。

min

/

max

调整

max

九、运行结果

基于 Google Earth Engine（GEE）平台开发的 NDVI 交互式时序可视化与趋势分析工具界面展示如下：

以下分别为湖北省在不同时段内的 NDVI 变化趋势分析结果可视化图像：

• 2001年1月1日至2023年12月30日的长期 NDVI 趋势变化图；
• 2010年1月1日至2020年12月30日的十年间 NDVI 变化趋势图；
• 2020年3月1日至2020年8月31日短期内的 NDVI 动态变化图。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：趋势分析 分析工具 可视化 交互式 GEE