OpenLayers中如何悬停GeoTIFF栅格图层获取像素值

步骤1：创建基础地图与GeoTIFF图层 #

首先初始化地图，加载GeoTIFF数据源。确保使用ol/source/GeoTIFF加载你的栅格文件，并配置对应的图层和视图。

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/WebGLTile';
import GeoTIFF from 'ol/source/GeoTIFF';

// 初始化GeoTIFF数据源
const geoTiffSource = new GeoTIFF({
  sources: [{ url: 'path/to/your/raster.tif' }],
});

// 创建地图实例
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({ source: geoTiffSource })
  ],
  view: new View({
    projection: geoTiffSource.getProjection(),
    center: geoTiffSource.getView().getCenter(),
    zoom: geoTiffSource.getView().getZoom(),
  }),
});

步骤2：添加工具提示DOM元素 #

在HTML中添加一个用于显示像素值的工具提示容器，初始设置为隐藏：

<div id="tooltip" style="
  position: absolute;
  background: #fff;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  display: none;
  pointer-events: none;
  z-index: 1000;
"></div>

步骤3：监听鼠标事件并获取像素值 #

通过监听地图的pointermove事件，获取鼠标位置对应的GeoTIFF像素值，更新工具提示内容；监听pointerout事件隐藏工具提示。

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

map.on('pointermove', async (event) => {
  const coordinate = map.getEventCoordinate(event);
  const viewResolution = map.getView().getResolution();
  const tileGrid = geoTiffSource.getTileGrid();
  
  // 获取鼠标所在的瓦片坐标
  const tileCoord = tileGrid.getTileCoordForCoordAndResolution(coordinate, viewResolution);
  if (!tileCoord) {
    tooltip.style.display = 'none';
    return;
  }

  try {
    // 获取对应瓦片
    const tile = await geoTiffSource.getTile(tileCoord, 1, geoTiffSource.getProjection());
    if (!tile || !tile.getImage()) {
      tooltip.style.display = 'none';
      return;
    }

    // 计算瓦片内的像素位置
    const tileExtent = tileGrid.getTileCoordExtent(tileCoord);
    const tileSize = tileGrid.getTileSize(tileCoord[0]);
    const x = Math.floor((coordinate[0] - tileExtent[0]) / (tileExtent[2] - tileExtent[0]) * tileSize[0]);
    const y = Math.floor((tileExtent[3] - coordinate[1]) / (tileExtent[3] - tileExtent[1]) * tileSize[1]);

    // 获取瓦片图像的像素数据
    const image = tile.getImage();
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    const pixelData = ctx.getImageData(x, y, 1, 1).data;

    // 根据GeoTIFF数据类型转换像素值（示例为32位浮点型）
    // 若为8位无符号整数，直接用 pixelData[0]
    // 若为16位无符号整数，用 new DataView(pixelData.buffer).getUint16(0, true)
    const pixelValue = new DataView(pixelData.buffer).getFloat32(0, true);

    // 更新工具提示位置与内容
    tooltip.style.display = 'block';
    tooltip.style.left = `${event.pageX + 12}px`;
    tooltip.style.top = `${event.pageY + 12}px`;
    tooltip.innerHTML = `像素值: ${pixelValue.toFixed(2)}`;

  } catch (err) {
    tooltip.style.display = 'none';
  }
});

// 鼠标移出地图时隐藏工具提示
map.on('pointerout', () => {
  tooltip.style.display = 'none';
});

关键注意事项 #

• 数据类型适配：根据你的GeoTIFF实际数据类型（8位、16位整数，32位浮点等）调整像素值的转换逻辑，避免显示错误值。
• 瓦片加载状态：使用async/await处理瓦片的异步加载，确保获取到有效瓦片后再读取像素数据。
• 工具提示定位：可添加额外逻辑，防止工具提示超出浏览器视口范围。

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