CODEWITHSUNDEEP
cesiumjs
Emmanuel Buckshi
Emmanuel Buckshi

Reputation: 566

Cesium - Applying color filter to ImageryLayer

Has anyone attempted to do this? As far as I can tell from the documentation, there doesn't seem to be a built in function for achieving this. Does anyone know if this is possible? Is it, possibly, a feature that the authors might intend to add to the platform?

Upvotes: 1

Views: 2014

Answers (1)

emackey
emackey

Reputation: 12418

The ImageryLayer documentation shows how to control brightness, contrast, hue, saturation, and gamma correction.

To get a globe with a solid color, you can remove the imagery layers like so:

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

var globe = viewer.scene.globe;
globe.imageryLayers.removeAll();
globe.baseColor = Cesium.Color.LIGHTSLATEGRAY;

A "minimalist map" (as you mention in the comments) is something you would probably need to get from a custom imagery provider. You may want to check out Stamen Maps for some examples of this. In particular, note their "Toner" map comes in a number of sub-varieties, any of which can be selected in Cesium.

For example, to try the "Toner Background" version, you would use:

var viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayerPicker: false,
    imageryProvider: Cesium.createOpenStreetMapImageryProvider({
        url : 'https://stamen-tiles.a.ssl.fastly.net/toner-background/',
        credit : 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
    })
});

EDIT: @EmmanuelBuckski (OP) took this idea and ran with it, mixing the above two techniques together to produce a result that looks really nice! Check it out:

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

var globe = viewer.scene.globe;
globe.imageryLayers.removeAll();
globe.baseColor = Cesium.Color.fromCssColorString('#f3f3f3');

var tonerLayer = globe.imageryLayers.addImageryProvider(
    Cesium.createOpenStreetMapImageryProvider({
        url : 'https://stamen-tiles.a.ssl.fastly.net/toner-background/',
        credit : 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
    })
);
tonerLayer.alpha = 0.1;

Upvotes: 3

Related Questions