Search code examples
javascriptgeoserverwmstilecache

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: image showing raster / GetFeatureInfo misalignment

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);
    });
Solution

  • A GetFeatureInfo request is only really valid when created from the WMS GetMap request you are interested in. Also any time your raster pixels are big enough to see clearly on screen you are likely to get edge effects.

    So to be sure of what is happening make the actual WMS GetMap request and inspect the pixel (at x,y) in that image to see what the value is.