WMTS layer misalignment with WMS GetFeatureInfo

Just curious if anyone has encountered this before.

I have a 1m raster dataset tiled cached and served as WMTS layer. And I’m displaying it on a web map while also querying it for the raster pixel values using a WMS GetFeatureInfo request.

The data is being served by Geoserver, version 2.25.2.

Here is an example of what I mean:

The offset is small in spatial terms, given that this is 1m data. But I don’t see why it should exist at all if both requests are using the same coordinate system.

Here is an example GetFeatureInfo request that returns null:

https://nrri-atlas2.d.umn.edu/geoserver/ows?&REQUEST=GetFeatureInfo&SERVICE=WMS&SRS=EPSG:3857&STYLES=&VERSION=1.1.1&FORMAT=image/png&INFO_FORMAT=application/json&BBOX=-10333651.873837,5735740.039195868,-10333628.789705174,5735755.005625718&HEIGHT=802&WIDTH=1237&LAYERS=nra:dnr_chm_imagemosaic&QUERY_LAYERS=nra:dnr_chm_imagemosaic&X=501&Y=401&FEATURE_COUNT=1

And here is an example WMTS request:

https://nrri-atlas2.d.umn.edu/geoserver/gwc/service/wmts/rest/nra:dnr_chm_imagemosaic/nra:dnr_chm_keep/EPSG:900913/EPSG:900913:23/2993680/2031236?format=image%2Fpng

Here is the JavaScript code I am using to make the GetFeatureInfo request:

// Function to construct the GetFeatureInfo URL 
function getFeatureInfoUrl(bbox, width, height, x, y) {
  return (
    `https://nrri-atlas2.d.umn.edu/geoserver/ows?` +
    `&REQUEST=GetFeatureInfo&SERVICE=WMS&SRS=EPSG:3857` + 
    `&STYLES=&VERSION=1.1.1&FORMAT=image/png&INFO_FORMAT=application/json` +
    `&BBOX=${bbox}&HEIGHT=${height}&WIDTH=${width}` +
    `&LAYERS=nra:dnr_chm_imagemosaic&QUERY_LAYERS=nra:dnr_chm_imagemosaic` +
    `&X=${x}&Y=${y}&FEATURE_COUNT=1`
  );
}

// Handle user clicks to get pixel value
view.on("click", function (event) {
  const { mapPoint } = event;

  // Use the map's extent in EPSG:3857 
  const extent = view.extent;

  // Get the bounding box in EPSG:3857 (Web Mercator)
  const bbox = `${extent.xmin},${extent.ymin},${extent.xmax},${extent.ymax}`;

  // Get the dimensions of the current view
  const width = view.width;
  const height = view.height;

  // Use event.screenPoint to get the pixel coordinates relative to the MapView container
  const x = event.screenPoint.x;
  const y = event.screenPoint.y;

  // Build the GetFeatureInfo URL
  const url = getFeatureInfoUrl(bbox, width, height, x, y);

  console.log("BBOX:", bbox);
  console.log("Width:", width, "Height:", height);
  console.log("X:", x, "Y:", y);
  console.log("GetFeatureInfo URL:", url);
  // Fetch pixel value from the WMS service
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      // Extract pixel value from the response
      const feature = data.features ? data.features[0] : null;
      const pixelValue = feature
        ? feature.properties.GRAY_INDEX
        : "No data";

      // Show the pixel value in a popup
      view.popup.open({
        title: "Pixel Value",
        content: `Pixel value at clicked location: ${pixelValue}`,
        location: mapPoint, // Show popup at the clicked location
      });
    })
    .catch((error) => {
      console.error("Error fetching pixel value:", error);
    });