Skip to content

GitLab

Commit 4c68f557 authored by JOE XMG's avatar JOE XMG
Browse files

update

parent 1df6094d
Pipeline #9113 passed with stage
in 19 seconds
Hide whitespace changes
Inline Side-by-side
public/udigit4icity/index.html
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>
...@@ -24,7 +25,7 @@ ...@@ -24,7 +25,7 @@
#chartControls label, #chartControls label,
#chartControls select, #chartControls select,
#chartControls button { #chartControls button {
font-size: 16px; font-size: 16px;
margin-bottom: 15px margin-bottom: 15px
} }
...@@ -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;
...@@ -68,9 +61,9 @@ ...@@ -68,9 +61,9 @@
} }
#main-menu { #main-menu {
width: 20%; width: 20%;
height: 100%; height: 100%;
background-color: #2c3e50; background-color: #2c3e50;
color: rgb(91, 89, 89); color: rgb(91, 89, 89);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -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;
...@@ -161,27 +155,37 @@ ...@@ -161,27 +155,37 @@
left: 0; left: 0;
top: 2%; top: 2%;
right:100; right:100;
width: 100%; width: 100%;
z-index: 3; z-index: 3;
} }
.dark-popup-content { .dark-popup-content {
color: #232020; color: #232020;
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>
...@@ -195,7 +199,7 @@ ...@@ -195,7 +199,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="mainMenu"> <div id="mainMenu">
<label for="measurementType">Select Measurement Type:</label> <label for="measurementType">Select Measurement Type:</label>
...@@ -211,26 +215,25 @@ ...@@ -211,26 +215,25 @@
<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>
const data = [ const data = [
]; ];
//to ensure if plotly and mapbox are loaded //to ensure if plotly and mapbox are loaded
...@@ -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";
...@@ -476,7 +485,7 @@ ...@@ -476,7 +485,7 @@
type: 'scatter3d', type: 'scatter3d',
x: coordinates.map(coord => coord[0]), x: coordinates.map(coord => coord[0]),
y: coordinates.map(coord => coord[1]), y: coordinates.map(coord => coord[1]),
z: timestamps.map((time, i) => new Date(time).toISOString()), z: timestamps.map((time, i) => new Date(time).toISOString()),
mode: 'lines+markers', mode: 'lines+markers',
line: { color: 'dark' }, line: { color: 'dark' },
...@@ -488,10 +497,10 @@ ...@@ -488,10 +497,10 @@
}); });
// to set the layout with mapbox _ access token // to set the layout with mapbox _ access token
const layout = { const layout = {
mapbox: { mapbox: {
style: 'light', style: 'light',
center: { lon: frames[0].data[0].lon[0], lat: frames[0].data[0].lat[0] }, center: { lon: frames[0].data[0].lon[0], lat: frames[0].data[0].lat[0] },
zoom: 10, zoom: 10,
accesstoken: 'pk.eyJ1IjoicmVkaWV0OTk2MyIsImEiOiJjbHJ1cmk5aGUwaDRvMmpuYWM4Z2NqcmZuIn0.c11HYT-5ucd6g6mL03bp3Q', // Mapbox access token accesstoken: 'pk.eyJ1IjoicmVkaWV0OTk2MyIsImEiOiJjbHJ1cmk5aGUwaDRvMmpuYWM4Z2NqcmZuIn0.c11HYT-5ucd6g6mL03bp3Q', // Mapbox access token
...@@ -502,7 +511,7 @@ const layout = { ...@@ -502,7 +511,7 @@ const layout = {
title: 'X Axis', title: 'X Axis',
titlefont: { titlefont: {
family: 'Arial, sans-serif', family: 'Arial, sans-serif',
size: 15, size: 15,
color: 'black' color: 'black'
}, },
tickfont: { tickfont: {
...@@ -516,7 +525,7 @@ const layout = { ...@@ -516,7 +525,7 @@ const layout = {
title: 'Y Axis', title: 'Y Axis',
titlefont: { titlefont: {
family: 'Arial, sans-serif', family: 'Arial, sans-serif',
size: 15, size: 15,
color: 'black' color: 'black'
}, },
tickfont: { tickfont: {
...@@ -530,7 +539,7 @@ const layout = { ...@@ -530,7 +539,7 @@ const layout = {
title: 'Time', title: 'Time',
titlefont: { titlefont: {
family: 'Arial, sans-serif', family: 'Arial, sans-serif',
size: 16, size: 16,
color: 'black' color: 'black'
}, },
tickfont: { tickfont: {
...@@ -540,7 +549,7 @@ const layout = { ...@@ -540,7 +549,7 @@ const layout = {
bold: true bold: true
} }
}, },
// Common font settings for both // Common font settings for both
font: { font: {
family: 'Arial, sans-serif', family: 'Arial, sans-serif',
size: 12, size: 12,
...@@ -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>
...@@ -661,16 +672,16 @@ const popupTemplate = new PopupTemplate({ ...@@ -661,16 +672,16 @@ const popupTemplate = new PopupTemplate({
</tr> </tr>
</table> </table>
` `
}); });
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
}), }),
popupTemplate: popupTemplate, popupTemplate: popupTemplate,
outFields: ["*"] // …include all fields outFields: ["*"] // …include all fields
}); });
...@@ -680,11 +691,11 @@ const featureLayer2 = new FeatureLayer({ ...@@ -680,11 +691,11 @@ const featureLayer2 = new FeatureLayer({
url: "https://services.arcgis.com/1lplwYilIlo008hQ/arcgis/rest/services/Munakata_City_Road/FeatureServer", url: "https://services.arcgis.com/1lplwYilIlo008hQ/arcgis/rest/services/Munakata_City_Road/FeatureServer",
renderer: new SimpleRenderer({ renderer: new SimpleRenderer({
symbol: new SimpleLineSymbol({ symbol: new SimpleLineSymbol({
color: '#7DF9FF', color: '#7DF9FF',
width: 0.1 width: 0.1
}) })
}), }),
outFields: ["*"], outFields: ["*"],
}); });
map.add(featureLayer2); map.add(featureLayer2);
...@@ -847,72 +858,89 @@ map.add(featureLayer2); ...@@ -847,72 +858,89 @@ map.add(featureLayer2);
}); });
map.add(hostedLayer); map.add(hostedLayer);
// usage data with 'usage' and 'count' properties
const usageData = [
{ usage: "educational facilities", count: 100 },
{ usage: "Commercial Facilities", count: 200 },
];
// Additional usage // Building usage data
const additionalUsageData = [ const buildingUsageData = [
{ usage: "apartment house", count: 150 }, { usage: "Educational facilities", count: 100 },
{ usage: "factory", count: 75 }, { usage: "Commercial Facilities", count: 200 },
{ 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, title: {
datasets: [{ text: 'Building Usage'
data: counts, },
backgroundColor: colors tooltip: {
}] trigger: 'item',
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})`;
}
}, },
options: { series: [{
title: { type: 'pie',
display: true, data: buildingUsageData.map((item, index) => ({
text: "Building Usage" name: item.usage,
}, value: item.count
legend: { })),
labels: { itemStyle: {
fontColor: 'white' color: (params) => colors[params.dataIndex]
}
} }
} }]
}); };
// To add an event listener for toggling 3D plot visibility usagePieChart.setOption(options);
document.getElementById("toggle3DButton").addEventListener("click", function () {
// Function to toggle 3D building and pie chart visibility
document.getElementById("toggle3DButton").addEventListener("click", function () {
// Toggle 3D building layer visibility
hostedLayer.visible = !hostedLayer.visible; 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";
}
});
const graphicsLayer = new GraphicsLayer(); const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer); map.add(graphicsLayer);
...@@ -1136,10 +1164,10 @@ animateMovingFeatures("https://ogcapi.hft-stuttgart.de/ogc_api_moving_features/c ...@@ -1136,10 +1164,10 @@ animateMovingFeatures("https://ogcapi.hft-stuttgart.de/ogc_api_moving_features/c
// Set the layout with mapbox style and access token // Set the layout with mapbox style and access token
const layout = { const layout = {
mapbox: { mapbox: {
style: 'light', style: 'light',
center: { lon: features[0].geometry.coordinates[0][0], lat: features[0].geometry.coordinates[0][1] }, center: { lon: features[0].geometry.coordinates[0][0], lat: features[0].geometry.coordinates[0][1] },
zoom: 10, zoom: 10,
accesstoken: 'pk.eyJ1IjoicmVkaWV0OTk2MyIsImEiOiJjbHJ1cmk5aGUwaDRvMmpuYWM4Z2NqcmZuIn0.c11HYT-5ucd6g6mL03bp3Q', accesstoken: 'pk.eyJ1IjoicmVkaWV0OTk2MyIsImEiOiJjbHJ1cmk5aGUwaDRvMmpuYWM4Z2NqcmZuIn0.c11HYT-5ucd6g6mL03bp3Q',
}, },
margin: { t: 0, b: 0, l: 0, r: 0 }, margin: { t: 0, b: 0, l: 0, r: 0 },
...@@ -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>
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

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