OpenLayers 计算GeoTIFF影像NDVI

前言

NDVI（Normalized Difference Vegetation Index）即归一化植被指数，是反应农作物长势和营养信息的重要参数之一，用于监测植物生长状态、植被覆盖度和消除部分辐射误差。其值在[-1,1]之间，-1表示可见光高反射；0表示有岩石或裸土等，NIR和R近似相等；正值，表示有植被覆盖，且值越大，表明植被覆盖度越高。计算公式：NDVI = （NIR - RED）/ (NIR + RED)

1. 加载数据源

在Landsat卫星影像中，B4为红色通道，B5为近红外通道，所以加载B4、B5通道数据，并设置无值数据为0，设置图层为不透明度。

const source = new ol.source.GeoTIFF({
    sources: [
        {
            // red band
            url: "http://localhost/GeoTIFF/LC08_L2SP_129043_20211120_20211130_02_T1/LC08_L2SP_129043_20211120_20211130_02_T1_SR_B4.TIF",
            max: 40000
        },
        {
            // near infraed
            url: "http://localhost/GeoTIFF/LC08_L2SP_129043_20211120_20211130_02_T1/LC08_L2SP_129043_20211120_20211130_02_T1_SR_B5.TIF",
            max: 45000
        }
    ],
    nodata: 0, // 设置无效数据为0
    opaque: true, // 设置不透明
    // convertToRGB: true // 将色彩系统转换为RGB
})

2. 加载GeoTIFF图层

根据公式计算NDVI值，并进行可视化表达。其中['/', value1, value2]表示用value2除以value1，['-', ['band', 2], ['band', 1]]表示用band2-band1，也就是近红外减去红外，['+', ['band', 2], ['band', 1]]表示band2+band1，也就是近红外加上红外。

const tiffLayer = new ol.layer.WebGLTile({
    source: source,
    style: {
        color: [
            'interpolate',
            ['linear'],
            // 计算NDVI值
            ['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]],
            // NDVI色带，其值为[-1,1]
            -0.2,
            [191, 191, 191],
            -0.1,
            [219, 219, 219],
            0,
            [255, 255, 224],
            0.025,
            [255, 250, 204],
            0.05,
            [237, 232, 181],
            0.075,
            [222, 217, 156],
            0.1,
            [204, 199, 130],
            0.125,
            [189, 184, 107],
            0.15,
            [176, 194, 97],
            0.175,
            [163, 204, 89],
            0.2,
            [145, 191, 82],
            0.25,
            [128, 179, 71],
            0.3,
            [112, 163, 64],
            0.35,
            [97, 150, 54],
            0.4,
            [79, 138, 46],
            0.45,
            [64, 125, 36],
            0.5,
            [48, 110, 28],
            0.55,
            [33, 97, 18],
            0.6,
            [15, 84, 10],
            0.65,
            [0, 69, 0],
        ]
    }
})

3. 显示NDVI值

鼠标在地图上移动或者点击地图时，显示NDVI值。

const displayPixelValue = (event) => {
  // 返回像素位置数据，根据数据类型而定
  const data = tiffLayer.getData(event.pixel)
  if (!data) {
    return
  }
  const red = data[0]
  const nir = data[1]
  const ndvi = (nir - red) / (nir + red)
  const ndviInput = document.querySelector(".layui-input")
  ndviInput.value = ndvi.toFixed(4)
}
// 监听鼠标移动和点击事件
map.on(["pointermove", "click"], displayPixelValue)

4. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。本示例引用了layui组件，请自行替换。

    
    
    

    
    
    

    
    

    
    



    

        OpenLayers 根据Landsat计算NDVI
    
    

    

        

            

                NDVI值
                

                    
                
            
        
    

如何下载Landsat卫星影像请参考：https://mp.weixin.qq.com/s?__biz=MzkwOTEzNjI5NQ==&mid=2247485131&idx=1&sn=6bf2af3b75f98a573ccc96a347fe837a&chksm=c13e1e03f649971529861ab97834750ea1bc824f992a32f3325f74a6a3174309b64cffb8f759#rd

如何加载GeoTIFF影像请参考：https://mp.weixin.qq.com/s?__biz=MzkwOTEzNjI5NQ==&mid=2247485173&idx=1&sn=2e52d6df4ee71b67e1db8e32c9a22693&chksm=c13e1e3df649972b6f9edb7d7b2a452d9edcd81c535f88d1ffce7f480884f7a2fffdc017bfd9#rd

如何加载GeoTIFF投影坐标请参考：https://mp.weixin.qq.com/s?__biz=MzkwOTEzNjI5NQ==&mid=2247485224&idx=1&sn=6d4e81a1f6e98deece1f427c9737542f&chksm=c13e1fe0f64996f6ed98101539b5270e0076bc933f05769f956f33059025dff252dbe7666501#rd