The Imagery selected is not shown when reload... Instead the default one

CesiumJS
1

Hi Everyone,
I want to perform Imagery selection so that the imagery the user selected, that imagery will be used when the website reloaded or the a new window is opened.my code is found below…

var imageryViewModels = ;
imageryViewModels.push(new Cesium.ProviderViewModel({
name : ‘Open\u00adStreet\u00adMap’,
iconUrl : Cesium.buildModuleUrl(‘Widgets/Images/ImageryProviders/openStreetMap.png’),
tooltip : ‘OpenStreetMap (OSM) is a collaborative project to create a free editable
map of the world.\nhttp://www.openstreetmap.org’,
creationFunction : function() {
return Cesium.createOpenStreetMapImageryProvider({
url : ‘https://a.tile.openstreetmap.org/’
});
}
}));

imageryViewModels.push(new Cesium.ProviderViewModel({
name : ‘Black Marble’,
iconUrl : Cesium.buildModuleUrl(‘Widgets/Images/ImageryProviders/blackMarble.png’),
tooltip : ‘The lights of cities and villages trace the outlines of civilization
in this global view of the Earth at night as seen by NASA/NOAA’s Suomi NPP satellite.’,
creationFunction : function() {
return Cesium.createTileMapServiceImageryProvider({
url : ‘https://cesiumjs.org/blackmarble’,
credit : ‘Black Marble imagery courtesy NASA Earth Observatory’,
flipXY : true
});
}
}));

imageryViewModels.push(new Cesium.ProviderViewModel({
name : ‘Natural Earth\u00a0II’,
iconUrl : Cesium.buildModuleUrl(‘Widgets/Images/ImageryProviders/naturalEarthII.png’),
tooltip : ‘Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/’,
creationFunction : function() {
return Cesium.createTileMapServiceImageryProvider({
url : Cesium.buildModuleUrl(‘Assets/Textures/NaturalEarthII’)
});
}
}));

//Create a CesiumWidget without imagery, if you haven’t already done so.
var cesiumWidget = new Cesium.CesiumWidget(‘cesiumContainer’, { imageryProvider: false });

//Finally, create the baseLayerPicker widget using our view models.
var layers = cesiumWidget.imageryLayers;
var baseLayerPicker = new Cesium.BaseLayerPicker(‘baseLayerPickerContainer’, {
globe : cesiumWidget.scene.globe,
imageryProviderViewModels : imageryViewModels
});

this.selectedImagery = undefined;
var selectedImageryViewModel = knockout.observable();

    this._currentImageryProviders = [];
    knockout.defineProperty(this, 'selectedImagery', {
        get : function() {
            return selectedImageryViewModel();
        },
        set : function(value) {
            if (selectedImageryViewModel() === value) {
                this.dropDownVisible = false;
                return;
            }

            var i;
            var currentImageryProviders = this._currentImageryProviders;
            var currentImageryProvidersLength = currentImageryProviders.length;
            var imageryLayers = this._globe.imageryLayers;
            for (i = 0; i < currentImageryProvidersLength; i++) {
                var layersLength = imageryLayers.length;
                for ( var x = 0; x < layersLength; x++) {
                    var layer = imageryLayers.get(x);
                    if (layer.imageryProvider === currentImageryProviders[i]) {
                        imageryLayers.remove(layer);
                        break;
                    }
                }
            }

            if (defined(value)) {
                var newProviders = value.creationCommand();
                if (isArray(newProviders)) {
                    var newProvidersLength = newProviders.length;
                    for (i = newProvidersLength - 1; i >= 0; i--) {
                        imageryLayers.addImageryProvider(newProviders[i], 0);
                    }
                    this._currentImageryProviders = newProviders.slice(0);
                } else {
                    this._currentImageryProviders = [newProviders];
                    imageryLayers.addImageryProvider(newProviders, 0);
                }
            }
            selectedImageryViewModel(value);
            this.dropDownVisible = false;
        }
    });





can you please help me??

Thank you

abdullah
2

Hi Abdullah,

There’s no way to save information about what base layer is selected with Cesium itself between refreshes. You will need to do so as part of your application.

Thanks,

Gabby

3

Does cookies(javascript) help in this task???

4

Cookies are one way of having data persist between session, but you’ll probably get a better response if you ask this question to a more general forum like Stack Overflow.

5

Hi Gabby,
I think I managed to perform the selection of imagery when reloaded… Here is my code below…

Console @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }

Th Result is successful, if i select one of the images and when I reloaded or close and open the browser, that selection image is shown rather than the default image…

Is my coding correct or do I need to improve it???

Which one do I need to improve it??