loading gif

CesiumJS
1

Hi,
could anyone help me how to use a loading gif while waiting to load bgltf models?

Thanks.

2

Hello,

You can display the gif in a div that overlays the whole screen. You can use when.all to fire a callback function when all of the models are loaded, and in that function set style.display = none on the overlay div to hide it.

Here’s some code to show the general idea:

var div = document.getElementById(‘gifOverlay’);
var modelArray = // [all of my model entities];

Cesium.when.all(modelArray, function(){

div.style.display = none;

});

``

Best,

Hannah

3

Thanks for help but I'm a complete beginner and I really have no idea how to use ajax-loader.gif in my code. I would be grateful for more detailed information. Here is my code.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!-- Use Chrome Frame in IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content=" ">
    <meta name="cesium-sandcastle-labels" content="Showcases">
    <title>Proměny Šantovky</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="Sandcastle/Sandcastle-header.js"></script>
    <script type="text/javascript" src="../ThirdParty/requirejs-2.1.9/require.js"></script>
    <script type="text/javascript">
    require.config({
        baseUrl : '../Source'
       });
    </script>
<style>
    @import url(Sandcastle/templates/bucket.css);
   }
</style>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="Sandcastle/templates/bucket-requirejs.html" onload="load()">

<div id="cesiumContainer" class="fullSize"></div>
<div id="toolbar">
</div>

<script id="cesium_sandcastle_script">
function startup(Cesium) {
    "use strict";
//Sandcastle_Begin

var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker : false,
infoBox : true,
selectionIndicator : true
});

var imageryLayers = viewer.imageryLayers;

var terrainProvider = new Cesium.CesiumTerrainProvider({
url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'});
viewer.terrainProvider = terrainProvider;

viewer.camera.flyTo({destination : Cesium.Cartesian3.fromDegrees(17.2581, 49.5828, 50),
orientation : {
            heading : Cesium.Math.toRadians(0),
            pitch : Cesium.Math.toRadians(-50.0),
            roll : 0.0,
            }});

Sandcastle.addToolbarMenu([{
    text: '3D MODELY'
}, {
    text : 'Přední pevnůstka 1764',
    onselect : function() {
      var position = Cesium.Cartesian3.fromDegrees(17.25827, 49.58671, 255);
      var heading = Cesium.Math.toRadians(1);
      var pitch = 0;
      var roll = 0;
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
      var model1 = viewer.entities.add({
          name : 'Přední pevnůstka v roce 1764',
          position : position,
          orientation : orientation,
          model : {
              uri: 'data/modely/1764.bgltf',
          }
      });
    }
},
    {
    text : 'Přední pevnůstka 1842',
    onselect : function() {
      var position = Cesium.Cartesian3.fromDegrees(17.25845, 49.58689, 255);
      var heading = Cesium.Math.toRadians(2);
      var pitch = 0;
      var roll = 0;
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
      var model2 = viewer.entities.add({
          name : 'Přední pevnůstka v roce 1842',
          position : position,
          orientation : orientation,
          model : {
              uri: 'data/modely/1842.bgltf',
          }
      });
    }
},
    {
    
    text : 'MILO Olomouc 1953',
    onselect : function() {
      var position = Cesium.Cartesian3.fromDegrees(17.2583, 49.5871, 255);
      var heading = Cesium.Math.toRadians(2);
      var pitch = 0;
      var roll = 0;
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
      var model3 = viewer.entities.add({
          name : 'Průmyslový závod MILO Olomouc v roce 1953',
          position : position,
          orientation : orientation,
          model : {
              uri: 'data/modely/1953.bgltf',
          }
       });
    }
},
    {
    text : 'MILO Olomouc 2003',
    onselect : function() {
      var position = Cesium.Cartesian3.fromDegrees(17.2583, 49.5871, 255);
      var heading = Cesium.Math.toRadians(2);
      var pitch = 0;
      var roll = 0;
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
      var model4 = viewer.entities.add({
          name : 'Průmyslový závod MILO Olomouc v roce 2003',
          position : position,
          orientation : orientation,
          model : {
              uri: 'data/modely/2003.bgltf',
          }
        });
      }
},
    {
    text : 'Galerie Šantovka 2015',
    onselect : function() {
      var position = Cesium.Cartesian3.fromDegrees(17.2580, 49.58705, 255);
      var heading = Cesium.Math.toRadians(2);
      var pitch = 0;
      var roll = 0;
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
      var model28 = viewer.entities.add({
          name : 'Současné obchodní centrum Galerie Šantovka',
          position : position,
          orientation : orientation,
          model : {
              uri: 'data/modely/santovka.bgltf',
          }
      });
}}]);

//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
    startup(Cesium);
} else if (typeof require === "function") {
    require(["Cesium"], startup);
}

</script>

</body>
</html>