I’m running into this odd bug where when I add a .png file to cesium while there is an imagery drop down menu…when I select a basemap on the drop down, it confuses the imagery layer index and causes odd things to happen in the layer selection menu:
Try this in the sandbox (it adds a random png file as overlay) and then change the Bing Maps drop down to another basemap:
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
baseLayerPicker : false
});
var imageryLayers = viewer.scene.imageryLayers;
var viewModel = {
layers : ,
baseLayers : ,
upLayer : null,
downLayer : null,
selectedLayer : null,
isSelectableLayer : function(layer) {
return baseLayers.indexOf(layer) >= 0;
},
raise : function(layer, index) {
imageryLayers.raise(layer);
viewModel.upLayer = layer;
viewModel.downLayer = viewModel.layers[Math.max(0, index - 1)];
updateLayerList();
window.setTimeout(function() { viewModel.upLayer = viewModel.downLayer = null; }, 10);
},
lower : function(layer, index) {
imageryLayers.lower(layer);
viewModel.upLayer = viewModel.layers[Math.min(viewModel.layers.length - 1, index + 1)];
viewModel.downLayer = layer;
updateLayerList();
window.setTimeout(function() { viewModel.upLayer = viewModel.downLayer = null; }, 10);
},
canRaise : function(layerIndex) {
return layerIndex > 0;
},
canLower : function(layerIndex) {
return layerIndex >= 0 && layerIndex < imageryLayers.length - 1;
}
};
Cesium.knockout.track(viewModel);
var baseLayers = viewModel.baseLayers;
function setupLayers() {
// Create all the base layers that this example will support.
// These base layers aren’t really special. It’s possible to have multiple of them
// enabled at once, just like the other layers, but it doesn’t make much sense because
// all of these layers cover the entire globe and are opaque.
addBaseLayerOption(
‘Bing Maps Aerial’,
undefined); // the current base layer
addBaseLayerOption(
‘Bing Maps Road’,
new Cesium.BingMapsImageryProvider({
url: ‘//dev.virtualearth.net’,
mapStyle: Cesium.BingMapsStyle.ROAD
}));
addBaseLayerOption(
‘ArcGIS World Street Maps’,
new Cesium.ArcGisMapServerImageryProvider({
url : '//[server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'](http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer')
}));
addBaseLayerOption(
‘OpenStreetMaps’,
new Cesium.OpenStreetMapImageryProvider());
addBaseLayerOption(
‘MapQuest OpenStreetMaps’,
new Cesium.OpenStreetMapImageryProvider({
url: '//[otile1-s.mqcdn.com/tiles/1.0.0/osm/'](http://otile1-s.mqcdn.com/tiles/1.0.0/osm/')
}));
addBaseLayerOption(
‘Stamen Maps’,
new Cesium.OpenStreetMapImageryProvider({
url: ‘//stamen-tiles.a.ssl.fastly.net/watercolor/’,
fileExtension: ‘jpg’,
credit: ‘Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.’
}));
addBaseLayerOption(
‘Natural Earth II (local)’,
new Cesium.TileMapServiceImageryProvider({
url : require.toUrl(‘Assets/Textures/NaturalEarthII’)
}));
addBaseLayerOption(
‘USGS Shaded Relief (via WMTS)’,
new Cesium.WebMapTileServiceImageryProvider({
url : '[http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS'](http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS'),
layer : ‘USGSShadedReliefOnly’,
style : ‘default’,
format : ‘image/jpeg’,
tileMatrixSetID : ‘default028mm’,
maximumLevel: 19,
credit : new Cesium.Credit(‘U. S. Geological Survey’)
}));
// Create the additional layers
addAdditionalLayerOption(
‘United States GOES Infrared’,
new Cesium.WebMapServiceImageryProvider({
url : '//[mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?'](http://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?'),
layers : ‘goes_conus_ir’,
credit : ‘Infrared data courtesy Iowa Environmental Mesonet’,
parameters : {
transparent : ‘true’,
format : ‘image/png’
},
proxy : new Cesium.DefaultProxy(’/proxy/’)
}));
addAdditionalLayerOption(
‘United States Weather Radar’,
new Cesium.WebMapServiceImageryProvider({
url : '//[mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?'](http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?'),
layers : ‘nexrad-n0r’,
credit : ‘Radar data courtesy Iowa Environmental Mesonet’,
parameters : {
transparent : ‘true’,
format : ‘image/png’
},
proxy : new Cesium.DefaultProxy(’/proxy/’)
}));
addAdditionalLayerOption(
‘TileMapService Image’,
new Cesium.TileMapServiceImageryProvider({
url : ‘…/images/cesium_maptiler/Cesium_Logo_Color’
}),
0.2);
addAdditionalLayerOption(
‘Single Image’,
new Cesium.SingleTileImageryProvider({
url : ‘…/images/Cesium_Logo_overlay.png’,
rectangle : Cesium.Rectangle.fromDegrees(-115.0, 38.0, -107, 39.75)
}),
1.0);
addAdditionalLayerOption(
‘Grid’,
new Cesium.GridImageryProvider(), 1.0, false);
addAdditionalLayerOption(
‘Tile Coordinates’,
new Cesium.TileCoordinatesImageryProvider(), 1.0, false);
}
function addBaseLayerOption(name, imageryProvider) {
var layer;
if (typeof imageryProvider === ‘undefined’) {
layer = imageryLayers.get(0);
viewModel.selectedLayer = layer;
} else {
layer = new Cesium.ImageryLayer(imageryProvider);
}
layer.name = name;
baseLayers.push(layer);
}
function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
var layer = imageryLayers.addImageryProvider(imageryProvider);
layer.alpha = Cesium.defaultValue(alpha, 0.5);
layer.show = Cesium.defaultValue(show, true);
layer.name = name;
Cesium.knockout.track(layer, [‘alpha’, ‘show’, ‘name’]);
}
function updateLayerList() {
var numLayers = imageryLayers.length;
viewModel.layers.splice(0, viewModel.layers.length);
for (var i = numLayers - 1; i >= 0; --i) {
viewModel.layers.push(imageryLayers.get(i));
}
}
setupLayers();
updateLayerList();
var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
url : '//[cesiumjs.org/blackmarble'](http://cesiumjs.org/blackmarble'),
maximumLevel : 8,
credit : ‘Black Marble imagery courtesy NASA Earth Observatory’
}));
blackMarble.alpha = 0.5;
blackMarble.brightness = 2.0;
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : ‘…/images/Cesium_Logo_overlay.png’,
rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));
//Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById(‘toolbar’);
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout.getObservable(viewModel, ‘selectedLayer’).subscribe(function(baseLayer) {
// Handle changes to the drop-down base layer selector.
var activeLayerIndex = 0;
var numLayers = viewModel.layers.length;
for (var i = 0; i < numLayers; ++i) {
if (viewModel.isSelectableLayer(viewModel.layers[i])) {
activeLayerIndex = i;
break;
}
}
var activeLayer = viewModel.layers[activeLayerIndex];
var show = activeLayer.show;
var alpha = activeLayer.alpha;
imageryLayers.remove(activeLayer, false);
imageryLayers.add(baseLayer, numLayers - activeLayerIndex - 1);
baseLayer.show = show;
baseLayer.alpha = alpha;
updateLayerList();
});