Skip to content
GitLab
Commit 4c68f557 authored by Santhanavanich's avatar Santhanavanich
Browse files

update

parent 1df6094d
master
No related merge requests found
Pipeline #9113 passed with stage
in 19 seconds
Show whitespace changes
Inline Side-by-side
Showing
with 129 additions and 103 deletions
+129 -103
public/udigit4icity/index.html
+ 129
- 103
View file @ 4c68f557
...@@ -5,15 +5,16 @@ ...@@ -5,15 +5,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integrated Web Map and ECharts</title> <title>3D Web Mapping Application</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/css/main.css"> <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/css/main.css">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js"></script> <script src="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css" rel="stylesheet" /> <link href="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.common.min.js" integrity="sha512-klHlINboj5r1sfTjdyb2PJn7ixcYb5zN+WC/gbFlK3r8/nmhmwQ3yvi5q49tX39DcHX/HwPnXTIblG5/cb6IEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts-gl@5.0.0/dist/echarts-gl.min.css"> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/dark/main.css" /> <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/dark/main.css" />
<style> <style>
...@@ -35,15 +36,7 @@ ...@@ -35,15 +36,7 @@
overflow: hidden; overflow: hidden;
} }
#usage-pie-chart-container {
z-index: 1;
position: absolute;
top:10px;
right: 0px;
width: 20%;
height: 0.2px;
bottom:10%;
}
#mainMenu { #mainMenu {
position: absolute; position: absolute;
...@@ -126,6 +119,7 @@ ...@@ -126,6 +119,7 @@
position: absolute; position: absolute;
top: 90%; top: 90%;
left: 36%; left: 36%;
padding: 5px; padding: 5px;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px; border-radius: 5px;
...@@ -170,18 +164,28 @@ ...@@ -170,18 +164,28 @@
background-color: #171515; /* to dark gray */ background-color: #171515; /* to dark gray */
} }
#usage-pie-chart {
display: none;
width: 600px;
height: 400px;
z-index: 1;
position: absolute;
top:65%;
right: 0%;
bottom:0%;
}
</style> </style>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div id="usage-pie-chart-container" style="width: 300px; height: 300px; ">
<canvas id="usage-pie-chart" style="width: 100%; height: 100%;"></canvas>
</div>
<div id="main"></div> <div id="main"></div>
<div id="viewDiv"></div> <div id="viewDiv"></div>
<div id="timeSlider"></div> <div id="timeSlider"></div>
<div id="usage-pie-chart"></div>
<div class="legend"></div> <div class="legend"></div>
<div class="legend-building"></div> <div class="legend-building"></div>
...@@ -211,20 +215,19 @@ ...@@ -211,20 +215,19 @@
<option value="bar">Bar Chart</option> <option value="bar">Bar Chart</option>
</select> </select>
<button id="loadDatastream">Load Datastream</button> <button id="loadDatastream">Load Datastream</button>
<button id="toggleSpaceTime">Bus Space-Time Visualization</button> <button id="toggleSpaceTime">Bus Space-Time Visualization</button>
<button id="toggle3DButton">3D City Building</button> <button id="toggle3DButton">3D City Building</button>
</div> </div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js"></script> <script src="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@5.0.0/dist/echarts-gl.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://js.arcgis.com/4.28/"></script> <script src="https://js.arcgis.com/4.28/"></script>
<script> <script>
...@@ -240,6 +243,9 @@ ...@@ -240,6 +243,9 @@
var selectedMeasurementType = document.getElementById("measurementType").value; var selectedMeasurementType = document.getElementById("measurementType").value;
var selectedChartType = document.getElementById("chartType").value; var selectedChartType = document.getElementById("chartType").value;
// Mapping from sensor location to their corresponding Datastream id // Mapping from sensor location to their corresponding Datastream id
var datastreamIds = { var datastreamIds = {
"Co-working": { "Co-working": {
...@@ -328,7 +334,7 @@ ...@@ -328,7 +334,7 @@
}, },
}, },
grid: { grid: {
left: '5%', left: '4%',
right: '15%', right: '15%',
top: '10%', top: '10%',
bottom: '10%', bottom: '10%',
...@@ -340,14 +346,14 @@ ...@@ -340,14 +346,14 @@
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
color: 'green', color: 'green',
fontSize: 18, fontSize: 20,
}, },
}, },
yAxis: { yAxis: {
name: selectedMeasurementType.charAt(0).toUpperCase() + selectedMeasurementType.slice(1), name: selectedMeasurementType.charAt(0).toUpperCase() + selectedMeasurementType.slice(1),
axisLabel: { axisLabel: {
color: 'red', color: 'red',
fontSize: 18, fontSize: 19,
}, },
}, },
series: resultData.map(locationData => ({ series: resultData.map(locationData => ({
...@@ -419,6 +425,9 @@ ...@@ -419,6 +425,9 @@
}); });
} }
function createLegendItem(color, label, id) { function createLegendItem(color, label, id) {
const legendItem = document.createElement("div"); const legendItem = document.createElement("div");
legendItem.className = "legend-item"; legendItem.className = "legend-item";
...@@ -573,6 +582,8 @@ function loadHistoricalRoutes() { ...@@ -573,6 +582,8 @@ function loadHistoricalRoutes() {
animateHistoricalMovingFeatures('https://ogcapi.hft-stuttgart.de/ogc_api_moving_features/collections/bus_1/items', [226, 119, 40], 'Bus', 'Bus', 'busLegend'); animateHistoricalMovingFeatures('https://ogcapi.hft-stuttgart.de/ogc_api_moving_features/collections/bus_1/items', [226, 119, 40], 'Bus', 'Bus', 'busLegend');
} }
</script> </script>
<script> <script>
...@@ -665,7 +676,7 @@ const popupTemplate = new PopupTemplate({ ...@@ -665,7 +676,7 @@ const popupTemplate = new PopupTemplate({
}); });
const featureLayer1 = new FeatureLayer({ const featureLayer1 = new FeatureLayer({
url: "https://services.arcgis.com/1lplwYilIlo008hQ/arcgis/rest/services/Datastreams_observation_xy_splited/FeatureServer", url: "https://services.arcgis.com/1lplwYilIlo008hQ/arcgis/rest/services/Datastreams_observation_xy/FeatureServer",
renderer: new SimpleRenderer({ renderer: new SimpleRenderer({
symbol: webStyleSymbol // specified symbol symbol: webStyleSymbol // specified symbol
}), }),
...@@ -848,71 +859,88 @@ map.add(featureLayer2); ...@@ -848,71 +859,88 @@ map.add(featureLayer2);
map.add(hostedLayer); map.add(hostedLayer);
// usage data with 'usage' and 'count' properties // Building usage data
const usageData = [ const buildingUsageData = [
{ usage: "educational facilities", count: 100 }, { usage: "Educational facilities", count: 100 },
{ usage: "Commercial Facilities", count: 200 }, { usage: "Commercial Facilities", count: 200 },
]; { usage: "Apartment house", count: 150 },
{ usage: "Factory", count: 75 },
// Additional usage
const additionalUsageData = [
{ usage: "apartment house", count: 150 },
{ usage: "factory", count: 75 },
{ usage: "Other", count: 50 }, { usage: "Other", count: 50 },
{ usage: "Residential", count: 300 }, { usage: "Residential", count: 300 },
{ usage: "business facility", count: 180 }, { usage: "Business facility", count: 180 },
{ usage: "Agriculture, Forestry and Fishing Facilities", count: 90 }, { usage: "Agriculture, Forestry and Fishing Facilities", count: 90 },
{ usage: "Transportation warehouse facilities", count: 120 } { usage: "Transportation warehouse facilities", count: 120 }
]; ];
// Combines all usage_data // Extract labels, counts, and colors
const allUsageData = usageData.concat(additionalUsageData); const labels = buildingUsageData.map(item => item.usage);
const counts = buildingUsageData.map(item => item.count);
// to extract labels and counts const colors = ["#FF6384",
const labels = allUsageData.map(item => item.usage); '#347fb3','#FFCE56','#4BC0C0','#9966FF','#b57433','#3ca33c','#FF99CC','#BDBDBD'
const counts = allUsageData.map(item => item.count);
// colors for each category
const colors = [
"#FF6384",
"#347fb3",
"#FFCE56",
"#4BC0C0",
"#9966FF",
"#b57433",
"#3ca33c",
"#FF99CC",
"#BDBDBD"
]; ];
// Creating pie chart // Create the pie chart using ECharts
const pieChartCanvas = document.getElementById("usage-pie-chart").getContext("2d"); const pieChartContainer = document.getElementById("usage-pie-chart");
const usagePieChart = new Chart(pieChartCanvas, { const usagePieChart = echarts.init(pieChartContainer);
type: "pie",
data: { const options = {
labels: labels,
datasets: [{
data: counts,
backgroundColor: colors
}]
},
options: {
title: { title: {
display: true, text: 'Building Usage'
text: "Building Usage"
}, },
legend: { tooltip: {
labels: { trigger: 'item',
fontColor: 'white' formatter: function(params, ticket, callback) {
const dataIndex = params.dataIndex;
const totalUsage = counts.reduce((acc, cur) => acc + cur, 0);
const percentage = ((counts[dataIndex] / totalUsage) * 100).toFixed(2);
return `${params.name}: ${params.value} (${percentage}% of total: ${totalUsage})`;
} }
},
series: [{
type: 'pie',
data: buildingUsageData.map((item, index) => ({
name: item.usage,
value: item.count
})),
itemStyle: {
color: (params) => colors[params.dataIndex]
} }
}]
};
usagePieChart.setOption(options);
// Function to toggle 3D building and pie chart visibility
document.getElementById("toggle3DButton").addEventListener("click", function () {
// Toggle 3D building layer visibility
hostedLayer.visible = !hostedLayer.visible;
// Toggle pie chart visibility based on 3D building visibility
const pieChartContainer = document.getElementById("usage-pie-chart");
const echartContainer = document.getElementById("main");
const legendContainer = document.querySelector('.legend');
const currentDisplay = pieChartContainer.style.display;
const loadDatastreamButton = document.getElementById("loadDatastream");
if (hostedLayer.visible) {
// If 3D building is visible, show the pie chart
pieChartContainer.style.display = "block";
echartContainer.style.display = "none";
legendContainer.style.display = "none";
} else {
// If 3D building is hidden, hide the pie chart
pieChartContainer.style.display = "none";
echartContainer.style.display = "block";
legendContainer.style.display = "block";
} }
}); });
// To add an event listener for toggling 3D plot visibility
document.getElementById("toggle3DButton").addEventListener("click", function () {
hostedLayer.visible = !hostedLayer.visible;
});
const graphicsLayer = new GraphicsLayer(); const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer); map.add(graphicsLayer);
...@@ -1157,8 +1185,6 @@ animateMovingFeatures("https://ogcapi.hft-stuttgart.de/ogc_api_moving_features/c ...@@ -1157,8 +1185,6 @@ animateMovingFeatures("https://ogcapi.hft-stuttgart.de/ogc_api_moving_features/c
} }
</script> </script>
<script>
const thingsLocations = [ { thingId: 1, locationURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(1)/Locations", datastreamsURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(1)/Datastreams" }, { thingId: 2, locationURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(2)/Locations", datastreamsURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(2)/Datastreams" }, { thingId: 3, locationURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(3)/Locations", datastreamsURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(3)/Datastreams" }, { thingId: 4, locationURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(4)/Locations", datastreamsURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(4)/Datastreams" }, { thingId: 5, locationURL: "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(5)/Locations", datastreamsURL : "https://ogcapi.hft-stuttgart.de/sta/udigit4icity/v1.1/Things(5)/Datastreams" }, ];
</script>
</body> </body>
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