首页 / OpenLayers / API 文档

RasterSource

先看结论

栅格运算数据源。把多个数据源的像素取到同一套网格上，逐像素做加减乘除或分类，结果是可直接作为图像图层显示的新栅格。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-29 · 引用本文

new ol.source.Raster(options)

构造参数

参数	默认	说明
`sources`	必填	参与运算的数据源数组，每个都要能提供图像
`operation`	—	运算函数，签名 `(inputs, data)`，返回像素数组
`operationType`	'pixel'	`'pixel'` 逐像素调用一次 / `'image'` 整幅调用一次
`lib`	—	供运算函数使用的函数库对象，会被注入到 Worker 作用域
`threads`	1	运算使用的 Worker 数量，0 表示在主线程执行
`projection`	'EPSG:3857'	输出投影
`attributions`	—	版权说明

事件

事件	说明
`beforeoperations`	运算前触发，可读取 `event.inputs` 与 `event.resolutions`
`afteroperations`	运算后触发，可通过 `event.data` 读取运算函数写回的统计值

示例：两个波段求差值

var red = new ol.source.XYZ({ url: '/tiles/red/{z}/{x}/{y}.png' });
var nir = new ol.source.XYZ({ url: '/tiles/nir/{z}/{x}/{y}.png' });

var ndvi = new ol.source.Raster({
  sources: [red, nir],
  operationType: 'pixel',
  threads: 2,
  operation: function (inputs, data) {
    var r = inputs[0];
    var n = inputs[1];
    var out = new Uint8ClampedArray(r.length);

    for (var i = 0; i < r.length; i += 4) {
      var redValue = r[i];
      var nirValue = n[i];
      var index = (nirValue - redValue) / (nirValue + redValue + 1e-6);
      var v = Math.round(((index + 1) / 2) * 255);
      out[i] = v;
      out[i + 1] = 255 - v;
      out[i + 2] = 90;
      out[i + 3] = r[i + 3];
    }

    data.max = 1;
    return [out];
  }
});

var layer = new ol.layer.Image({ source: ndvi });

inputs 的结构

inputs 与 sources 顺序一一对应，每项是 Uint8ClampedArray，按 RGBA 交错排列。 operation 必须返回同样长度的数组，返回多个数组时按顺序作为新图像的波段。数据源尺寸不一致时，OpenLayers 会先把它们重采样到同一分辨率再调用运算。

跨域与性能

读取像素需要把图像画到画布上，任何一张源图跨域未授权都会让整幅结果变成空白。数据源必须设置 crossOrigin: 'anonymous' 且服务端返回允许跨域的响应头。

threads 大于 0 时运算在 Worker 中执行，主线程不会被长循环阻塞，但每次瓦片变化都要在浏览器与 Worker 之间拷贝像素。瓦片多时开销可观，通常在缩放停止后才真正计算。

operation 会被序列化。函数体里不能引用闭包变量，需要的外部函数放在 lib 里，需要的外部常量放进 data，否则 Worker 中会报未定义。

引用本文

经纬志（2026）。《RasterSource》。https://www.jingweizhi.com/openlayers/api/raster-source.html（访问日期 2026-11-03）。