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

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