How to make a loading screen that is removed when base layer is loaded?

Hello Cesium community,

I am working on a small web app using Cesium, but I am concerned that new users may be frustrated by the time it takes to load base layer imagery. Users may also be confused by what they see on the screen until the imagery is loaded in detail.

The app is simple: it zooms down to focus on a large building, and a small number of primitives are loaded over this building. However at this level of zoom, it takes time for the Bing imagery to load all the tiles in sufficient detail.

This app currently does have a loading screen. It's simply a <div> with the id "loadingScreen" that is hidden by the script when the camera has settled:

viewer.camera.moveEnd.addEventListener(function() {
Ā Ā Ā Ā // the camera stopped moving
Ā Ā Ā Ā document.getElementById('loadingScreen').style.display = 'none';
});

Of course the problem here is the camera settles way before the imagery has loaded.

Is there a similar implementation that I can use, but that listens for when the imagery has been fully loaded? I couldn't find anything in the documentation under ImageryLayer or ImageryProvider, or here in the forums, but maybe I'm not looking for the right thing. Any help is greatly appreciated.

Hello,

There isnā€™t currently a way to tell when tiles have loaded at a certain level.

Improving imagery loading is something thatā€™s on our radar, but itā€™s a pretty difficult problem to solve. After we finish our 3D tiles implementation, we might go back and take a closer look at some of these kinds of issues.

Best,

Hannah

Take a look at tileLoadProgressEvent:
http://cesiumjs.org/Cesium/Build/Documentation/Globe.html?classFilter=Globe#tileLoadProgressEvent

When that event is raised with the value 0, the terrain and imagery have loaded completely for the current view.

Kevin

1 Like

tileLoadProgressEvent example:
<code>
var helper = new Cesium.EventHelper();
helper.add(viewer.scene.globe.tileLoadProgressEvent, function (event) {
console.log("Tiles to load: " + event);
if (event == 0) {
//loading screen display=none
}
});
</code>
I'm sure you can do better, but I could find no useful examples in the documentation.

Derek

Hiļ¼ŒI add more than one imageryLayer to imageryLayers,I want to know the particular imageryLayer has been loaded. Is there any good way?

åœØ 2016幓5꜈12ę—„ę˜ŸęœŸå›› UTC+8äøŠåˆ10:17:48ļ¼ŒKevin Ring写道ļ¼š

The ImageryProvider.ready property for the provider you pass to create the layer will be true when ready.

Take a look at tileLoadProgressEvent:
http://cesiumjs.org/Cesium/Build/Documentation/Globe.html?classFilter=Globe#tileLoadProgressEvent

When that event is raised with the value 0, the terrain and imagery have loaded completely for the current view.

Kevin

Hello,

There isnā€™t currently a way to tell when tiles have loaded at a certain level.

Improving imagery loading is something thatā€™s on our radar, but itā€™s a pretty difficult problem to solve. After we finish our 3D tiles implementation, we might go back and take a closer look at some of these kinds of issues.

Best,

Hannah

Hello Cesium community,
I am working on a small web app using Cesium, but I am concerned that new users may be frustrated by the time it takes to load base layer imagery. Users may also be confused by what they see on the screen until the imagery is loaded in detail.

The app is simple: it zooms down to focus on a large building, and a small number of primitives are loaded over this building. However at this level of zoom, it takes time for the Bing imagery to load all the tiles in sufficient detail.

This app currently does have a loading screen. Itā€™s simply a

with the id ā€œloadingScreenā€ that is hidden by the script when the camera has settled:

viewer.camera.moveEnd.addEventListener(function() {
// the camera stopped moving
document.getElementById(ā€˜loadingScreenā€™).style.display = ā€˜noneā€™;
});

Of course the problem here is the camera settles way before the imagery has loaded.

Is there a similar implementation that I can use, but that listens for when the imagery has been fully loaded? I couldnā€™t find anything in the documentation under ImageryLayer or ImageryProvider, or here in the forums, but maybe Iā€™m not looking for the right thing. Any help is greatly appreciated.

ā€“

You received this message because you are subscribed to the Google Groups ā€œcesium-devā€ group.

To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

ā€“
www.kotachrome.com/kevin

Hiļ¼ŒI add more than one imageryLayer to imageryLayers,I want to know the particular imageryLayer has been loaded. Is there any good way?

åœØ 2016幓5꜈12ę—„ę˜ŸęœŸå›› UTC+8äøŠåˆ10:17:48ļ¼ŒKevin Ring写道ļ¼š

The ImageryProvider.ready property for the provider you pass to create the layer will be true when ready.

The ImageryProvider.ready property for the SingleTileImageryProvider is true when the image is loaded,Is there any property or function which can determine all tiles draw completely on globe?

åœØ 2018幓2꜈10ę—„ę˜ŸęœŸå…­ UTC+8äøŠåˆ12:27:50ļ¼ŒGabby Getz写道ļ¼š

If you just need to check when the globe tiles are all ready after you add that layer, you can use Kevinā€™s solution:

Take a look at tileLoadProgressEvent:
http://cesiumjs.org/Cesium/Build/Documentation/Globe.html?classFilter=Globe#tileLoadProgressEvent
When that event is raised with the value 0, the terrain and imagery have loaded completely for the current view.

Thanks,

Gabby

Gabby,

How would you recommend accomplishing the same thing with an older version of cesium? Iā€™m stuck on 1.7.1 for the next few weeks.

Thanks,

Jody

Thatā€™s a pretty old version! Taking a look at just the documentation, I canā€™t find anything immediately that would be equivalent. If you have access to the source, I would suggest looking at the Globe class and its associated members, like Globe._surface. Thatā€™s where the loading queue is located, so you could watch those and wait for it to empty.

yeah, Iā€™m trying to get an update installed. I saw the globe class.

thank you!!

Jody

Hi Kevin:
Can I get tile loading progress in UnrealEngine?
I want make a progress bar to show progress on my loading panel.
But I canā€™t find any function or variable can get this value in CesiumUnrealPlugin.

image
image
image

Thanks!

We have an open PR to add that feature:

It should be included in the next release in early August.

Kevin