How to use CesiumJS to visualize data from a Session: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
==Heightmap== | |||
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. | 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. | ||
<pre> | <pre> | ||
Line 38: | Line 39: | ||
</pre> | </pre> | ||
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''. | ==Base Map WMS== | ||
You can use the following code to add and access your project's WMS. Additionally, you can provide the optional layer parameter: ''SATELLITE'', ''TOPOGRAPHIC'' or ''GRAY''. | |||
<pre> | <pre> | ||
var imageryViewModels = []; | var imageryViewModels = []; | ||
Line 76: | Line 78: | ||
</pre> | </pre> | ||
==Viewer initialization== | |||
The Cesium viewer is initialized as followed: | The Cesium viewer is initialized as followed: | ||
<pre> | <pre> | ||
Line 95: | Line 98: | ||
</pre> | </pre> | ||
== 3D Tileset == | |||
A 3D tileset can be added by activating an asynchronous function and awaiting the tileset call: | A 3D tileset can be added by activating an asynchronous function and awaiting the tileset call: | ||
<pre> | <pre> | ||
Line 103: | Line 107: | ||
</pre> | </pre> | ||
=== Fly camera to 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) | 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) | ||
<pre> | <pre> | ||
Line 110: | Line 115: | ||
</pre> | </pre> | ||
=== Updating the Tileset === | |||
A tileset can be updated with the following code | A tileset can be updated with the following code | ||
<pre> | <pre> | ||
Line 136: | Line 142: | ||
</pre> | </pre> | ||
== Overlays == | |||
Overlays are also provided by a project's WMS. The code below allows you to add overlays to the Cesium viewer. Overlay layer is a variable that stores the current overlay layer, such that it can also be destroyed when it should no longer be visible. Parameters "maxLevel" and "tilepx" are defined above in #HeightMap. | |||
<pre> | <pre> | ||
Line 151: | Line 158: | ||
token: "$TOKEN", | token: "$TOKEN", | ||
timeframe: timeframe, | timeframe: timeframe, | ||
styles: difference ? | styles: difference ? "DIFFERENCE" : "", | ||
version: version | version: version | ||
}, | }, | ||
Line 159: | Line 166: | ||
token: "$TOKEN", | token: "$TOKEN", | ||
timeframe: timeframe, | timeframe: timeframe, | ||
styles: difference ? | styles: difference ? "DIFFERENCE" : "", | ||
version: version | version: version | ||
} | } | ||
}); | }); | ||
viewer.imageryLayers.remove(overlayLayer); | |||
var newOverlayLayer = new Cesium.ImageryLayer(provider, { minimumTerrainLevel: minLevel }); | |||
viewer.imageryLayers.add(newOverlayLayer); | |||
overlayControl.setActiveOverlayLayer(newOverlayLayer); | |||
if (overlayLayer != null) { | |||
overlayLayer.destroy(); | |||
} | |||
</pre> | </pre> | ||
Revision as of 15:00, 1 March 2024
Heightmap
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; }); }, }); } }));
Base Map WMS
You can use the following code to add and access your project's WMS. 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 }); } })); }
Viewer initialization
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, });
3D Tileset
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); }
Fly camera to 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);
Updating the Tileset
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; }); } });
Overlays
Overlays are also provided by a project's WMS. The code below allows you to add overlays to the Cesium viewer. Overlay layer is a variable that stores the current overlay layer, such that it can also be destroyed when it should no longer be visible. Parameters "maxLevel" and "tilepx" are defined above in #HeightMap.
const provider = new Cesium.WebMapServiceImageryProvider({ url: 'wms', layers: overlayID, maximumLevel: maxLevel, tileHeight: tilepx, tileWidth: tilepx, proxy: new Cesium.DefaultProxy('/proxy/'), parameters: { crs: "4326", forcexy: "true", token: "$TOKEN", timeframe: timeframe, styles: difference ? "DIFFERENCE" : "", version: version }, getFeatureInfoParameters: { crs: "4326", forcexy: "true", token: "$TOKEN", timeframe: timeframe, styles: difference ? "DIFFERENCE" : "", version: version } }); viewer.imageryLayers.remove(overlayLayer); var newOverlayLayer = new Cesium.ImageryLayer(provider, { minimumTerrainLevel: minLevel }); viewer.imageryLayers.add(newOverlayLayer); overlayControl.setActiveOverlayLayer(newOverlayLayer); if (overlayLayer != null) { overlayLayer.destroy(); }
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".