Convert Cartesian2 X/Y pos to corresponding lng/lat

CesiumJS
1

When a user clicks on the map (Viewer onClick), I am able to get the X & Y position of the map. I want create an Pin or create a new entity and render on the map. To achieve it, can you suggest me how to convert X/Y pos into corresponding lat and lng (may be of type Cartesian3)

    import React, { useRef } from 'react';
import { Cartesian3, createWorldTerrain, Color, PinBuilder, VerticalOrigin } from 'cesium';
import { Viewer, Entity, CameraFlyTo } from 'resium';

const terrainProvider = createWorldTerrain();
const position = Cartesian3.fromDegrees(151.210757, -33.861338, 100);

const Map = () => {
  const mapRef = useRef(null);
  const [pins, setPins] = useState([]);


  const handleMapClick = (e) => { 
    // Value of e 
    // {
    //   "position": {
    //     "x": 746.6666870117188,
    //     "y": 402.34375762939453
    //   }
    // }    

    /**
     * Question is how to convert Cartesian2 X/Y to corresponding lng/lat
     */


    const newPin = {
      name: `Waypoint ${pins.length + 1}`,
      id: `${pins.length + 1}`,
      // below line produces unwanted results
      position: Cartesian3.fromDegrees(e.position.x, e.position.y, 100),
      point: { pixelSize: 10, color: Color.RED }
    };
    
    setPins(pins => pins.concat(newPin));
  }

  return (
    <div>
      <Viewer
        full
        terrainProvider={terrainProvider}
        ref={mapRef}
        onClick={e => handleMapClick(e)}
      >
        <CameraFlyTo duration={5} destination={position} />

     <Entity
        name="test"
        description="test!!"
        position={Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100)}
        point={}
      />        
        
        {pins.length > 0 &&
          pins.map((pin) => (
            <Entity point={pin.point} key={pin.id} name={pin.name} position={pin.position} />
          ))}
      </Viewer>    
    </div>
  )
}

export default Map;
2

Welcome the Cesium community Daniel!

You can convert between Cartesian3 and Cartographic coordinates with these functions:

There’s an example here of drawing on terrain that shows you how you can create entities on the map when a user clicks: https://sandcastle.cesium.com/index.html?src=Drawing%20on%20Terrain.html

3

Thanks for your input. I will look at those documents and try out the sample.