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 1: | Line 1: | ||
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> | ||
// variables | // variables | ||
Line 36: | Line 38: | ||
</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''. | |||
<pre> | |||
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 | |||
}); | |||
} | |||
})); | |||
} | |||
</pre> | |||
{{article end | {{article end | ||
|seealso= | |seealso= |
Revision as of 13:00, 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 }); } })); }