Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYjBlYmYyNC1kNWRhLTRiNTUtOGNlYi02NGY1YWVhNjI2MjIiLCJpZCI6MTEwNzEsImlhdCI6MTYxOTcwNjI0M30.tlpaagcH93SjaHIn7eEVpanGSiH2yDylbGJZr2gsXnY'; ////////////////////////////////////////////////////////////////////////// // Creating the Viewer ////////////////////////////////////////////////////////////////////////// var viewer = new Cesium.Viewer('cesiumContainer', { scene3DOnly: true, selectionIndicator: false, timeline: false, animation: false, shadow: false, // // Set default basemap imageryProvider : Cesium.ArcGisMapServerImageryProvider({ url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' }), baseLayerPicker: true }); ////////////////////////////////////////////////////////////////////////// // Load 3D Tileset ////////////////////////////////////////////////////////////////////////// var tileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ //url: Cesium.IonResource.fromAssetId(481524) url: './Source/Data/3DTiles/tileset.json' }) ); viewer.zoomTo(tileset); ////////////////////////////////////////////////////////////////////////// // Style 3D Tileset ////////////////////////////////////////////////////////////////////////// var defaultstyle = new Cesium.Cesium3DTileStyle({ color : "color('WHITE')", show: true }); var energydemandstyle = new Cesium.Cesium3DTileStyle({ color : { conditions : [ ['Number(${Specific_s})>= 0' && 'Number(${Specific_s})< 60', 'color("#33ACFF")'], ['Number(${Specific_s})>= 60' && 'Number(${Specific_s})< 120', 'color("#2AFF00")'], ['Number(${Specific_s})>= 120' && 'Number(${Specific_s})< 170', 'color("#FFFF00")'], ['Number(${Specific_s})>= 170' && 'Number(${Specific_s})< 230', 'color("#FFA200")'], ['true', 'color("#FF0000")'] ] }, show: true }); var colorstyle1 = document.getElementById('3dbuildings'); var colorstyle2 = document.getElementById('heatdemand'); function set3DColorStyle() { if (colorstyle1.checked) {tileset.style = defaultstyle; document.getElementById("legend").style.display = "none"; } else if (colorstyle2.checked) {tileset.style = energydemandstyle; document.getElementById("legend").style.display = "block"; } } colorstyle1.addEventListener('change', set3DColorStyle); colorstyle2.addEventListener('change', set3DColorStyle); ////////////////////////////////////////////////////////////////////////// // Selecting geometries in 3D Tileset ////////////////////////////////////////////////////////////////////////// //Selecting a Building var Pickers_3DTile_Activated = true; // Information about the currently highlighted feature function active3DTilePicker() { var highlighted = { feature: undefined, originalColor: new Cesium.Color() }; // Information about the currently selected feature var selected = { feature: undefined, originalColor: new Cesium.Color() }; // An entity object which will hold info about the currently selected feature for infobox display var selectedEntity = new Cesium.Entity(); // Get default left click handler for when a feature is not picked on left click var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); // Color a feature GREY on hover. viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) { if (Pickers_3DTile_Activated) { // If a feature was previously highlighted, undo the highlight if (Cesium.defined(highlighted.feature)) { highlighted.feature.color = highlighted.originalColor; highlighted.feature = undefined; } // Pick a new feature var picked3DtileFeature = viewer.scene.pick(movement.endPosition); if (!Cesium.defined(picked3DtileFeature)) { return; } // Highlight the feature if it's not already selected. if (picked3DtileFeature !== selected.feature) { highlighted.feature = picked3DtileFeature; Cesium.Color.clone(picked3DtileFeature.color, highlighted.originalColor); picked3DtileFeature.color = Cesium.Color.GREY; } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // Color a feature AQUA on selection and show info in the InfoBox. viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { if (Pickers_3DTile_Activated) { // If a feature was previously selected, undo the highlight if (Cesium.defined(selected.feature)) { selected.feature.color = selected.originalColor; selected.feature = undefined; var options = null; } // Pick a new feature var picked3DtileFeature = viewer.scene.pick(movement.position); if (!Cesium.defined(picked3DtileFeature)) { clickHandler(movement); return; } // Select the feature if it's not already selected if (selected.feature === picked3DtileFeature) { return; } selected.feature = picked3DtileFeature; // Save the selected feature's original color if (picked3DtileFeature === highlighted.feature) { Cesium.Color.clone(highlighted.originalColor, selected.originalColor); highlighted.feature = undefined; } else { Cesium.Color.clone(picked3DtileFeature.color, selected.originalColor); } // Highlight newly selected feature picked3DtileFeature.color = Cesium.Color.AQUA; // Set feature infobox description var featureName = "Building Attributes"; selectedEntity.name = featureName; selectedEntity.description = 'Loading
'; viewer.selectedEntity = selectedEntity; selectedEntity.description = 'gml ID | ' + picked3DtileFeature.getProperty('gml_id') + ' |
---|---|
gml parent ID | ' + picked3DtileFeature.getProperty('gml_parent_id') + ' |
Sp. Heating Demand | ' + picked3DtileFeature.getProperty('Specific_s') + ' ' + 'kWh/m²·a' + ' |