Replacing the background sky image in cesium app.

CesiumJS
1

Hello all, I wanted to know how to replace the background image of the night dark sky with our own image like it is done in this project http://www.agsattrack.com/.

Thanks in advance.

2

You can construct the viewer with a custom skybox pointing to file paths of your choice.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

skyBox : new Cesium.SkyBox({

sources : {

positiveX : ‘skybox_px.jpg’,

negativeX : ‘skybox_mx.jpg’,

positiveY : ‘skybox_py.jpg’,

negativeY : ‘skybox_my.jpg’,

positiveZ : ‘skybox_pz.jpg’,

negativeZ : ‘skybox_mz.jpg’

}

})

});

``

3

Thanks a lot for your help. I hope you could answer this one as well. How do I convert cartesian3d position to latitude, longitude and height? Thanks

4

Hi there,

Look at this function: http://cesiumjs.org/Cesium/Build/Documentation/Cartesian3.html?classFilter=cart#.fromDegrees

Best,

  • Rachel
5

Hey Rachel, Thanks for your help. I needed a function that does the other way round. I want longitude, latitude and height by feeding it (x,y,z) co-ordinates.

6

Ah, then this is what you need: http://cesiumjs.org/Cesium/Build/Documentation/Cartographic.html?classFilter=carto#.fromCartesian

Best,

  • Rachel
1 Like
7

Thanks a lot rachel. You seem quite proficient in cesium. Do you know how could I change the information displayed on the screen according to the time displayed in the cesium clock. For instance if someone increased the timer speed in cesium clock the representation on the cesium canvas should change accordingly. I have been able to use czml only for those models which exist in czml by default.

8

Hi there,

If I understand you correctly, what you want is time dynamic data. Fortunately, the Cesium Entity APi is designed for this. Here’s an example:
http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=c1b1ef84af7dd0b40b3102ffed164a3d

Hope that helps,

  • Rachel
1 Like
9

Thanks a lot for your help rachel. Where did you find the example that you mentioned above. I could not find it in sample demos at cesium’s sandcastle or did I miss it?

10

Hi there,

I created this custom example using Sandcastle. See our tutorial on Sandcastle for more information: http://cesiumjs.org/tutorials/Sandcastle-Tutorial/

In the future, it’s easiest to share code by saving your Sandcastle snippets a gist using the Share button.

Best,

  • Rachel
1 Like
11

Thanks a lot for your continuos support Rachel. I have now run into some other problem. I want to change the pause icon into a play button when it is clicked. I could not find the image source of the pause icon and I am assuming it is transformed from CSS. How do I implement such that when the pause button is clicked in the Cesium’s clock its icon changes into a play button and vice versa? Thanks in advance.

12

Hi,

Checkout Animation.css : https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Source/Widgets/Animation

Best,

  • Rachel
13

het rachel how do I trigger the Today(Real time) button located just above the clock. I retrieved the element using javascript and fired the .click() function but does not seem to work. Is there any in-built function so that the cesium application will automatically locate towards current time when the user opens the app.

14

Hello,

Opening a Cesium application should automatically default to the current time, unless you’ve specified otherwise. If you want, you can create a new Clock (https://cesiumjs.org/Cesium/Build/Documentation/Clock.html) object and set the current time to now. Then pass the clock to the clockViewModel like this:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

clockViewModel : new Cesium.ClockViewModel(clock)

});

See the Clock Sandcastle Demo for a thorough example: https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Clock.html&label=All

Thanks, I hope that helps!

Gabby

1 Like
15

Yes it did help, Thanks alot. What I did was, instead of creating clock I just assigned the “Time now” directly to the current time property of whatever clock there was by default.

16

Sounds good, I’m glad you were able to resolve your issue!

17

Hi,
I have used the same code above but the background is not changing. For image i have used multiple copies of the same image and gave it name as in the above code. Please advice on how to select an image or do i have to make some changes or there are some rules on selecting an image for Skybox.

18

Is this the code you used?

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

skyBox : new Cesium.SkyBox({

   sources : {

     positiveX : 'skybox_px.jpg',

     negativeX : 'skybox_mx.jpg',

     positiveY : 'skybox_py.jpg',

     negativeY : 'skybox_my.jpg',

     positiveZ : 'skybox_pz.jpg',

     negativeZ : 'skybox_mz.jpg'

   }

})

});

``

Have you checked the browser console to see if you’re getting any errors? Where is the image coming from? Can you post your code here so I can take a look?

19

Hi @omar , I used the above code and background didn’t change too. I saw errors like

[.WebGL-0000666C02477100] GL_INVALID_OPERATION: Must have element array buffer bound.
WebGL: INVALID_OPERATION: drawElements: no valid shader program in use

My codes are

let background_img = "https://storage.googleapis.com/portal_assets/square_white_background.jpg";
if (scene.globe.show) {
scene.globe.show = false;
viewerOptions['skyBox'] = new Cesium.SkyBox({
  sources: {
    positiveX: background_img,
    negativeX: background_img,
    positiveY: background_img,
    negativeY: background_img,
    positiveZ: background_img,
    negativeZ: background_img
  }
});
viewer = new Cesium.Viewer("cesiumContainer", viewerOptions);

There’re other config in viewerOptions which proved working before.
Appreciated if you guys can help @Shehzan_Mohammed @Matt_Boyd-Surka

20

Hi @AndyGuo,

in my opinion the error message has nothing to do with the background not changing. I tried your url / image and I’m getting CORS errors, so I tried another image instead (just one of the first bing search results) and it’s working fine in the following sandcastle:

Best, Lennart

1 Like