How to know when the 3d terrain is loaded and available for measurements? I get Error...

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I have to get the range of the camera to 3d terrain for some functions (create labels, get radius, etc).

The problem is that if I use “camera.pickRay” too early (usually at startup) I get an error

An error occurred while rendering. Rendering has stopped.

TypeError: Cannot read property ‘x’ of undefined

TypeError: Cannot read property ‘x’ of undefined

at Function.a.subtract (https://cesiumjs.org/releases/1.61/Build/Cesium/Cesium.js:472:14500)

at Function.a.distance (https://cesiumjs.org/releases/1.61/Build/Cesium/Cesium.js:472:13973)

at Object.get range [as range] (http://localhost/360WebApp/src/map/cameraController.js:50:34)

at getLabelsFromGeoDB (http://localhost/360WebApp/src/map/labelsController.js:52:40)

at http://localhost/360WebApp/src/map/labelsController.js:21:5

at r.raiseEvent (https://cesiumjs.org/releases/1.61/Build/Cesium/Cesium.js:471:17744)

so, I should get an event or something like that when the 3d terrain is ready

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

/// Return the Cartesian3 point that is the intersection

/// of a ray from the camera to the specified x and y canvas positions

/// and the 3d terrain

function getPointFromCamera(xCanvas = null, yCanvas = null) {

const canvas = viewer.scene.canvas;

if (xCanvas === null || yCanvas === null) {

xCanvas = canvas.clientWidth / 2;

yCanvas = canvas.clientHeight / 2;

}

const ray = viewer.camera.getPickRay(new Cesium.Cartesian2(

Math.round(xCanvas), Math.round(yCanvas)

));

return point = viewer.scene.globe.pick(ray, viewer.scene);

}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I need to pick the coordinates in the center of the frame and get the camera range as soon as possible

to create labels around that point

4. The Cesium version you’re using, your operating system and browser.

1.61

2

It’s unclear exactly what resource isn’t ready there. Is the returned “ray” undefined? If so, you could check for that before continuing.

Running your code in Sandcastle, I can’t seem to get it to crash on startup. The function does return undefined when the globe hasn’t loaded, which is something your application could check for.

What kind of measurements are you working on here? There is a measurements package built on top of CesiumJS you can evaluate here:

https://cesium.com/ion-sdk/

We’re working on making it part of the ion platform in the next few months.

3

Your are right Omar, I get undefined.
I had some crashes due to the fact that I didn’t managed it.
Anyway I think that would be useful to know when the terrain is fully loaded for many reasons.

For example I’d like to show the map only when it’s completely loaded (images and 3d terrain), actually it’s not so nice to see at startup.

I think that the 3d terrain take longer to load than the imagery, so maybe an event “Cesium.createWorldTerrain.OnLoaded” could be enough.

So, is it possible to know when the 3dTerrain is loaded?

Many thanks!

4

There is a couple of ways you can monitor this. For example, this boolean on the globe will tell you whether there are any tiles still loading:

https://cesiumjs.org/Cesium/Build/Documentation/Globe.html?classFilter=globe#tilesLoaded

You can also listen for the progress event:

https://cesiumjs.org/Cesium/Build/Documentation/Globe.html?classFilter=globe#tileLoadProgressEvent

I believe this is how applications like the TerriaJS map (which is built on CesiumJS) have a progress bar at the top to show you how the scene is loading:

https://map.terria.io/

5

Thank-you very much, it work perfectly!