Different imagery providers for different levels

I want to show bing map on high levels, and show open street map on low levels.

Can anyone tell me how to implement it?

I have tried by setting max levels and min levels for each layers, but it doesn’t work.

I also want to change the transparency of each layers, but I can barely find a way to get “level” of current view.


Transparency is controlled on the imageryLayer, which is made from an imageryProvider

Sure, but you know, I need to know when I change the Transparency, which means I need a so-called “level” thing to trigger the changing transparency event.


Can anyone help?

This is pretty non-obvious and should be made easier, but here’s a complete example that does what you want (you can paste it into Sandcastle). The key is constructing the ImagerLayer with the correct minimumTerrainLevel and maximumTerrainLevel options.

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

baseLayerPicker : false


var bingProvider = new Cesium.BingMapsImageryProvider({

url : ‘//dev.virtualearth.net’,

mapStyle : Cesium.BingMapsStyle.AERIAL


var osmProvider = new Cesium.OpenStreetMapImageryProvider({

url : ‘//a.tile.openstreetmap.org/


var layers = viewer.imageryLayers;


var bingLayer = layers.add(new Cesium.ImageryLayer(bingProvider, {

maximumTerrainLevel : 6


var osmLayer = layers.add(new Cesium.ImageryLayer(osmProvider, {

minimumTerrainLevel : 7