Commit 70771fdd authored by Sven Schneider's avatar Sven Schneider
Browse files

added new vis using ciurcular building data with different colors according to...

added new vis using ciurcular building data with different colors according to Martinas GMLids and Layer classification
parent fa836336
Pipeline #1711 passed with stages
in 12 seconds
/node_modules
npm-debug.log
.DS_Store
/*.env
{
"asset": {
"version": "0.0"
},
"geometricError": 37.18040634705286,
"root": {
"refine": "ADD",
"boundingVolume": {
"region": [
0.1604284826654673,
0.8514863285409243,
0.1604475660539477,
0.8514937723783317,
235.04712,
263.98139
]
},
"content": {
"uri": "b3dms/R.b3dm",
"boundingVolume": {
"region": [
0.1604284826654673,
0.8514863285409243,
0.1604475660539477,
0.8514937723783317,
235.04712,
263.98139
]
}
},
"geometricError": 0.0
},
"properties": {
"gebaeudekennzeichen_1": {},
"anzahlDerEinBisZweiZimmerWohnungen": {
"maximum": 8,
"minimum": 1
},
"LoD1_datenquelleBodenhoehe": {
"maximum": 1000,
"minimum": 1000
},
"gmlIdALKISLageBezeichnung_2": {},
"geschossflaeche": {
"maximum": 1527,
"minimum": 15
},
"StoreysAboveGround": {
"maximum": 7,
"minimum": 4
},
"umbauterRaum": {
"maximum": 4971,
"minimum": 48
},
"anzahlDerWohnungenImSondereigentum": {
"maximum": 6,
"minimum": 5
},
"MeasuredHeight": {
"maximum": 26.3,
"minimum": 20.6
},
"FeatureType": {},
"baublockseitenNummer": {
"maximum": 3,
"minimum": 1
},
"gmlID": {},
"YearOfConstruction": {
"maximum": 2011,
"minimum": 1956
},
"anzahlDerDreiBisVierZimmerWohnungen": {
"maximum": 12,
"minimum": 4
},
"statusDesGebaeudes": {
"maximum": 1,
"minimum": 1
},
"LoD1_datenquelleLage": {
"maximum": 1000,
"minimum": 1000
},
"gmlIdALKISLageBezeichnung_1": {},
"StoreysBelowGround": {
"maximum": 2,
"minimum": 0
},
"dachgeschossausbau": {
"maximum": 3000,
"minimum": -1000
},
"hoeheFirst": {
"maximum": 270.8,
"minimum": 261.4
},
"gebaeudekennzeichen_2": {},
"CreationDate": {},
"alkisId": {},
"baublockNummer": {
"maximum": 107226,
"minimum": 107207
},
"hoeheEFH": {
"maximum": 246.55,
"minimum": 240.64
},
"hoeheTrauf": {
"maximum": 262.05,
"minimum": 252.94
},
"grundflaeche": {
"maximum": 221,
"minimum": 3
},
"LocalityName": {},
"ThoroughfareNumber": {},
"ThoroughfareName": {},
"Longitude": {
"maximum": 9.192968368037699,
"minimum": 9.192046018248607
},
"Latitude": {
"maximum": 48.7869994389516,
"minimum": 48.78671550280119
}
}
}
\ No newline at end of file
{
"asset": {
"version": "0.0"
},
"geometricError": 60.372285006912044,
"root": {
"refine": "ADD",
"boundingVolume": {
"region": [
0.16042278896694803,
0.8514758183340863,
0.16045106439644147,
0.8514996024839743,
233.458193,
301.62112
]
},
"content": {
"uri": "b3dms/R.b3dm",
"boundingVolume": {
"region": [
0.16042278896694803,
0.8514758183340863,
0.16045106439644147,
0.8514996024839743,
233.458193,
301.62112
]
}
},
"geometricError": 0.0
},
"properties": {
"gmlID": {},
"StoreysBelowGround": {
"maximum": 2,
"minimum": 0
},
"LoD1_datenquelleBodenhoehe": {
"maximum": 2000,
"minimum": 1000
},
"baublockNummer": {
"maximum": 107226,
"minimum": 107205
},
"dachgeschossausbau": {
"maximum": 3000,
"minimum": -1000
},
"gebaeudekennzeichen_1": {},
"hoeheFirst": {
"maximum": 307.5,
"minimum": 242.1
},
"CreationDate": {},
"geschossflaeche": {
"maximum": 1482,
"minimum": 10
},
"alkisId": {},
"gmlIdALKISLageBezeichnung_1": {},
"StoreysAboveGround": {
"maximum": 7,
"minimum": 1
},
"YearOfConstruction": {
"maximum": 2017,
"minimum": 1929
},
"baublockseitenNummer": {
"maximum": 4,
"minimum": 1
},
"LoD1_datenquelleLage": {
"maximum": 1000,
"minimum": 1000
},
"umbauterRaum": {
"maximum": 11395,
"minimum": 28
},
"grundflaeche": {
"maximum": 741,
"minimum": 2
},
"FeatureType": {},
"MeasuredHeight": {
"maximum": 59.7,
"minimum": 1
},
"statusDesGebaeudes": {
"maximum": 1,
"minimum": 1
},
"LocalityName": {},
"ThoroughfareNumber": {},
"ThoroughfareName": {},
"Longitude": {
"maximum": 9.193168808297884,
"minimum": 9.191674771677906
},
"Latitude": {
"maximum": 48.78733347939904,
"minimum": 48.786123496366585
}
}
}
\ No newline at end of file
{
"asset": {
"version": "0.0"
},
"geometricError": 39.084425356368904,
"root": {
"refine": "ADD",
"boundingVolume": {
"region": [
0.16041667550827962,
0.8514723909274853,
0.16046363002656053,
0.8515019513081981,
233.195503,
268.220158
]
},
"content": {
"uri": "b3dms/R.b3dm",
"boundingVolume": {
"region": [
0.16041667550827962,
0.8514723909274853,
0.16046363002656053,
0.8515019513081981,
233.195503,
268.220158
]
}
},
"geometricError": 0.0
},
"properties": {
"gebaeudekennzeichen_2": {},
"grundflaeche": {
"maximum": 341,
"minimum": 3
},
"dachgeschossausbau": {
"maximum": 3000,
"minimum": -1000
},
"FeatureType": {},
"statusDesGebaeudes": {
"maximum": 1,
"minimum": 1
},
"gmlIdALKISLageBezeichnung_1": {},
"StoreysAboveGround": {
"maximum": 6,
"minimum": 1
},
"YearOfConstruction": {
"maximum": 2015,
"minimum": 1949
},
"baublockseitenNummer": {
"maximum": 5,
"minimum": 1
},
"LoD1_datenquelleBodenhoehe": {
"maximum": 1000,
"minimum": 1000
},
"LoD1_datenquelleLage": {
"maximum": 1000,
"minimum": 1000
},
"umbauterRaum": {
"maximum": 5981,
"minimum": 8
},
"gmlIdALKISLageBezeichnung_2": {},
"MeasuredHeight": {
"maximum": 24.7,
"minimum": 0.9
},
"CreationDate": {},
"gebaeudekennzeichen_1": {},
"hoeheFirst": {
"maximum": 271.3,
"minimum": 240.2
},
"gmlID": {},
"geschossflaeche": {
"maximum": 2113,
"minimum": 3
},
"alkisId": {},
"StoreysBelowGround": {
"maximum": 2,
"minimum": 0
},
"baublockNummer": {
"maximum": 107227,
"minimum": 107205
},
"LocalityName": {},
"ThoroughfareNumber": {},
"ThoroughfareName": {},
"Longitude": {
"maximum": 9.193888765870629,
"minimum": 9.191391539460852
},
"Latitude": {
"maximum": 48.78746805711388,
"minimum": 48.785921840210726
}
}
}
\ No newline at end of file
{
"asset": {
"version": "0.0"
},
"geometricError": 84.67816281509891,
"root": {
"refine": "ADD",
"boundingVolume": {
"region": [
0.1604120669069954,
0.8514671950157275,
0.1604678366170678,
0.8515064828890897,
233.053738,
278.57
]
},
"content": {
"uri": "b3dms/R.b3dm",
"boundingVolume": {
"region": [
0.1604120669069954,
0.8514671950157275,
0.1604678366170678,
0.8515064828890897,
233.053738,
278.57
]
}
},
"geometricError": 0.0
},
"properties": {
"gebaeudekennzeichen_2": {},
"grundflaeche": {
"maximum": 879,
"minimum": 6
},
"dachgeschossausbau": {
"maximum": 3000,
"minimum": -1000
},
"FeatureType": {},
"statusDesGebaeudes": {
"maximum": 1,
"minimum": 1
},
"gmlIdALKISLageBezeichnung_1": {},
"StoreysAboveGround": {
"maximum": 7,
"minimum": 1
},
"YearOfConstruction": {
"maximum": 2017,
"minimum": 1904
},
"baublockseitenNummer": {
"maximum": 5,
"minimum": 1
},
"LoD1_datenquelleBodenhoehe": {
"maximum": 2000,
"minimum": 1000
},
"LoD1_datenquelleLage": {
"maximum": 1000,
"minimum": 1000
},
"umbauterRaum": {
"maximum": 19095,
"minimum": 16
},
"gmlIdALKISLageBezeichnung_2": {},
"MeasuredHeight": {
"maximum": 24.3,
"minimum": 1.9
},
"CreationDate": {},
"gebaeudekennzeichen_1": {},
"hoeheFirst": {
"maximum": 282.8,
"minimum": 241.5
},
"gmlID": {},
"geschossflaeche": {
"maximum": 5778,
"minimum": 6
},
"alkisId": {},
"StoreysBelowGround": {
"maximum": 4,
"minimum": 0
},
"baublockNummer": {
"maximum": 107227,
"minimum": 107205
},
"LocalityName": {},
"ThoroughfareNumber": {},
"ThoroughfareName": {},
"Longitude": {
"maximum": 9.194129785752834,
"minimum": 9.19116602302604
},
"Latitude": {
"maximum": 48.78772769757349,
"minimum": 48.78566245389924
}
}
}
\ No newline at end of file
{
"asset": {
"version": "0.0"
},
"geometricError": 35.93947937894208,
"root": {
"refine": "ADD",
"boundingVolume": {
"region": [
0.16043612181516045,
0.8514852982081099,
0.1604435899169862,
0.8514899865142226,
237.745486,
262.385603
]
},
"content": {
"uri": "b3dms/R.b3dm",
"boundingVolume": {
"region": [
0.16043612181516045,
0.8514852982081099,
0.1604435899169862,
0.8514899865142226,
237.745486,
262.385603
]
}
},
"geometricError": 0.0
},
"properties": {
"gebaeudekennzeichen_1": {},
"anzahlDerEinBisZweiZimmerWohnungen": {
"maximum": 3,
"minimum": 1
},
"LoD1_datenquelleBodenhoehe": {
"maximum": 1000,
"minimum": 1000
},
"gmlIdALKISLageBezeichnung_2": {},
"geschossflaeche": {
"maximum": 1470,
"minimum": 537
},
"StoreysAboveGround": {
"maximum": 6,
"minimum": 5
},
"umbauterRaum": {
"maximum": 4655,
"minimum": 1761
},
"MeasuredHeight": {
"maximum": 22.4,
"minimum": 22
},
"FeatureType": {},
"baublockseitenNummer": {
"maximum": 3,
"minimum": 1
},
"gmlID": {},
"YearOfConstruction": {
"maximum": 1991,
"minimum": 1969
},
"anzahlDerDreiBisVierZimmerWohnungen": {
"maximum": 10,
"minimum": 5
},
"statusDesGebaeudes": {
"maximum": 1,
"minimum": 1
},
"LoD1_datenquelleLage": {
"maximum": 1000,
"minimum": 1000
},
"gmlIdALKISLageBezeichnung_1": {},
"StoreysBelowGround": {
"maximum": 2,
"minimum": 0
},
"dachgeschossausbau": {
"maximum": 3000,
"minimum": 3000
},
"hoeheFirst": {
"maximum": 266.8,
"minimum": 265.3
},
"gebaeudekennzeichen_2": {},
"CreationDate": {},
"alkisId": {},
"baublockNummer": {
"maximum": 107226,
"minimum": 107226
},
"grundflaeche": {
"maximum": 210,
"minimum": 105
},
"LocalityName": {},
"ThoroughfareNumber": {},
"ThoroughfareName": {},
"Longitude": {
"maximum": 9.19274055217104,
"minimum": 9.192576333508102
},
"Latitude": {
"maximum": 48.78678252491634,
"minimum": 48.78667977173829
}
}
}
\ No newline at end of file
$(function () {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y';
var imageryViewModels = [];
imageryViewModels.push(new Cesium.ProviderViewModel({
name: 'Sentinel-2',
iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'),
tooltip: 'Sentinel-2 cloudless.',
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3954 });
}
}));
imageryViewModels.push(new Cesium.ProviderViewModel({
name: 'Blue Marble',
iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blueMarble.png'),
tooltip: 'Blue Marble Next Generation July, 2004 imagery from NASA.',
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3845 });
}
}));
var viewer = new Cesium.Viewer('cesiumContainer',
{
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
terrainProvider : new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1)
}),
scene3DOnly: false,
shouldAnimate: true,
animation: true,
infoBox: true,
baseLayerPicker: true,
fullscreenButton: false,
timeline: false,
navigationHelpButton: true,
navigationInstructionsInitiallyVisible: false,
homeButton: false,
selectionIndicator: true,
geocoder: true,
// imageryProviderViewModels: imageryViewModels
});
// var layer = viewer.imageryLayers.addImageryProvider(
// new Cesium.IonImageryProvider({ assetId: 3 })
// );
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3954 })
);
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.addEventListener('click', function() {
canvas.focus();
});
canvas.focus();
var scene = viewer.scene;
// var osmBuildings = viewer.scene.primitives.add(
// new Cesium.Cesium3DTileset({
// url: Cesium.IonResource.fromAssetId(96188),
// })
// );
///////////////////////////// Target //////////////////////////
var target_tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/target_black/tileset.json',
show: true
}));
target_tileset.readyPromise.then(function (target_tileset) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height =53;
var cartographic = Cesium.Cartographic.fromCartesian(target_tileset.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R));
target_tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(target_tileset);
});
target_tileset.readyPromise.then(function(target_tileset){
target_tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('black',0.5)",
})
});
///////////////////////////// Layer one //////////////////////////
var L1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/L1_yellow/tileset.json',
show: true,
}));
L1.readyPromise.then(function (L1) {
return zoomAll(L1);
});
L1.readyPromise.then(function (L1) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height =53;
var cartographic = Cesium.Cartographic.fromCartesian(L1.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R));
L1.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(L1);
});
L1.readyPromise.then(function(L1){
L1.style = new Cesium.Cesium3DTileStyle({
color: "color('yellow',1)",
})
});
///////////////////////////// Layer 2 //////////////////////////
var L2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/L2_red/tileset.json',
show: true,
}));
L2.readyPromise.then(function (L2) {
return zoomAll(L2);
});
L2.readyPromise.then(function (L2) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height =53;
var cartographic = Cesium.Cartographic.fromCartesian(L2.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R));
L2.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(L2);
});
L2.readyPromise.then(function(L2){
L2.style = new Cesium.Cesium3DTileStyle({
color: "color('red',1)",
})
});
///////////////////////////// Layer 3 //////////////////////////
var L3 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/L3_green/tileset.json',
show: true,
}));
L3.readyPromise.then(function (L3) {
return zoomAll(L3);
});
L3.readyPromise.then(function (L3) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height =53;
var cartographic = Cesium.Cartographic.fromCartesian(L3.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R));
L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(L3);
});
L3.readyPromise.then(function(L3){
L3.style = new Cesium.Cesium3DTileStyle({
color: "color('green',1)",
})
});
///////////////////////////// Layer 3 //////////////////////////
var L4 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/L4_brown/tileset.json',
show: true,
}));
L4.readyPromise.then(function (L4) {
return zoomAll(L4);
});
L4.readyPromise.then(function (L4) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height =53;
var cartographic = Cesium.Cartographic.fromCartesian(L4.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R));
L4.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(L4);
});
L4.readyPromise.then(function(L4){
L4.style = new Cesium.Cesium3DTileStyle({
color: "color('CORAL',1)",
})
});
var camera = viewer.camera;
var controller = scene.screenSpaceCameraController;
var r = 0;
var center = new Cesium.Cartesian3();
var hpRoll = new Cesium.HeadingPitchRoll();
var hpRange = new Cesium.HeadingPitchRange();
var speed = 0.1;
var deltaRadians = Cesium.Math.toRadians(3.0);
var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0);
var speedVector = new Cesium.Cartesian3();
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
viewer.scene.globe.enableLighting = true; // set lighting to true
var zoomAll = function (tileset) {
return new Promise(function (resolve, reject) {
if (!tileset) { reject("Tileset is undifined"); }
viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve();
});
}
// HTML overlay for showing feature name on mouseover
var nameOverlay = document.createElement('div');
viewer.container.appendChild(nameOverlay);
nameOverlay.className = 'backdrop';
nameOverlay.style.display = 'none';
nameOverlay.style.position = 'absolute';
nameOverlay.style.bottom = '0';
nameOverlay.style.left = '0';
nameOverlay.style['pointer-events'] = 'none';
nameOverlay.style.padding = '4px';
nameOverlay.style.backgroundColor = 'green';
// Information about the currently selected feature
var selected = {
feature: undefined,
originalColor: new Cesium.Color()
};
// Information about the currently highlighted feature
var highlighted = {
feature: undefined,
originalColor: new Cesium.Color()
};
var selectedEntity = new Cesium.Entity();
// Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
// 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 pickedFeature = viewer.scene.pick(movement.endPosition);
if (!Cesium.defined(pickedFeature)) {
nameOverlay.style.display = 'none';
return;
}
// A feature was picked, so show it's overlay content
nameOverlay.style.display = 'block';
nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
nameOverlay.style.left = movement.endPosition.x + 'px';
var name = pickedFeature.getProperty('name');
if (!Cesium.defined(name)) {
name = pickedFeature.getProperty('id');
}
nameOverlay.textContent = name;
// Highlight the feature if it's not already selected.
if (pickedFeature !== selected.feature) {
highlighted.feature = pickedFeature;
Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
pickedFeature.color = Cesium.Color.AQUA;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Color a feature on selection and show metadata in the InfoBox.
var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
// If a feature was previously selected, undo the highlight
if (Cesium.defined(selected.feature)) {
selected.feature.color = selected.originalColor;
selected.feature = undefined;
}
// Pick a new feature
var pickedFeature = viewer.scene.pick(movement.position);
if (!Cesium.defined(pickedFeature)) {
clickHandler(movement);
return;
}
// Select the feature if it's not already selected
if (selected.feature === pickedFeature) {
return;
}
selected.feature = pickedFeature;
// Save the selected feature's original color
if (pickedFeature === highlighted.feature) {
Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
highlighted.feature = undefined;
} else {
Cesium.Color.clone(pickedFeature.color, selected.originalColor);
}
// Highlight newly selected feature
pickedFeature.color = Cesium.Color.WHITE;
// Set feature infobox description
var featureName = pickedFeature.getProperty('name');
selectedEntity.name = featureName;
selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
viewer.selectedEntity = selectedEntity;
selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +
'<tr><th>Bld function</th><td>' + pickedFeature.getProperty('Function') + '</td></tr>' +
'<tr><th>gmlID</th><td>' + pickedFeature.getProperty('gmlIDStr') + '</td></tr>' +
'<tr><th>Dachgeschossausbau</th><td>' + pickedFeature.getProperty('dachgeschossausbau') + '</td></tr>' +
'<tr><th>Lon</th><td>' + pickedFeature.getProperty('Longitude') + '</td></tr>' +
'<tr><th>Lat</th><td>' + pickedFeature.getProperty('Latitude') + '</td></tr>' +
'<tr><th>Geschossflaeche (sqm)</th><td>' + pickedFeature.getProperty('geschossflaeche') + '</td></tr>' +
'<tr><th>YearOfConstruction</th><td>' + pickedFeature.getProperty('YearOfConstruction') + '</td></tr>' +
'<tr><th>MeasuredHeight (m):</th><td>' + pickedFeature.getProperty('MeasuredHeight') + '</td></tr>' +
'<tr><th>HoeheFirst (m)</th><td>' + pickedFeature.getProperty('hoeheFirst') + '</td></tr>' +
'<tr><th>HoeheTrauf (m)</th><td>' + pickedFeature.getProperty('hoeheTrauf') + '</td></tr>' +
'<tr><th>Grundflaeche (sqm)</th><td>' + pickedFeature.getProperty('grundflaeche') + '</td></tr>' +
'<tr><th>StoreysAboveGround: </th><td>' + pickedFeature.getProperty('StoreysAboveGround') + '</td></tr>' +
'<tr><th>StoreysBelowGround: </th><td>' + pickedFeature.getProperty('StoreysBelowGround') + '</td></tr>' +
'<tr><th>Durchfahrtsstr.: </th><td>' + pickedFeature.getProperty('ThoroughfareName') + '</td></tr>' +
'<tr><th>Hausnummer.: </th><td>' + pickedFeature.getProperty('ThoroughfareNumber') + '</td></tr>' +
'</tbody></table>';
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
var scene = viewer.scene;
var longitude;
var latitude;
var fid;
var featuretype;
var gmlid;
var selID = new Array();
var cnt = 0;
var lastPickedObject;
var viewModel = {
rightClickAction: 'properties',
middleClickAction: 'hide'
};
Cesium.knockout.track(viewModel);
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
// makes camera go to a certain position given by the coordinates below
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
console.log("no feature defined")
return;
}
var propertyNames = feature.getPropertyNames();
var lat = feature.getProperty("Latitude");
var lon = feature.getProperty("Longitude");
var tmp = feature.getProperty("YearOfConstruction");
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900),
maximumHeight: 1500.0,
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(45.0)
},
duration: 2
}); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.rightClickAction;
action === 'properties'
printProperties(movement, feature)
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
function printProperties(movement, feature) {
console.log('Properties:');
var propertyNames = feature.getPropertyNames();
var length = propertyNames.length;
for (var i = 0; i < length; ++i) {
var propertyName = propertyNames[i];
if (propertyName == 'gmlIdALKISLageBezeichnung_1' ||
propertyName == 'gmlIdALKISLageBezeichnung_2' ||
propertyName == 'gmlIdALKISLageBezeichnung_3' ||
propertyName == 'gmlIdALKISLageBezeichnung_4' ||
propertyName == 'gmlIdALKISLageBezeichnung_5' ||
propertyName == 'gmlIdALKISLageBezeichnung_6')
console.log(' ' + propertyName + ': ' + 'zensiert');
else
console.log(' ' + propertyName + ': ' + feature.getProperty(propertyName));
}
// Evaluate feature description
//console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
}
handler.setInputAction(function (movement) {
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.middleClickAction;
if (action === 'hide') {
feature.show = false;
}
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
/*
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${Latitude} >= 48.8170", "color('purple', 0.5)"],
["${Latitude} >= 48.7950", "color('red')"],
["${Latitude} >= 48.7830", "color('orange')"],
["${Latitude} >= 48.7710", "color('yellow')"],
["${Latitude} >= 48.7690", "color('lime')"],
["${Latitude} >= 48.7570", "color('cyan')"],
["${Latitude} >= 48.7470", "color('CORNFLOWERBLUE')"],
["${Latitude} >= 48.7370", "color('DARKMAGENTA')"],
["true", "color('lightblue')"]
]
}
});
});
*/
function showLegend() {
$("#legend").css("display", "block");
}
function hideLegend() {
$("#legend").css("display", "none");
}
// Legend - Colour Table
function emptyColourTable() {
$(".inner").empty();
}
/*
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> 113007 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 113001 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ffb400'></td><td> 112996 </td></tr>" +
"<tr><td class='outlined' bgcolor='yellow'></td><td> 112991</td></tr>" +
"<tr><td class='outlined' bgcolor='#00ff00'></td><td> 112986 </td></tr>" +
"<tr><td class='outlined' bgcolor='cyan'></td><td> 112981 </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> 112976 </td></tr>" +
"</table>" );
}
*/
/*
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> x </td></tr>" +
"<tr><td class='outlined' bgcolor='green'></td><td> y </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> z </td></tr>" +
"</table>" );
}
*/
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> >30 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 24 </td></tr>" +
"<tr><td class='outlined' bgcolor='#FFB300'></td><td> 18</td></tr>" +
"<tr><td class='outlined' bgcolor='#BFBF00'></td><td> 12 </td></tr>" +
"<tr><td class='outlined' bgcolor='#0080FF',0)'></td><td> 6 </td></tr>" +
"<tr><td class='outlined' bgcolor='#0000FF',0)'></td><td> 0 </td></tr>" +
"</table>" );
}
// return Cesium.when(target_tileset.readyPromise).then(function (target_tileset) {
// target_tileset.style = new Cesium.Cesium3DTileStyle({
// color: "color('black',1)",
// /*color: {
// conditions: [
// ['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'],
// ['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'],
// ['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'],
// ['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'],
// ['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'],
// ['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'],
// ['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'],
// ['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'],
// ['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'],
// ['true', 'color("lightblue")']
// ]
// }
// */
// });
// showLegend();
// setHeightTable();
// });
/*
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
['Number(${YearOfConstruction}) >= 2015', 'rgb(127,201,127)'],
['Number(${YearOfConstruction}) >= 2005', 'rgb(190,174,212)'],
['Number(${YearOfConstruction}) >= 1990', 'rgb(253,192,134)'],
['Number(${YearOfConstruction}) >= 1975', 'rgb(255,255,153)'],
['Number(${YearOfConstruction}) >= 1950', 'rgb(56,108,176)'],
['Number(${YearOfConstruction}) >= 1920', 'rgb(240,2,127)'],
['Number(${YearOfConstruction}) >= 1900', 'rgb(191,91,23)'],
['Number(${YearOfConstruction}) >= 1800', 'rgb(102,102,102)'],
['true', 'color("lightblue")']
]
}
});
}); */
});
\ No newline at end of file
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Stuttgart</title>
<link rel="stylesheet" href="css/myCesiumStyle.css">
<link rel="stylesheet" href="css/legend.css">
<link href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"
integrity="sha256-1A78rJEdiWTzco6qdn3igTBv9VupN3Q1ozZNTR4WE/Y=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4=" crossorigin="anonymous"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Cesium.js"></script>
</head>
<body>
<header>
<img src="imgs/icity.png" class="titleFigure">
<h2> TP2.4 - Prototyp 4: Webbasierte Visualisierung von CFD Simulationsdaten </h2>
</header>
<script src="circData.js"></script>
<div id="cesiumContainer" class="pagecesium">
<div id="legend">
<table>
<tr style="height: 30px;vertical-align: top;">
<td colspan="2">Pressure (Pa) </td>
<td></td>
</tr>
<tr>
<td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
<td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
</tr>
</table>
</div>
</div>
<footer>
<p align="center">
<h5>Copyright &copy; 2018 - 2020, HFT-Stuttgart. All rights reserved</h5>
</p>
</footer>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment