ImageryLayer.fromProviderAsync, baseLayer

CesiumGS · Feb 17, 2023 · 8429a22 · 8429a22
1 parent c5349d6
commit 8429a22
Show file tree

Hide file tree

Showing 49 changed files with 4,051 additions and 1,515 deletions.
diff --git a/Apps/CesiumViewer/CesiumViewer.js b/Apps/CesiumViewer/CesiumViewer.js
@@ -11,6 +11,7 @@ import {
   queryToObject,
   CzmlDataSource,
   GeoJsonDataSource,
+  ImageryLayer,
   KmlDataSource,
   GpxDataSource,
   Terrain,
@@ -42,15 +43,15 @@ async function main() {
      */
   const endUserOptions = queryToObject(window.location.search.substring(1));
 
-  let imageryProvider;
+  let baseLayer;
   if (defined(endUserOptions.tmsImageryUrl)) {
-    imageryProvider = new TileMapServiceImageryProvider({
-      url: endUserOptions.tmsImageryUrl,
-    });
+    baseLayer = ImageryLayer.fromProviderAsync(
+      TileMapServiceImageryProvider.fromUrl(endUserOptions.tmsImageryUrl)
+    );
   }
 
   const loadingIndicator = document.getElementById("loadingIndicator");
-  const hasBaseLayerPicker = !defined(imageryProvider);
+  const hasBaseLayerPicker = !defined(baseLayer);
 
   const terrain = Terrain.fromWorldTerrain({
     requestWaterMask: true,
@@ -60,7 +61,7 @@ async function main() {
   let viewer;
   try {
     viewer = new Viewer("cesiumContainer", {
-      imageryProvider: imageryProvider,
+      baseLayer: baseLayer,
       baseLayerPicker: hasBaseLayerPicker,
       scene3DOnly: endUserOptions.scene3DOnly,
       requestRenderMode: true,

diff --git a/Apps/Sandcastle/gallery/ArcGIS MapServer.html b/Apps/Sandcastle/gallery/ArcGIS MapServer.html
@@ -33,10 +33,11 @@
         "use strict";
         //Sandcastle_Begin
         const viewer = new Cesium.Viewer("cesiumContainer", {
-          imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
-            url:
-              "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/",
-          }),
+          baseLayer: Cesium.ImageryLayer.fromProviderAsync(
+            Cesium.ArcGisMapServerImageryProvider.fromUrl(
+              "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/"
+            )
+          ),
         });
         //Sandcastle_End
       };

diff --git a/Apps/Sandcastle/gallery/Blue Marble.html b/Apps/Sandcastle/gallery/Blue Marble.html
@@ -37,7 +37,9 @@
         //Sandcastle_Begin
         // Blue Marble Next Generation July, 2004 imagery from NASA
         const viewer = new Cesium.Viewer("cesiumContainer", {
-          imageryProvider: new Cesium.IonImageryProvider({ assetId: 3845 }),
+          baseLayer: Cesium.ImageryLayer.fromProviderAsync(
+            Cesium.IonImageryProvider.fromAssetId(3845)
+          ),
         });
         //Sandcastle_End
       };

diff --git a/Apps/Sandcastle/gallery/Earth at Night.html b/Apps/Sandcastle/gallery/Earth at Night.html
@@ -37,7 +37,9 @@
         //Sandcastle_Begin
         // The Earth at Night, also known as Black Marble 2017 and Night Lights
         const viewer = new Cesium.Viewer("cesiumContainer", {
-          imageryProvider: new Cesium.IonImageryProvider({ assetId: 3812 }),
+          baseLayer: new Cesium.ImageryLayer.fromProviderAsync(
+            Cesium.IonImageryProvider.fromAssetId(3812)
+          ),
         });
 
         // The rest of the code is for dynamic lighting
@@ -47,11 +49,10 @@
 
         const imageryLayers = viewer.imageryLayers;
         const nightLayer = imageryLayers.get(0);
-        const dayLayer = imageryLayers.addImageryProvider(
-          new Cesium.IonImageryProvider({
-            assetId: 3845,
-          })
+        const dayLayer = Cesium.ImageryLayer.fromProviderAsync(
+          Cesium.IonImageryProvider.fromAssetId(3845)
         );
+        imageryLayers.add(dayLayer);
         imageryLayers.lowerToBottom(dayLayer);
 
         function updateLighting(dynamicLighting) {

diff --git a/Apps/Sandcastle/gallery/Google Earth Enterprise.html b/Apps/Sandcastle/gallery/Google Earth Enterprise.html
@@ -52,11 +52,12 @@
           );
 
           const layers = viewer.scene.imageryLayers;
-          const blackMarble = layers.addImageryProvider(
+          const blackMarble = new Cesium.ImageryLayer(
             new Cesium.GoogleEarthEnterpriseImageryProvider({
               metadata: geeMetadata,
             })
           );
+          layers.add(blackMarble);
         } catch (error) {
           console.log(`Failed to create Google Earth providers from metadata. Confirm GEE service is correctly configured. 
           ${error}`);

diff --git a/Apps/Sandcastle/gallery/Imagery Color To Alpha.html b/Apps/Sandcastle/gallery/Imagery Color To Alpha.html
@@ -67,12 +67,20 @@
         baseLayer.colorToAlphaThreshold = 0.2;
 
         // Add a bump layer with adjustable threshold
-        const singleTileLayer = layers.addImageryProvider(
-          new Cesium.SingleTileImageryProvider({
-            url: "../images/earthbump1k.jpg",
-            rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
-          })
+        const singleTileLayer = Cesium.ImageryLayer.fromProviderAsync(
+          Cesium.SingleTileImageryProvider.fromUrl(
+            "../images/earthbump1k.jpg",
+            {
+              rectangle: Cesium.Rectangle.fromDegrees(
+                -180.0,
+                -90.0,
+                180.0,
+                90.0
+              ),
+            }
+          )
         );
+        layers.add(singleTileLayer);
 
         singleTileLayer.colorToAlpha = new Cesium.Color(0.0, 0.0, 0.0, 1.0);
         singleTileLayer.colorToAlphaThreshold = 0.1;

diff --git a/Apps/Sandcastle/gallery/Imagery Cutout.html b/Apps/Sandcastle/gallery/Imagery Cutout.html
@@ -50,9 +50,11 @@
         "use strict";
         //Sandcastle_Begin
         const viewer = new Cesium.Viewer("cesiumContainer", {
-          imageryProvider: new Cesium.TileMapServiceImageryProvider({
-            url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
-          }),
+          baseLayer: Cesium.ImageryLayer.fromProviderAsync(
+            Cesium.TileMapServiceImageryProvider.fromUrl(
+              Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
+            )
+          ),
           baseLayerPicker: false,
         });
 
@@ -78,16 +80,19 @@
         imageryBaseLayer.cutoutRectangle = defaultImageryLayerCutout;
 
         // Fit a SingleTileImageryProvider inside the cutout on the lowest layer
-        layers.addImageryProvider(
-          new Cesium.SingleTileImageryProvider({
-            url: "../images/Cesium_Logo_overlay.png",
-            rectangle: defaultImageryLayerCutout,
-          })
+        const logo = Cesium.ImageryLayer.fromProviderAsync(
+          Cesium.SingleTileImageryProvider.fromUrl(
+            "../images/Cesium_Logo_overlay.png",
+            {
+              rectangle: defaultImageryLayerCutout,
+            }
+          )
         );
+        layers.add(logo);
 
         // Add an Earth at Night layer and a "traveling" cutout
-        const earthAtNight = layers.addImageryProvider(
-          new Cesium.IonImageryProvider({ assetId: 3812 })
+        const earthAtNight = Cesium.ImageryLayer.fromProviderAsync(
+          Cesium.IonImageryProvider.fromAssetId(3812)
         );
         earthAtNight.cutoutRectangle = Cesium.Rectangle.fromDegrees(
           -100,
@@ -96,6 +101,7 @@
           50
         );
         earthAtNight.alpha = 0.9;
+        layers.add(earthAtNight);
 
         // "traveling" code
         const flags = {

diff --git a/Apps/Sandcastle/gallery/Imagery Layers Manipulation.html b/Apps/Sandcastle/gallery/Imagery Layers Manipulation.html
@@ -158,19 +158,21 @@
           // 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 Aerial",
+            Cesium.createWorldImageryAsync()
+          );
           addBaseLayerOption(
             "Bing Maps Road",
-            Cesium.createWorldImagery({
+            Cesium.createWorldImageryAsync({
               style: Cesium.IonWorldImageryStyle.ROAD,
             })
           );
           addBaseLayerOption(
             "ArcGIS World Street Maps",
-            new Cesium.ArcGisMapServerImageryProvider({
-              url:
-                "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
-            })
+            Cesium.ArcGisMapServerImageryProvider.fromUrl(
+              "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
+            )
           );
           addBaseLayerOption(
             "OpenStreetMaps",
@@ -187,9 +189,9 @@
           );
           addBaseLayerOption(
             "Natural Earth II (local)",
-            new Cesium.TileMapServiceImageryProvider({
-              url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
-            })
+            Cesium.TileMapServiceImageryProvider.fromUrl(
+              Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
+            )
           );
           addBaseLayerOption(
             "USGS Shaded Relief (via WMTS)",
@@ -234,22 +236,24 @@
           );
           addAdditionalLayerOption(
             "TileMapService Image",
-            new Cesium.TileMapServiceImageryProvider({
-              url: "../images/cesium_maptiler/Cesium_Logo_Color",
-            }),
+            Cesium.TileMapServiceImageryProvider.fromUrl(
+              "../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
-              ),
-            }),
+            Cesium.SingleTileImageryProvider.fromUrl(
+              "../images/Cesium_Logo_overlay.png",
+              {
+                rectangle: Cesium.Rectangle.fromDegrees(
+                  -115.0,
+                  38.0,
+                  -107,
+                  39.75
+                ),
+              }
+            ),
             1.0
           );
           addAdditionalLayerOption(
@@ -266,25 +270,45 @@
           );
         }
 
-        function addBaseLayerOption(name, imageryProvider) {
-          let layer;
-          if (typeof imageryProvider === "undefined") {
-            layer = imageryLayers.get(0);
-            viewModel.selectedLayer = layer;
-          } else {
-            layer = new Cesium.ImageryLayer(imageryProvider);
-          }
+        async function addBaseLayerOption(name, imageryProviderPromise) {
+          try {
+            const imageryProvider = await Promise.resolve(
+              imageryProviderPromise
+            );
 
-          layer.name = name;
-          baseLayers.push(layer);
+            const layer = new Cesium.ImageryLayer(imageryProvider);
+            layer.name = name;
+            baseLayers.push(layer);
+            updateLayerList();
+          } catch (error) {
+            console.error(
+              `There was an error while creating ${name}. ${error}`
+            );
+          }
         }
 
-        function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
-          const 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"]);
+        async function addAdditionalLayerOption(
+          name,
+          imageryProviderPromise,
+          alpha,
+          show
+        ) {
+          try {
+            const imageryProvider = await Promise.resolve(
+              imageryProviderPromise
+            );
+            const layer = new Cesium.ImageryLayer(imageryProvider);
+            layer.alpha = Cesium.defaultValue(alpha, 0.5);
+            layer.show = Cesium.defaultValue(show, true);
+            layer.name = name;
+            imageryLayers.add(layer);
+            Cesium.knockout.track(layer, ["alpha", "show", "name"]);
+            updateLayerList();
+          } catch (error) {
+            console.error(
+              `There was an error while creating ${name}. ${error}`
+            );
+          }
         }
 
         function updateLayerList() {
@@ -296,7 +320,6 @@
         }
 
         setupLayers();
-        updateLayerList();
 
         //Bind the viewModel to the DOM elements of the UI that call for it.
         const toolbar = document.getElementById("toolbar");

diff --git a/Apps/Sandcastle/gallery/Imagery Layers Split.html b/Apps/Sandcastle/gallery/Imagery Layers Split.html
@@ -57,19 +57,21 @@
         "use strict";
         //Sandcastle_Begin
         const viewer = new Cesium.Viewer("cesiumContainer", {
-          imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
-            url:
-              "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
-          }),
+          baseLayer: Cesium.ImageryLayer.fromProviderAsync(
+            Cesium.ArcGisMapServerImageryProvider.fromUrl(
+              "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
+            )
+          ),
           baseLayerPicker: false,
           infoBox: false,
         });
 
         const layers = viewer.imageryLayers;
-        const earthAtNight = layers.addImageryProvider(
-          new Cesium.IonImageryProvider({ assetId: 3812 })
+        const earthAtNight = Cesium.ImageryLayer.fromProviderAsync(
+          Cesium.IonImageryProvider.fromAssetId(3812)
         );
         earthAtNight.splitDirection = Cesium.SplitDirection.LEFT; // Only show to the left of the slider.
+        layers.add(earthAtNight);
 
         // Sync the position of the slider with the split position
         const slider = document.getElementById("slider");

diff --git a/Apps/Sandcastle/gallery/Imagery Layers Texture Filters.html b/Apps/Sandcastle/gallery/Imagery Layers Texture Filters.html
@@ -64,17 +64,19 @@
         const layers = viewer.imageryLayers;
         layers.removeAll();
 
-        const layerLinear = layers.addImageryProvider(
-          new Cesium.TileMapServiceImageryProvider({
-            url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
-          })
+        const layerLinear = Cesium.ImageryLayer.fromProviderAsync(
+          Cesium.TileMapServiceImageryProvider.fromUrl(
+            Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
+          )
         );
+        layers.add(layerLinear);
 
-        const layerNearest = layers.addImageryProvider(
-          new Cesium.TileMapServiceImageryProvider({
-            url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
-          })
+        const layerNearest = Cesium.ImageryLayer.fromProviderAsync(
+          Cesium.TileMapServiceImageryProvider.fromUrl(
+            Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
+          )
         );
+        layers.add(layerNearest);
 
         // Set the texture minification and magnification filters of layerNearest. Default is LINEAR.
         layerNearest.minificationFilter =