How to use CesiumJS to visualize data from a Session: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 23: | Line 23: | ||
return new Float32Array(dim * dim); // all zeros | 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); | const test = Cesium.Resource.fetchArrayBuffer('terrain/' + level + '/' + x + '/' + y + '.bin?worlddatum=true&token=[[#Variables|$TOKEN]]&width=' + dim + '&height=' + dim); | ||
return test.then(function (buffer) { | return test.then(function (buffer) { | ||
const array = new Float32Array(dim * dim); // all zeros | const array = new Float32Array(dim * dim); // all zeros |
Revision as of 13:06, 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=[[#Variables|$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, });