Cesium.WebMapServiceImageryProvider and enablePickFeatures to extract <values> from xml?

CesiumJS
1

I’m using cesium to add a wms layer to the globe and then extracting the lon, lat, and corresponding value for a pixel when clicked. So far this works fine using:

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(async (click) => {
  const cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
   
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);`

Example code here

Screenshot 2025-01-12 at 7.52.13 am
Screenshot 2025-01-12 at 7.52.13 am1892×1564 213 KB

As far as I understand, viewer.camera.pickEllipsoid returns the point on the surface of the ellipsoid or map in world coordinates, which returns the corresponding <FeatureInfoResponse> from the WMS xml:

<?xml version="1.0" encoding="UTF-8"?><FeatureInfoResponse>
    <longitude>-92.724609375</longitude>
    <latitude>1.142578125</latitude>
    <iIndex>1745</iIndex>
        <jIndex>1777</jIndex>
        <gridCentreLon>-92.72500314459501</gridCentreLon>
        <gridCentreLat>1.124999980921217</gridCentreLat>
    <FeatureInfo>
        <time>2025-01-09T12:00:00.000Z</time>
        <value>26.59</value>
            </FeatureInfo>
    </FeatureInfoResponse>

Question: how can I dynamically capture the <time> and <value> from the <FeatureInfo> in the cesium-infoBox-description as const time and const value? on click?

2

Hi @marine-ecologist, thanks for the question.

In order to extract information from the imagery layer you need to pick it directly. The info shown in the top right is just an entity selection helper from the Viewer. The way we extract the info you actually want is through the ImageryLayerCollection.pickImageryLayerFeatures. This takes a ray which can be found using Camera.getPickRay

const pickRay = scene.camera.getPickRay(click.position);
const imageryLayerFeatures = await scene.imageryLayers.pickImageryLayerFeatures(pickRay, scene);
console.log(imageryLayerFeatures[0]);
console.log(imageryLayerFeatures[0].description);

The returned objects are ImageryLayerFeatureInfo objects. From there you can do whatever you want with the data. I slightly modified your sandcastle to show off using that above code, check that here

(Since CesiumJS is open source, feel free to look at the implementation in Viewer here)

Hopefully that helps but let me know if that doesn’t work for you.