Get latitude, longitude and elevation on 3dtiles instances by left click in Cesium
Personal
JavaScript
CesiumJS
  • checks if pickposition supported by the current browser
  • picks an instance from the added 3DTiles
  • returns the geographic coordinates of the pick point on the instance

checks if pickposition supported by the current browser
picks an instance from the added 3DTiles
returns the geographic coordinates of the pick point on the instance

Description :

Simple Expression :
handler.setInputAction(async function onClick(event) {
      const feature = viewer.scene.pick(event.position);
      if (Cesium.defined(feature)) {
          // calculates the coordinates here
      }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Example :
// Grant CesiumJS access to your ion assets
Cesium.Ion.defaultAccessToken = "XXX";
const viewer = new Cesium.Viewer("cesiumContainer");

try {
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(733667);
  viewer.scene.primitives.add(tileset);
  await viewer.zoomTo(tileset);

  if (!viewer.scene.pickPositionSupported) {
    console.log('This browser does not support pickPosition.');
  }

  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  // On mouse over, display all the properties for a feature in the console log.
  handler.setInputAction(async function onClick(event) {
      const feature = viewer.scene.pick(event.position);
      if (Cesium.defined(feature)) {
          const cartesian = viewer.scene.pickPosition(event.position);
          const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
          const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
          const heightString = cartographic.height.toFixed(2);
          console.log('Lon: '+longitudeString+' Lat: '+latitudeString+' h: '+heightString);
      }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
} catch (error) {
  console.log(error);
}
2025 Jan