How to use CesiumJS to visualize data from a Session

Most of the time you want to use the heightmap of your project's session, instead of the default digital elevation height that Cesium provides. Use this code for a custom heightmap provider.

// variables
const dim = 128;
const minLevel = 6;
const maxLevel = 19;
const tilepx = 512;

// Construct the default list of terrain sources.
var terrainModels = [];
terrainModels.push(new Cesium.ProviderViewModel({
	name: "Project Terrain",
	category: "Terrain",
	iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'),
	creationFunction: function () {
		return new Cesium.CustomHeightmapTerrainProvider({
			width: dim,
			height: dim,
			maximumLevel: maxLevel,
			callback: function (x, y, level) {
				if (level <= 10) { // ignore zoom levels 10 and lower
					return new Float32Array(dim * dim); // all zeros
				}
				const test = Cesium.Resource.fetchArrayBuffer('terrain/' + level + '/' + x + '/' + y + '.bin?worlddatum=true&token=$TOKEN&width=' + dim + '&height=' + dim);
				return test.then(function (buffer) {
					const array = new Float32Array(dim * dim); // all zeros
					const view = new DataView(buffer);
					for (let i = 0; i < dim * dim; i++) {
						array[i] = view.getFloat32(i * 4);
					}
					return array;
				});
			},
		});
	}
}));

You can use the following code to add and access your project's. Additionally, you can provide the optional layer parameter: SATELLITE, TOPOGRAPHIC or GRAY.

var imageryViewModels = [];
const baseMaps = ["SATELLITE", "TOPOGRAPHIC", "GRAY"];
	for (let i = 0; i < baseMaps.length; i++) {
	imageryViewModels.push(new Cesium.ProviderViewModel({
		name: baseMaps[i],
		category: "Base Map",
		iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'),
		creationFunction: function () {
			return new Cesium.WebMapServiceImageryProvider({
				url: 'wms',
				layers: baseMaps[i],
				maximumLevel: maxLevel,
				tileHeight: tilepx,
				tileWidth: tilepx,
				getFeatureInfoFormats: [new Cesium.GetFeatureInfoFormat("json", "application/json")],
				proxy: new Cesium.DefaultProxy('/proxy/'),
				parameters: {
					crs: "4326",
					forcexy: "true",
					bgcolor: "$BGCOLOR",
					walled: "false",
					token: "$TOKEN"
				},
				getFeatureInfoParameters: {
					crs: "4326",
					forcexy: "true",
					token: "$TOKEN",
				},
				clock: WMS_CLOCK,
				times: WMS_TIMES
			});
		}
	}));
}

The Cesium viewer is initialized as followed:

// Construct the viewer, with a high-res terrain source pre-selected.
var viewer = new Cesium.Viewer('cesiumContainer', {
	terrainProviderViewModels: terrainModels,
	selectedTerrainProviderViewModel: terrainModels[0],
	imageryProviderViewModels: imageryViewModels,
	selectedImageryProviderViewModel: imageryViewModels[$BASEMAP_INDEX],
	animation: false,
	timeline: false,
	homeButton: false,
	navigationHelpButton: false,
	navigationInstructionsInitiallyVisible: false,
	fullscreenButton: false,
	shadows: $SHADOW,
});

See also

• Cesium
• 3D Tiles
• 3D Web Viewer