How to use CesiumJS to visualize data from a Session: Difference between revisions
Jump to navigation
Jump to search
Line 139: | Line 139: | ||
* $TOKEN = [[API token]]. | * $TOKEN = [[API token]]. | ||
* $BGCOLOR = [https://en.wikipedia.org/wiki/Web_colors Hexa-color]. | * $BGCOLOR = [https://en.wikipedia.org/wiki/Web_colors Hexa-color]. | ||
* $BASEMAP_INDEX = nominal | * $BASEMAP_INDEX = nominal; SATELLITE=0, TOPOGRAPHIC=1 and GRAY=2. | ||
* $SHADOW = . | * $SHADOW = boolean. | ||
* $SPACING = . | * $SPACING = distance number. | ||
* $TEXTURE = . | * $TEXTURE = String value. Allowed: "SMALL", "MEDIUM" or "LARGE". | ||
* $STYLE = . | * $STYLE = String value. Allowed: "WHITE", "COLORED". | ||
{{article end | {{article end |
Revision as of 14:44, 1 March 2024
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, });
A 3D tileset can be added by activating an asynchronous function and awaiting the tileset call:
const start = async function () { tileset = await Cesium.Cesium3DTileset.fromUrl('3dtiles/tileset.json?token=$TOKEN&style=$STYLE&spacing=$SPACING&texture=$TEXTURE'); viewer.scene.primitives.add(tileset); }
Once loaded, the camera can fly to the tileset by adding this after the tileset has been added to the scene (but before the end bracket of the start function)
boundingSphere = tileset.root.boundingVolume._boundingSphere viewer.camera.viewBoundingSphere(tileset.root.boundingVolume._boundingSphere); viewer.camera.flyToBoundingSphere(tileset.root.boundingVolume._boundingSphere);
A tileset can be updated with the following code
var tileseturl = new Cesium.Resource({ url: "3dtiles/tileset.json", queryParameters: { token: "$TOKEN" } }); tileseturl.fetchJson().then(data => { if (tilesetversion == null) { tilesetversion = data.asset.tilesetVersion; } else if (data.asset.tilesetVersion > tilesetversion) { tilesetversion = data.asset.tilesetVersion; var tilerequest = Cesium.Cesium3DTileset.fromUrl('3dtiles/tileset.json?token=$TOKEN&style=$STYLE&spacing=$SPACING&texture=$TEXTURE'); tilerequest.then((newtileset) => { viewer.scene.primitives.add(newtileset); tileset.show = false; viewer.scene.primitives.remove(tileset); tileset = newtileset; }); } });
Variables
- $TOKEN = API token.
- $BGCOLOR = Hexa-color.
- $BASEMAP_INDEX = nominal; SATELLITE=0, TOPOGRAPHIC=1 and GRAY=2.
- $SHADOW = boolean.
- $SPACING = distance number.
- $TEXTURE = String value. Allowed: "SMALL", "MEDIUM" or "LARGE".
- $STYLE = String value. Allowed: "WHITE", "COLORED".