Skip to content
GitLab
Commit ee52a950 authored by JOE XMG's avatar JOE XMG
Browse files

update

parent 11514f2b
Pipeline #9170 passed with stage
in 38 seconds
Expand all Hide whitespace changes
Inline Side-by-side
public/Exercise 1/building_data.csv 0 → 100644
View file @ ee52a950
This source diff could not be displayed because it is too large. You can view the blob instead.
public/Exercise 1/building_data.js 0 → 100644
View file @ ee52a950
This diff is collapsed.
public/Exercise 1/index.css 0 → 100644
View file @ ee52a950
#mapid {
height: 100%;
}
body {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
#map-container {
flex: 1;
height: 100vh;
}
#chart-container {
flex: 1;
padding: 20px;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
}
\ No newline at end of file
public/Exercise 1/index.html 0 → 100644
View file @ ee52a950
<html>
<head>
<title>Building - Heat Demand</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="building_data.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="map-container">
<div id="mapid"></div>
</div>
<div id="chart-container">
<canvas id="yocChart"></canvas>
<canvas id="yocChart2"></canvas>
</div>
<script>
var mymap = L.map('mapid').setView([48.79205, 9.20758], 16);
var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
// select one basemap from https://leaflet-extras.github.io/leaflet-providers/preview/
var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
});
CartoDB_Positron.addTo(mymap);
function onEachFeature(feature, layer) {
layer.bindPopup(
'<h4>' +
feature.properties.gml_id + '</h4><p>Specific Space Heating Demand: ' + feature.properties
.Specific_s +
'[kWh/m².year] </p>');
}
function getColor(d) {
return d > 250 ? '#F22E22' :
d > 200 ? '#F56D1F' :
d > 150 ? '#F9A717' :
d > 125 ? '#FECE02' :
d > 100 ? '#F6EC00' :
d > 75 ? '#D1E023' :
d > 50 ? '#B2D531' :
d > 25 ? '#A4C711' :
d > 0 ? '#61B949' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.Specific_s),
weight: 1,
opacity: 1,
color: 'white',
// dashArray: '3',
fillOpacity: 0.95
};
}
L.geoJSON(building_data, {
onEachFeature: onEachFeature,
style: style,
}).addTo(mymap);
// Retrieve the building year of construction data from the GeoJSON
var buildingYoc = building_data.features.map(function (feature) {
return feature.properties.Year_of_co;
});
// Count the occurrences of each building age
var yocCounts = {};
buildingYoc.forEach(function (Year_of_co) {
if (yocCounts[Year_of_co]) {
yocCounts[Year_of_co]++;
} else {
yocCounts[Year_of_co] = 1;
}
});
// Prepare the chart data
var yocLabels = Object.keys(yocCounts);
var yocData = Object.values(yocCounts);
// Create the building year of construction distribution chart using Chart.js
var ctx = document.getElementById('yocChart').getContext('2d');
var ctx2 = document.getElementById('yocChart2').getContext('2d');
var yocChart = new Chart(ctx, {
type: 'bar',
data: {
labels: yocLabels,
datasets: [{
label: 'No. of buildings',
data: yocData,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Building Distribution According to its Year of Construction'
}
},
scales: {
y: {
beginAtZero: true,
stepSize: 15
}
}
}
});
var yocChart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: yocLabels,
datasets: [{
label: 'No. of buildings',
data: yocData,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Building Distribution According to its Year of Construction'
}
},
scales: {
y: {
beginAtZero: true,
stepSize: 15
}
}
}
});
</script>
</body>
</html>
\ No newline at end of file
public/index_adv_smart2.html 0 → 100644
View file @ ee52a950
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://3dps.gis.lrg.tum.de/viewerCesiumNavigationMixin.min.js"> </script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height:100%"></div>
<script>
// Component 1: Main Cesium 3D Viewer
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
baseLayer: false,
vrButton: false,
geocoder: false,
navigationHelpButton: false,
selectionIndicator: false,
shadows: false,
timeline: true,
sceneModePicker: false,
terrainProvider: new Cesium.CesiumTerrainProvider({
url: 'https://web3d.basemap.de/cesium/dgm5-mesh',
credit: new Cesium.Credit("\u0026copy; 2023 basemap.de", true)
}),
imageryProvider: new Cesium.WebMapServiceImageryProvider({
url: 'https://sgx.geodatenzentrum.de/wms_basemapde?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities',
layers: "de_basemapde_web_raster_farbe",
parameters: {
transparent: true,
format: "image/png",
}
})
});
viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
// Component 2: 3D Tileset
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'https://web3d.basemap.de/cesium/buildings-fly/root.json'
}));
// === Settting the style of the 3D Tileset ===
var cityStyle = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${surface} === 'wall'", "color('#f2f2f2')"],
["${surface} === 'roof'", "color('#ff5c4d')"],
["${surface} === 'bridge'", "color('#999999')"]
]
},
});
tileset.style = cityStyle
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(10.277367, 47.415311, 3500.0),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-40.0),
roll: 0.0
}
});
</script>
</body>
</html>
\ No newline at end of file
Supports Markdown
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

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal