4、Cesium学习之调整图层顺序

1、实例

//绑定地图容器
var viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayerPicker: false,//禁用底图切换
});
//获取图层列表集合
var imageryLayers = viewer.imageryLayers;

//创建一个对象，其属性是接下来要用到的一些参数、变量、函数，这样既美观也方便查找
var viewModel = {
  //图层列表集合
  layers: [],
  //底图图层集合
  baseLayers: [],
  //顺序上调的图层(图层索引减少1)
  upLayer: null,
  //顺序下调的图层(图层索引增加1)
  downLayer: null,
  //被选中的图层
  selectedLayer: null,
  //输入一个图层，返回该图层是否在底图列表中
  isSelectableLayer: function (layer) {
    return this.baseLayers.indexOf(layer) >= 0;
  },
  //将某图层上调一个位置，index是该图层的原始索引
  raise: function (layer, index) {
  	//图层列表集合的raise方法
  	//参数只有一个，类型是layer类型,作用：图层顺序上升一个位置，图层索引减1
    imageryLayers.raise(layer);
    //上调的图层
    viewModel.upLayer = layer;
    //被上调的图层所替代的图层，（上调图层原来索引是2，因为他上调了，现在他的索引是1了，那么原来索引为1的图层，就要被下调了，即交换二者的位置）
    viewModel.downLayer = viewModel.layers[Math.max(0, index - 1)];
    updateLayerList();
    window.setTimeout(function () {
      viewModel.upLayer = viewModel.downLayer = null;
    }, 10);
  },
  //将某图层下调一个位置，index是该图层的原始索引
  lower: function (layer, index) {
  	//图层列表集合的lower方法
  	//参数只有一个，类型是layer类型,作用：图层顺序下降一个位置，图层索引加1
    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);
  },
  //输入一个图层索引，返回值为bool，判断这个图层是不是最顶层（图层索引为0）的图层，即还能不能再上调了
  canRaise: function (layerIndex) {
    return layerIndex > 0;
  },
  //输入一个图层索引，返回值为bool，判断这个图层是不是最底层的图层，即还能不能再下调了
  canLower: function (layerIndex) {
    return layerIndex >= 0 && layerIndex < imageryLayers.length - 1;
  },
};
var baseLayers = viewModel.baseLayers;

Cesium.knockout.track(viewModel);
//将图层挂载到视图上，即视图初始化
function setupLayers() {
	
  addBaseLayerOption("Bing Maps Aerial", undefined); // the current base layer
  addBaseLayerOption(
    "Bing Maps Road",
    Cesium.createWorldImagery({
      style: Cesium.IonWorldImageryStyle.ROAD,
    })
  );
  //ArcGisMapServerImageryProvider是ImageryProvider的字类
  //作用：提供由ArcGIS地图服务器托管的平铺图像。默认情况下，使用服务器的预缓存磁贴（如果可用）
  //参数是一个对象,键名：
  //1、url：Resource或String类型，ArcGIS MapServer服务的URL
  //2、token：String类型，可选参数,用于通过ArcGIS MapServer服务进行身份验证的ArcGIS令牌
  //3、tileDiscardPolicy：TileDiscardPolicy类型，可选参数，确定磁贴是否无效并应丢弃的策略。如果未指定此值，则默认的DiscardMissingTileImagePolicy用于平铺地图服务器，而NeverTileDiscardPolicy用于非平铺地图服务器。在前一种情况下，我们在最大平铺级别请求平铺0,0，并检查像素（0,0）、（200,20）、（20200）、（80110）和（160130）。如果所有这些像素都是透明的，则放弃检查将被禁用，并且不会放弃任何平铺。如果其中任何一个具有非透明颜色，则丢弃这些像素位置中具有相同值的任何平铺。这些默认值的最终结果应该是标准ArcGIS服务器的正确磁贴丢弃。若要确保不丢弃任何平铺，请为此参数构造并传递NeverTileDiscardPolicy
  //4、usePreCachedTilesIfAvailable：bool类型，可选参数,默认值为true，如果为true，则使用服务器的预缓存磁贴（如果可用）。如果为false，则忽略任何预缓存的磁贴，并使用“导出”服务
  //5、layers:String类型,可选参数，要显示的层的逗号分隔列表，如果要显示所有层，则未定义
  //6、enablePickFeatures：bool类型，可选参数，默认值true，如果为true，ArcGisMapServerImageryProvider#pickFeatures将调用MapServer上的Identify服务并返回响应中包含的功能。如果为false，ArcGisMapServerImageryProvider#pickFeatures将立即返回未定义（表示没有可拾取的功能），而不与服务器通信。如果不希望此提供程序的功能可拾取，请将此属性设置为false。可以通过设置对象的ArcGisMapServerImageryProvider#enablePickFeatures属性来覆盖
  //7、rectangle：Rectangle类型，可选参数，默认值Rectangle.MAX_VALUE,图层的矩形，访问平铺层时忽略此参数
  //8、tilingScheme:TilingScheme类型，可选参数，默认值new GeographicTilingScheme()，用于将世界划分为瓷砖的瓷砖方案。访问平铺服务器时忽略此参数
  //9、ellipsoid:Ellipsoid类型，可选参数，椭球体。如果指定并使用了平铺方案，则将忽略此参数，而是使用平铺方案的椭球体。如果两个参数都未指定，则使用WGS84椭球体
  //10、credit：Credit或String类型，可选参数，图层的元数据信息
  //11、tileWidth：Number类型，可选参数，默认值256，每个平铺的宽度（像素）。访问平铺服务器时忽略此参数
  //12、tileHeight:Number类型，可选参数，默认值256，每个平铺的高度（像素）。访问平铺服务器时忽略此参数
  //13、maximumLevel：Number类型，可选参数,要请求的最大金字塔级别，如果没有最大值，则未定义。访问平铺服务器时忽略此参数。
  addBaseLayerOption(
    "ArcGIS World Street Maps",
    new Cesium.ArcGisMapServerImageryProvider({
      url:
        "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
    })
  );
  //OpenStreetMapImageryProvider是ImageryProvider的一个字类
  //添加OpenStreet的图像图层
  //参数是一个对象
  //1、url：String类型，可选参数，默认值'https://a.tile.openstreetmap.org'，OpenStreetMap服务的地址
  //2、fileExtension：String类型，可选参数,默认值'png'，服务器上图像的文件扩展名
  //3、rectangle：Rectangle类型，可选参数，默认值Rectangle.MAX_VALUE,图层的矩形范围
  //4、minimumLevel:Number类型，可选参数，默认值0，图像提供程序支持的最低细节级别
  //5、maximumLevel：Number类型，可选参数，图像提供程序支持的最高级别，如果没有限制，则未定义
  //6、ellipsoid:Ellipsoid类型，可选参数，椭球体。如果指定并使用了平铺方案，则将忽略此参数，而是使用平铺方案的椭球体。如果两个参数都未指定，则使用WGS84椭球体
  //7、credit
  addBaseLayerOption(
    "OpenStreetMaps",
    new Cesium.OpenStreetMapImageryProvider()
  );
  addBaseLayerOption(
    "Stamen Maps",
    new Cesium.OpenStreetMapImageryProvider({
      url: "https://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.",
    })
  );
  //TileMapServiceImageryProvider是ImageryProvider的子类
  //提供由MapTiler、GDAL2Tiles等生成的平铺图像的图像提供者
  //1、url：Resource或String或Promise，可选参数，默认值'.'，服务器上图像分幅的路径
  //2、fileExtension：String类型，可选参数，默认值'png'，服务器上图像的文件扩展名
  //3、credit
  //4、minimumLevel
  //5、maximumLevel
  //6、rectangle
  //7、tilingScheme
  //8、ellipsoid
  //9、tileWidth
  //10、tileHeight
  //11、flipXY:bool类型，可选参数,gdal2的旧版本瓷砖.py翻转的X和Y值tilemapresource.xml文件. 指定此选项将执行相同的操作，允许加载这些不正确的平铺集
  addBaseLayerOption(
    "Natural Earth II (local)",
    new Cesium.TileMapServiceImageryProvider({
      url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
    })
  );
  //WebMapTileServiceImageryProvider是ImageryProvider的一个子类
  //提供WMTS 1.0.0兼容服务器提供的平铺图像。此提供程序支持HTTP KVP编码和RESTful GetTile请求，但还不支持SOAP编码
  //1、url:Resource或String类型，WMTS GetTile操作的基本URL（对于KVP编码的请求）或tile URL模板（对于RESTful请求）。平铺URL模板应包含以下变量：{style}、{TileMatrix}、{TileMatrix}、{TileRow}、{TileCol}。如果实际值是硬编码的或服务器不需要，那么前两个是可选的。{s}关键字可用于指定子域
  //2、format:String类型，可选参数，默认值'image/jpeg'，要从服务器检索的图像的MIME类型
  //3、layer:String类型，WMTS服务的图层名称
  //4、style:String类型，WMTS请求的样式名称。
  //5、tileMatrixSetID：String类型，用于WMTS请求的tileMatrix集的标识符
  //6、tileMatrixLabels：Array类型，可选参数，TileMatrix中用于WMTS请求的标识符列表，每个TileMatrix级别一个。
  //7、clock：Clock类型，可选参数，确定时间维度值时使用的时钟实例。指定“times”时需要
  //8、times:TimeIntervalCollection类型，可选参数，TimeIntervalCollection的数据属性是包含时间动态维度及其值的对象。
  //9、dimensions：Object类型，可选参数，包含静态维度及其值的对象
  //10、tileWidth
  //11、tileHeight
  //12、tilingScheme
  //13、rectangle
  //14、minimumLevel
  //15、maximumLevel
  //16、ellipsoid
  //17、credit
  //18、subdomains:String或Array，可选类型，默认值'abc'，用于URL模板中{s}占位符的子域。如果此参数是单个字符串，则字符串中的每个字符都是子域。如果是数组，那么数组中的每个元素都是子域
  addBaseLayerOption(
    "USGS Shaded Relief (via WMTS)",
    new Cesium.WebMapTileServiceImageryProvider({
      url:
        "https://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS",
      layer: "USGSShadedReliefOnly",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "default028mm",
      maximumLevel: 19,
      credit: "U. S. Geological Survey",
    })
  );

  // Create the additional layers
  addAdditionalLayerOption(
    "United States GOES Infrared",
    new Cesium.WebMapServiceImageryProvider({
      url:
        "https://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",
      },
    })
  );
  addAdditionalLayerOption(
    "United States Weather Radar",
    new Cesium.WebMapServiceImageryProvider({
      url:
        "https://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",
      },
    })
  );
  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
  );
  //GridImageryProvider是ImageryProvider的一个子类
  //一个ImageProvider，它在每个具有可控背景和光晕的平铺上绘制线框网格。对于自定义渲染效果或调试地形可能很有用
  //参数是一个对象
  //1、tilingScheme
  //2、ellipsoid
  //3、cells:Number类型，可选参数，默认值8，网格单元数
  //4、color:Color类型，可选参数，默认值Color(1,1,1,0.4),绘制网格线的颜色
  //5、glowColor:Color类型，可选参数，默认值Color(1,1,1,0.5)，为网格线绘制辉光的颜色
  //6、glowWidth：Number，可选参数,默认值6，用于渲染线辉光效果的线的宽度
  //7、backgroundColor:Color，可选参数，默认值Color(1,1,1,0.5)，背景颜色
  //8、tileWidth
  //9、tileHeight
  //10、canvasSize:Number类型，可选参数，默认值256，用于渲染的画布的大小
  addAdditionalLayerOption(
    "Grid",
    new Cesium.GridImageryProvider(),
    1.0,
    false
  );
  //TileCoordinatesImageryProvider是ImageryProvider的一个子类
  //参数是一个对象
  //一种ImageProvider，它在平铺方案中的每个渲染平铺周围绘制一个框，并在框内绘制一个标签，指示平铺的X、Y、Level坐标。这对于调试地形和图像渲染问题非常有用
  //1、tilingScheme
  //2、ellipsoid
  //3、color：Color类型，可选参数，默认值Color.YELLOW,绘制平铺框和标签的颜色
  //4、tileWidth
  //5、tileHeight
  addAdditionalLayerOption(
    "Tile Coordinates",
    new Cesium.TileCoordinatesImageryProvider(),
    1.0,
    false
  );
}
//添加底图
//name:图层名称,imageryProvider：图层加载函数
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);
}
//添加附加图层
//name:图层名称，imageryProvider,alpha:透明度，show：图层可见性
function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
  var layer = imageryLayers.addImageryProvider(imageryProvider);
  //defaultValue(a,b)
  //如果未定义，则返回第一个参数，否则返回第二个参数。用于设置参数的默认值
  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();

