Hide places and boundaries tiles during transition

CesiumJS
1

Hello,

I am using ArgGIS world boundaries and places tile on top of the image layer. Code snipped below runs in the Sandcastle. Quick zooms cause the labels to look really blurry and distorted as the tile level is adjusting. I am wondering what would be the best way to hide the label layer of the tiles until transition is complete.

Thanks,

Teme

var esriLabelsLayer = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({

url: ‘//services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/’,

enablePickFeatures: false

}), {

gamma: 1.7,

minimumTerrainLevel: 3,

show: true

}

);

var esriImageLayer = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({

url: ‘//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer’,

enablePickFeatures: false

}), {

brightness: 1.2,

contrast: 1.0,

hue: 0.0,

saturation: 1.0,

gamma: 1.5,

show: true

});

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

timeline: false,

animation: false,

baseLayerPicker: false,

contextOptions: {

webgl: {

failIfMajorPerformanceCaveat: false

}

}

});

viewer.scene.imageryLayers.add(esriImageLayer);

viewer.scene.imageryLayers.add(esriLabelsLayer);

viewer.scene.globe.maximumScreenSpaceError = 1;

2

This turned out to be easier that I thought. I just had to listen to the camera move start and end events and show/hide the labels layer. It is now more graceful when it changes the label tiles.

I saw in some posts that setting maximumScreenSpaceError to 1 maybe better option for sharper label images but it appears to causes premature transitions to smaller font size label tiles that are sharper but too small to read. I am going to sticking with the Cesium’s default of 2 unless there are any other configuration options.

Just had to add highlighted code at the bottom:

var esriLabelsLayer = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({

url: ‘//services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/’,

enablePickFeatures: false

}), {

brightness: 1.2,

gamma:1.5,

minimumTerrainLevel: 4,

show: true

}

);

var esriImageLayer = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({

url: ‘//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer’,

enablePickFeatures: false

}), {

show: true,

gamma:1.3

});

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

timeline: false,

animation: false,

baseLayerPicker: false,

contextOptions: {

webgl: {

failIfMajorPerformanceCaveat: false

}

}

});

viewer.scene.imageryLayers.add(esriImageLayer);

viewer.scene.imageryLayers.add(esriLabelsLayer);

viewer.scene.globe.maximumScreenSpaceError = 2;

viewer.scene.camera.moveStart. addEventListener (function() {

esriLabelsLayer.show = false;

});

viewer.scene.camera.moveEnd.addEventListener (function() {

esriLabelsLayer.show = true;

});