How can I change the cesium lighting setup so the tiles appear the same zoomed in and out?

CesiumJS
1

I have a sandcastle. However, a free key will be needed to make it work. The key can be obtained by going to https://www.maptiler.com/ to create a free account. Your key will then be on https://cloud.maptiler.com/account/keys/

The code is:

const osm = new Cesium.UrlTemplateImageryProvider({
   url : 'https://api.maptiler.com/maps/ch-swisstopo-lbm-dark/256/{z}/{x}/{y}.png?key=<your  key>',
});

console.log( osm.url )

const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(osm),
  baseLayerPicker: false,
  geocoder: false,
  animation: false,
  timeline: false,
  infoBox: false,
  homeButton: true,
  fullscreenButton: false,
  sceneModePicker: false,
  selectionIndicator: false,
  navigationHelpButton: false,
  terrainProvider: null,
  creditContainer: document.createElement('none'),
});

The image this produces when zoomed out is:

image

There is a light blue tint to the globe, which I don’t want. However, if I zoom in, I see:

image

which matches the tile set I am using (CH swisstopo LBM Dark).

I figure there is something about the lighting that needs to be changed so zoomed out will look the same as zoomed in, but I am not sure how to do that…?

(I want the dark zoomed in look, not the light blue when zoomed out)

2

[UPDATE 1] What has gotten me a bit closer is setting:

viewer.scene.globe.atmosphereLightIntensity = 0

which then results in the zoomed out image:

image
image643×598 71 KB

instead of a light blue, it is a light gray.

There is the bluish ring around the globe which needs to go away as well.

3

So, the answer appears to be to set:

viewer.scene.globe.showGroundAtmosphere = false;

This provides the zoomed out image of:

image
image780×769 50.3 KB

And zooming in no longer shows a distinct color shift with the drawn tiles.

There is still that blue ring around the globe that I would like to get rid of…?

4

Hi there,

The atmosphere is what making the imagery appear blue. You can disable it by setting scene.globe.showGroundAtmosphere to false.

5

Thanks. I did that and it worked. I am still getting the blue ring. Any way to get rid of it?

6

That’s the sky atmosphere, which can be disabled by setting scene.skyAtmosphere.show to false.