Update demo sandcastle

[javagl]

The linked demo sandcastle still used the old async API, and did not show anything. This is updated here.

For (somewhat) easier comparison (omitting the access tokens):

The old code was this

var viewer = new Cesium.Viewer("cesiumContainer");

var Elevation = new Cesium.Cesium3DTileset({
  url: Cesium.IonResource.fromAssetId(186590),
});
viewer.scene.primitives.add(Elevation);

var GSModels = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(187384),
  })
);
viewer.scene.primitives.add(GSModels);

var GTModelsBridge = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(183264),
  })
);
viewer.scene.primitives.add(GTModelsBridge);

var GTModelsTrees = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(183265),
  })
);
viewer.scene.primitives.add(GTModelsTrees);

var HydrographyNetwork = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(183263),
  })
);
viewer.scene.primitives.add(HydrographyNetwork);

var RoadNetwork = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(183260),
  })
);
viewer.scene.primitives.add(HydrographyNetwork);

function show3DModels(show) {
  Elevation.show = show;
  GSModels.show = show;
  GTModelsBridge.show = show;
  GTModelsTrees.show = show;
}

function showHydrographyNetwork(show) {
  HydrographyNetwork.show = show;
}

function showRoadNetwork(show) {
  RoadNetwork.show = show;
}

Sandcastle.addToolbarMenu(
  [
    {
      text: "Show Elevation, GSModels, and GTModels",
      onselect: function () {
        show3DModels(true);
        showHydrographyNetwork(false);
        showRoadNetwork(false);
      },
    },
    {
      text: "Show Road Network",
      onselect: function () {
        show3DModels(false);
        showHydrographyNetwork(false);
        showRoadNetwork(true);
      },
    },
    {
      text: "Show Hydrography",
      onselect: function () {
        show3DModels(false);
        showHydrographyNetwork(true);
        showRoadNetwork(false);
      }
    }
  ]
);

viewer.camera.flyTo({
  destination : new Cesium.Cartesian3(-2452961.6623144406, -4779111.364493754, 3427541.7242619386),
  orientation : {
      direction : new Cesium.Cartesian3(0.40915140139419204, -0.41458661343711345, -0.8128425866647948),
      up : new Cesium.Cartesian3(-0.28036276365873614, -0.9048464737722868, 0.3203897308833328),
  },
  duration : 3
});

show3DModels(true);
showHydrographyNetwork(false);
showRoadNetwork(false);

(BTW: Note the part that says...

var RoadNetwork = ...
viewer.scene.primitives.add(HydrographyNetwork);

That should have been RoadNetwork instead of HydrographyNetwork...)

The new code is this:

const viewer = new Cesium.Viewer("cesiumContainer");

const Elevation = await Cesium.Cesium3DTileset.fromIonAssetId(186590);
viewer.scene.primitives.add(Elevation);

const GSModels = await Cesium.Cesium3DTileset.fromIonAssetId(187384);
viewer.scene.primitives.add(GSModels);

const GTModelsBridge = await Cesium.Cesium3DTileset.fromIonAssetId(183264);
viewer.scene.primitives.add(GTModelsBridge);

const GTModelsTrees = await Cesium.Cesium3DTileset.fromIonAssetId(183265);
viewer.scene.primitives.add(GTModelsTrees);

const HydrographyNetwork = await Cesium.Cesium3DTileset.fromIonAssetId(183263);
viewer.scene.primitives.add(HydrographyNetwork);

const RoadNetwork = await Cesium.Cesium3DTileset.fromIonAssetId(183260);
viewer.scene.primitives.add(RoadNetwork);

function show3DModels(show) {
  Elevation.show = show;
  GSModels.show = show;
  GTModelsBridge.show = show;
  GTModelsTrees.show = show;
}

function showHydrographyNetwork(show) {
  HydrographyNetwork.show = show;
}

function showRoadNetwork(show) {
  RoadNetwork.show = show;
}

Sandcastle.addToolbarMenu(
  [
    {
      text: "Show Elevation, GSModels, and GTModels",
      onselect: function () {
        show3DModels(true);
        showHydrographyNetwork(false);
        showRoadNetwork(false);
      },
    },
    {
      text: "Show Road Network",
      onselect: function () {
        show3DModels(false);
        showHydrographyNetwork(false);
        showRoadNetwork(true);
      },
    },
    {
      text: "Show Hydrography",
      onselect: function () {
        show3DModels(false);
        showHydrographyNetwork(true);
        showRoadNetwork(false);
      }
    }
  ]
);

viewer.camera.flyTo({
  destination : new Cesium.Cartesian3(-2452961.6623144406, -4779111.364493754, 3427541.7242619386),
  orientation : {
      direction : new Cesium.Cartesian3(0.40915140139419204, -0.41458661343711345, -0.8128425866647948),
      up : new Cesium.Cartesian3(-0.28036276365873614, -0.9048464737722868, 0.3203897308833328),
  },
  duration : 3
});

show3DModels(true);
showHydrographyNetwork(false);
showRoadNetwork(false);

[lilleyse]

Thanks @javagl