Click on 3d tile return wrong position

CesiumJS
1

Hi there,
i’m new on Cesium, and i’m using it with Resium on a react app

i’m using 3D tiles and my goal is to insert a PointGraphic on clic location. but if the location is good without 3D layer, with it the final Entity location is wrong.

Capture d’écran 2024-05-06 à 15.16.59
Capture d’écran 2024-05-06 à 15.16.59542×520 210 KB

on this picture we cans see the blue pin, i’have clicked on the bottom right of the square

Capture d’écran 2024-05-06 à 15.19.55
Capture d’écran 2024-05-06 à 15.19.55542×520 167 KB

and on this second one, without 3D tiles, the entity location is good

my onClick code :

  const handleMapClick = (e: any) => {
    if (viewer.current?.cesiumElement && e.position) {
      const v = viewer.current.cesiumElement;
      const ellipsoid = Ellipsoid.WGS84;
      const cartesian2Coordinates = new Cartesian2(e.position.x, e.position.y);
      const ray = v.camera.getPickRay(cartesian2Coordinates);
      if (ray) {
        const position = v.scene.globe.pick(ray, v.scene);
        if (position) {
          const positionCartographic = ellipsoid.cartesianToCartographic(position);

          const lng = Math.toDegrees(positionCartographic.longitude);
          const lat = Math.toDegrees(positionCartographic.latitude);
          dispatch(mapActions.setClicked3dPoint({ lat, lng }));
        }
      }
    }
  };

seems the error comes from the space between 2D and 3D tiles, and the persepctive does the rest

how can adjust the location for 3D tiles?
thx

2

scene.globe.pick gives point on the globe, not tileset.
please consider using scene.pick

1 Like
3

it’s works ! thx a lot ZhefengJin
here the final code for 3d click to lat/lng

  const handleMapClick = (e: any) => {
    if (viewer.current?.cesiumElement && e.position) {
      const v = viewer.current.cesiumElement;
      const ellipsoid = Ellipsoid.WGS84;
      const cartesian2 = new Cartesian2(e.position.x, e.position.y);
      const posScene = v.scene.pickPosition(cartesian2);
      
      if (posScene) {
        const positionCartographic = ellipsoid.cartesianToCartographic(posScene);

        // lat, lng from scene position
        const lng = Math.toDegrees(positionCartographic.longitude);
        const lat = Math.toDegrees(positionCartographic.latitude);
        dispatch(mapActions.setClicked3dPoint({ lat, lng }));
      }
    }
  };