如何在OpenLayers中获取插值（interpolate）后的像素值？

问题出在image_layer.getData(evt.pixel)获取的是原始图片数据源的像素值，而插值是OpenLayers在Canvas渲染阶段完成的，原始数据源并不存储插值后的像素数据。要获取屏幕上显示的插值后像素，需要直接从地图的Canvas渲染元素中读取像素。

修改你的display函数如下：

const display = function (evt) {
  if (evt.dragging) {
    return;
  }

  const mapCanvas = map3.getViewport().querySelector('canvas');
  const context = mapCanvas.getContext('2d');
  const pixelData = context.getImageData(evt.pixel[0], evt.pixel[1], 1, 1).data;
  
  // 提取RGB值（需保留透明度可加上pixelData[3]）
  const rgb = `R: ${pixelData[0]}, G: ${pixelData[1]}, B: ${pixelData[2]}`;
  info1.innerText = rgb;
};
map3.on('pointermove', display);

关键说明 #

• map3.getViewport().querySelector('canvas')：获取地图用于渲染的Canvas元素
• context.getImageData(x, y, 1, 1)：读取鼠标位置的单个像素数据，返回的data数组包含RGBA四个0-255范围的数值
• 这种方式获取的是经过插值渲染后的像素值，和屏幕显示的视觉效果完全一致

完整修改后的main.js代码 #

import './style.css';
import {Map, View} from 'ol';
import ImageLayer from 'ol/layer/Image';
import Static from 'ol/source/ImageStatic';
import { Projection } from 'ol/proj';
import {getCenter} from 'ol/extent.js';

const extent = [0,0,32,32];
const projection = new Projection({
  code: 'image',
  units: 'pixels',
  extent: extent,
});

const view = new View({
  center: getCenter(extent),
  zoom: 2,
  maxZoom: 8,
  projection: projection,
});

const image_source = new Static({
  crossOrigin: '',  
  url: 'image0.png',
  projection: projection,
  imageExtent: extent,
  interpolate: true,
});

const image_layer = new ImageLayer({
  source: image_source
});

const map3 = new Map({
  target: 'map3',
  view: view,
  layers: [image_layer],
});

const info1 = document.getElementById('info1');

const display = function (evt) {
  if (evt.dragging) {
    return;
  }

  const mapCanvas = map3.getViewport().querySelector('canvas');
  const context = mapCanvas.getContext('2d');
  const pixelData = context.getImageData(evt.pixel[0], evt.pixel[1], 1, 1).data;
  
  const rgb = `R: ${pixelData[0]}, G: ${pixelData[1]}, B: ${pixelData[2]}`;
  info1.innerText = rgb;
};
map3.on('pointermove', display);

注意事项 #

• 首次加载地图时，需确保Canvas已完成渲染，可绑定rendercomplete事件后再初始化pointermove监听，避免初始阶段获取不到Canvas元素
• 多图层场景下，需确认读取的是目标图片图层对应的Canvas，单图层场景直接获取主Canvas即可

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