//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();
  });

2、亲测

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Widgets/widgets.css"
        rel="stylesheet">
    <style>
        html,
        body,
        #container {
            height: 100%;
        }

        .text {
            width: 30px;
        }

        span {
            width: 230px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div style="position: fixed;z-index: 2000;background-color: rgba(255, 255, 255, 0.5);">
            <div>
                <input type="checkbox" checked id="isSelected" onchange="baseLayerIsShow(this)">
                <select id="selection" onchange="selectChange(this)">
                    <option value="ArcGIS World Street Maps">ArcGIS World Street Maps</option>
                    <option selected value="Bing Maps Aerial"> Bing Maps Aerial</option>
                    <option value="Bing Maps Road"> Bing Maps Road</option>
                    <option value="Open Street Maps">Open Street Maps</option>
                    <option value="Stamen Maps">Stamen Maps</option>
                    <option value="Natural Earth II (local)">Natural Earth II (local)</option>
                    <option value="USGS Shaded Relief (via WMTS)">USGS Shaded Relief (via WMTS)</option>
                </select>
                <input type="range" id="selectionRange" min="0" max="1" step="0.1" value="1"
                    onchange="baseLayerAlpha(this)"><button id="up">上</button><button id="down">下</button>图层索引：<input
                    type="text" id="selectionText" value="1" class="text">
            </div>
            <div style="display: flex;">
                <input type="checkbox" checked id="isGrid"><span>Grid</span> <input type="range" id="gridRange" min="0"
                    max="1" step="0.1" value="1">
            </div>
            <div style="display: flex;">
                <input type="checkbox" checked id="isTileCoordinates">
                <span>Tile Coordinates</span> <input type="range" id="tileCoordinatesRange" min="0" max="1" step="0.1"
                    value="1">

            </div>
            <div style="display: flex;">
                <input type="checkbox" checked id="isSingleImage"><span>Single Image</span> <input type="range"
                    id="singleImageRange" min="0" max="1" step="0.1" value="1">
            </div>
            <div style="display: flex;">
                <input type="checkbox" checked id="isTileMapServiceImage"><span>Tile MapService Image</span> <input
                    type="range" id="tileMapServiceImageRange" min="0" max="1" step="0.1" value="1">
            </div>
            <div style="display: flex;">
                <input type="checkbox" checked id="isUnitedStatesWeatherRadar"><span>United States Weather Radar</span>
                <input type="range" id="unitedStatesWeatherRadarRange" min="0" max="1" step="0.1" value="1">
            </div>

            <input type="checkbox" checked id="isUnitedStatesGOESInfrared"><span>United States GOES Infrared</span>
            <input type="range" id="unitedStatesGOESInfraredRange" min="0" max="1" step="0.1" value="1">

        </div>
    </div>
</body>
<script>
    let viewer = new Cesium.Viewer('container', {
        baseLayerPicker: false
    })
    let defaultbaseLayer = viewer.imageryLayers.get(0)
</script>
<script>
    function selectChange(e) {
        switch (e.value) {
            case 'ArcGIS World Street Maps':
                addBaseLayer(e.value, new Cesium.ArcGisMapServerImageryProvider({
                    url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
                }))
                break
            case 'Bing Maps Aerial':
                addBaseLayer(e.value, undefined)
                break
            case 'Open Street Maps':
                addBaseLayer(e.value, new Cesium.OpenStreetMapImageryProvider())
                break
            case 'Bing Maps Road':
                addBaseLayer(e.value, Cesium.createWorldImagery({
                    style: Cesium.IonWorldImageryStyle.ROAD
                }))
                break
            case 'Stamen Maps':
                addBaseLayer(e.value, new Cesium.OpenStreetMapImageryProvider({
                    url: "https://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.",
                }))
                break
            case 'Natural Earth II (local)':
                addBaseLayer(e.value, new Cesium.TileMapServiceImageryProvider({
                    url: Cesium.buildModuleUrl('../Source/Assets/Textures/NaturalEarthII')
                }))
                break
            case 'USGS Shaded Relief (via WMTS)':
                addBaseLayer(e.value, new Cesium.WebMapTileServiceImageryProvider({
                    url: "https://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS",
                    layer: "USGSShadedReliefOnly",
                    style: "default",
                    format: "image/jpeg",
                    tileMatrixSetID: "default028mm",
                    maximumLevel: 19,
                    credit: "U. S. Geological Survey",
                }))
                break
        }
    }

    function baseLayerIsShow(e) {
        viewer.imageryLayers.get(0).show = e.checked
    }

    function baseLayerAlpha(e) {
        viewer.imageryLayers.get(0).alpha = e.value
    }


    function init() {
        document.getElementById('up').disabled = false
        document.getElementById('down').disabled = false
        if (document.getElementById('selectionText').value == 1) {
            document.getElementById('down').disabled = true
        }
        if (document.getElementById('selectionText').value == viewer.imageryLayers.length) {
            document.getElementById('up').disabled = true
        }
    }

    document.getElementById('up').onclick = () => {
        let val = document.getElementById('selectionText').value - 1
        viewer.imageryLayers.raise(viewer.imageryLayers.get(val))
        document.getElementById('selectionText').value = 1 + Number(document.getElementById('selectionText').value)
        init()
    }
    document.getElementById('down').onclick = () => {

        let val = document.getElementById('selectionText').value - 1
        viewer.imageryLayers.lower(viewer.imageryLayers.get(val))
        let x = Number(document.getElementById('selectionText').value) - 1
        document.getElementById('selectionText').value = x

        init()
    }
</script>
<script>
    function addBaseLayer(name, imageryProvider) {
        let layer
        if (typeof imageryProvider === 'undefined') {
            layer = defaultbaseLayer
        } else {
            layer = new Cesium.ImageryLayer(imageryProvider)
        }
        layer.name = name
        viewer.imageryLayers.remove(viewer.imageryLayers.get(0), false) //默认值为true，ture的意思就是移除掉的图层销毁，下次也用不了了，除非重新new
        viewer.imageryLayers.add(layer)
    }

    function addAdditionalLayer(name, imageryProvider) {
        let layer = viewer.imageryLayers.addImageryProvider(imageryProvider)
        layer.name = name
    }

    function changeAlpha(e, name) {
        let layer
        for (let i = 0; i < viewer.imageryLayers.length; i++) {
            if (viewer.imageryLayers.get(i).name == name) {
                layer = viewer.imageryLayers.get(i)
                layer.alpha = e.target.value
                return
            }
        }
    }

    function changeShow(e, name) {
        let layer
        for (let i = 0; i < viewer.imageryLayers.length; i++) {

            if (viewer.imageryLayers.get(i).name == name) {

                layer = viewer.imageryLayers.get(i)
                layer.show = e.target.checked
                return
            }
        }
    }

    function setUp() {
        let USGI = new Cesium.WebMapServiceImageryProvider({
            url: "https://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",
            },
        })
        addAdditionalLayer('United States GOES Infrared', USGI)

        document.getElementById('unitedStatesGOESInfraredRange').onchange = (e) => {
            changeAlpha(e, 'United States GOES Infrared')
        }
        document.getElementById('isUnitedStatesGOESInfrared').onchange = (e) => {
            changeShow(e, 'United States GOES Infrared')
        }

        let Grid = new Cesium.GridImageryProvider()
        addAdditionalLayer('Grid', Grid)
        document.getElementById('gridRange').onchange = (e) => {
            changeAlpha(e, 'Grid')
        }
        document.getElementById('isGrid').onchange = (e) => {
            changeShow(e, 'Grid')
        }

        let tileCoordinates = new Cesium.TileCoordinatesImageryProvider()
        addAdditionalLayer('Tile Coordinates', tileCoordinates)
        document.getElementById('tileCoordinatesRange').onchange = (e) => {
            changeAlpha(e, 'Tile Coordinates')
        }
        document.getElementById('isTileCoordinates').onchange = (e) => {
            changeShow(e, 'Tile Coordinates')
        }

        let tileMapServiceImage = new Cesium.TileMapServiceImageryProvider({
            url: '../Source/Assets/Images/ion-credit.png'
        })
        addAdditionalLayer('Tile MapService Image', tileMapServiceImage)
        document.getElementById('tileMapServiceImageRange').onchange = (e) => {
            changeAlpha(e, 'Tile MapService Image')
        }
        document.getElementById('isTileMapServiceImage').onchange = (e) => {
            changeShow(e, 'Tile MapService Image')
        }

        let singleImage = new Cesium.SingleTileImageryProvider({
            url: '../Source/Assets/Images/cesium_credit.png',
            rectangle: Cesium.Rectangle.fromDegrees(
                -115.0,
                38.0,
                -107,
                39.75
            ),
        })
        addAdditionalLayer('Single Image', singleImage)
        document.getElementById('singleImageRange').onchange = (e) => {
            changeAlpha(e, 'Single Image')
        }
        document.getElementById('isSingleImage').onchange = (e) => {
            changeShow(e, 'Single Image')
        }

        let USWR = new Cesium.WebMapServiceImageryProvider({
            url: "https://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",
            },
        })
        addAdditionalLayer('United States Weather Radar', USWR)
        document.getElementById('unitedStatesWeatherRadarRange').onchange = (e) => {
            changeAlpha(e, 'United States Weather Radar')
        }
        document.getElementById('isUnitedStatesWeatherRadar').onchange = (e) => {
            changeShow(e, 'United States Weather Radar')
        }
    }
    setUp()
    init()
</script>

</html>