CesiumJS complete code
Revision as of 13:23, 4 March 2024 by Frank@tygron.nl (talk | contribs)
The page contains the complete code that can be run in Cesium Sandcastle: []
// Constants const dim = 128; const minLevel = 6; const maxLevel = 19; const tilepx = 512; const TOKEN = ""; // IMPORTANT: Place here the project session token between the "" const BGCOLOR = "1f1f00"; // ff0000 is red, hexadecimal color const SHADOW = true; //true ,false const BASEMAP_INDEX = 0; // SATELLITE=0, TOPOGRAPHIC=1 and GRAY=2. const STYLE = "COLORED"; // WHITE, COLORED const SPACING = 10; const TEXTURE = "MEDIUM"; // SMALL, MEDIUM , LARGE const FEATURE_ID = "ID"; const BASEURL = "https://engine.tygron.com/web/"; // Construct the default list of terrain sources. var terrainModels = []; terrainModels.push(new Cesium.ProviderViewModel({ name: "Project Terrain", category: "Terrain", tooltip: "", 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(BASEURL+'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; }); }, }); } })); 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", tooltip: "", iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'), creationFunction: function () { return new Cesium.WebMapServiceImageryProvider({ url: BASEURL+'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, }, }); } })); } // 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, }); var neighborhoodUrl = new Cesium.Resource({ url: BASEURL+"neighborhoods.geojson", queryParameters: { token: TOKEN, crs: "4326", forcexy: "true", } }); var data = await neighborhoodUrl.fetchJson(); var labels = data.features; for (var i = 0; i < labels.length; ++i) { var p = labels[i]; var longitude = p.geometry.coordinates[0]; var latitude = p.geometry.coordinates[1]; var height = p.geometry.coordinates[2] == null ? 200 : p.geometry.coordinates[2] + 200; var id = p.properties[FEATURE_ID]; const entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), label: { text: p.properties.name, font: "12pt arial", style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.TOP, fillColor: Cesium.Color.WHITE, } }); } /* Overlay Variables */ var overlayID = 1; var difference = false; var timeframe = 0; var overlayLayer = null; const provider = new Cesium.WebMapServiceImageryProvider({ url: BASEURL+'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" : "", }, getFeatureInfoParameters: { crs: "4326", forcexy: "true", token: TOKEN, timeframe: timeframe, styles: difference ? "DIFFERENCE" : "", } }); const activateOverlay = new function(id, tf, diff){ var overlayID = id; var timeframe = tf; var difference = diff; viewer.imageryLayers.remove(overlayLayer); var newOverlayLayer = new Cesium.ImageryLayer(provider, { minimumTerrainLevel: minLevel }); viewer.imageryLayers.add(newOverlayLayer); if (overlayLayer != null) { overlayLayer.destroy(); } overlayLayer = newOverlayLayer; } const start = async function () { var tileset = await Cesium.Cesium3DTileset.fromUrl(BASEURL+'3dtiles/tileset.json?token='+TOKEN+'&style='+STYLE+'&spacing='+SPACING+'&texture='+TEXTURE); viewer.scene.primitives.add(tileset); var boundingSphere = tileset.root.boundingVolume._boundingSphere; viewer.camera.viewBoundingSphere(tileset.root.boundingVolume._boundingSphere); viewer.camera.flyToBoundingSphere(tileset.root.boundingVolume._boundingSphere); activateOverlay(1, 0, false); }; start();