ar2350/Projekt-Visualisierung
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Logos und ein bisschen Layout

Browse Source
This commit is contained in:
ar2350
2026-04-27 22:43:17 +02:00
parent 0a6b638004
commit 8a9911c28c
5 changed files with 120 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -4,12 +4,18 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>LiDAR App</title> <title>LiDAR App</title>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" /> <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
</head> </head>
<body> <body>
<header id="title">
3D-LiDAR Visualisierung
<img id="logoJadeHs" src="logoJadeHs.png" />
<img id="logoLbeg" src="logoLbeg.svg" />
</header>
<button id="resetBtn">Zurück auf Nord</button> <button id="resetBtn">Zurück auf Nord</button>
Hintergrundkarte:
<select name="basemap" id="basemap"> <select name="basemap" id="basemap">
<option value="" disabled selected>Hintergrundkarte</option>
<option value="openfree_bright">OpenFreeMap hell</option> <option value="openfree_bright">OpenFreeMap hell</option>
<option value="openfree_dark">OpenFreeMap dunkel</option> <option value="openfree_dark">OpenFreeMap dunkel</option>
<option value="openfree_liberty">OpenFreeMap Liberty</option> <option value="openfree_liberty">OpenFreeMap Liberty</option>
@@ -17,7 +23,8 @@
<option value="terrain">Terrain</option> <option value="terrain">Terrain</option>
<option value="satellite_terrain">Terrain mit Satellitenbild</option> <option value="satellite_terrain">Terrain mit Satellitenbild</option>
</select> </select>
<div id="map" style="width:100%; height:100vh;"></div>
<div id="map"></div>
</body> </body>
</html> </html>

BIN
logoJadeHs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 652 KiB

23
logoLbeg.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Inkscape (http://www.inkscape.org/) by Marsupilami -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="1024"
height="537"
viewBox="-1.88710317 -1.88710317 127.24670634 66.67764534"
id="svg21462">
<defs
id="defs21464" />
<path
d="m 41.80875,0.7575 36.3925,0 0,8.8675 -9.88375,0 0,7.40375 9.61375,0 0,8.8675 -9.61375,0 0,8.02125 16.4375,0 0,8.8675 -24.965,0 -12.68,0.0425 c 2.55125,-0.295 4.715,-1.105 6.48625,-2.42875 C 53.95625,40.13 54.3,39.84 54.6275,39.5275 56.95375,37.31625 58.145,34.45625 58.19875,30.95125 58.21005,28.24 57.47625,25.97 55.99625,24.1425 c -0.645,-0.79625 -1.44625,-1.52375 -2.4,-2.18125 -1.2375,-0.8525 -2.7325,-1.58875 -4.4875,-2.20875 1.905,-0.83 3.40125,-1.8525 4.4875,-3.0625 0.165,-0.18375 0.32,-0.3725 0.46625,-0.565 1.10625,-1.46125 1.66,-3.1825 1.66125,-5.1625 C 55.74625,9.2975 55.3225,7.69125 54.4525,6.14375 54.2125,5.715 53.92625,5.3075 53.59625,4.92125 52.7325,3.91 51.56375,3.0425 50.08875,2.31625 48.05125,1.3125 45.29,0.7925 41.80875,0.7575 m -7.455,17.51125 0,-11.08375 4.2725,0 c 2.39125,0.0275 4.11,0.54375 5.155,1.5475 1.045,1.00375 1.555,2.325 1.5325,3.96375 0.0225,1.55875 -0.4875,2.8675 -1.5325,3.92375 -1.045,1.05625 -2.76375,1.60625 -5.155,1.64875 l -4.2725,0 m 0,18.255 0,-11.82625 4.83,0 c 2.4125,0.0163 4.2125,0.525 5.40125,1.52375 1.19,1 1.7825,2.39125 1.78,4.1725 -0.005,2.07 -0.64375,3.61125 -1.91875,4.62125 -1.275,1.01 -3.1525,1.5125 -5.635,1.50875 l -4.4575,0 M 0,42.78375 l 27.8,0 0,-10.5325 -13.0775,0 0,-31.495 -14.7225,0 0,42.0275 m 123.4725,-23.985 -16.5125,0 0,8.8675 5.24125,0 0,4.93875 C 107.5875,33.1925 103.95875,32.4925 101.3175,30.5075 98.67625,28.52 97.33,25.60375 97.27875,21.755 c 0.0562,-3.6275 1.24,-6.515 3.55375,-8.6625 2.31375,-2.14875 5.425,-3.24875 9.33375,-3.3 1.97625,0.003 4.01375,0.30625 6.11375,0.91 2.1,0.60375 4.23,1.49375 6.39125,2.6675 l 0,-10.53625 c -2.32,-0.92625 -4.7175,-1.63 -7.1925,-2.11 C 113.005,0.24375 110.515,0.0025 108.01,0 102.94125,0.03 98.5025,0.96875 94.6975,2.81625 90.8925,4.6625 87.92625,7.235 85.79875,10.53375 83.6725,13.8325 82.59125,17.675 82.55625,22.0625 c -0.0325,3.1525 0.73875,6.34 2.315,9.56125 1.575,3.2225 4.15375,5.93375 7.73625,8.13625 3.5825,2.20125 8.3675,3.3475 14.355,3.43875 2.59125,-0.009 5.35875,-0.19125 8.3025,-0.5475 2.94375,-0.355 5.68,-0.83 8.2075,-1.42375 l 0,-22.42875"
id="path20833"
style="fill:#4a8dcd;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<path
d="M 60.2925,47.90625 40.325,62.555 18.565,47.90625 l 41.7275,0 z"
id="path20837"
style="fill:#eb1e24;fill-opacity:1;fill-rule:nonzero;stroke:#eb1e24;stroke-width:0.57749999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;stroke-opacity:1;stroke-dasharray:none" />
</svg>
<!-- version: 20110311, original size: 123.4725 62.903439, border: 3% -->
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

71
main.js
View File

@@ -102,32 +102,52 @@ function changeBaseMap(newMap){
} }
break; break;
case "satellite_terrain": case "satellite_terrain":
basemapStyle = { basemapStyle = {
version: 8, version: 8,
sources: { sources: {
"satellite": { osm: {
type: "raster", type: 'raster',
tiles: [ tiles: [
"https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", "https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
"https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
"https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", "https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
"https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
], ],
tileSize: 256, tileSize: 256,
}, attribution: '&copy; OpenStreetMap Contributors',
// ── Elevation data ────────────────────────── maxzoom: 19
"terrarium": { },
type: "raster-dem", // Use a different source for terrain and hillshade layers, to improve render quality
tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"], terrainSource: {
tileSize: 256, type: 'raster-dem',
encoding: "terrarium", url: 'https://tiles.mapterhorn.com/tilejson.json',
maxzoom: 15 },
}, hillshadeSource: {
}, type: 'raster-dem',
layers: [{ id: "satellite", type: "raster", source: "satellite" }], url: 'https://tiles.mapterhorn.com/tilejson.json'
// 2-fache Überhöhung }
terrain: { source: "terrarium", exaggeration: 2 }, },
} layers: [
{
id: 'osm',
type: 'raster',
source: 'osm'
},
{
id: 'hills',
type: 'hillshade',
source: 'hillshadeSource',
layout: {visibility: 'visible'},
paint: {'hillshade-shadow-color': '#473B24'}
}
],
terrain: {
source: 'terrainSource',
exaggeration: 1
},
sky: {}
}
} }
map.setStyle(basemapStyle); map.setStyle(basemapStyle);
} }
@@ -143,3 +163,4 @@ selectElement.addEventListener('change', (event) => {
document.getElementById("resetBtn").addEventListener("click", () => { document.getElementById("resetBtn").addEventListener("click", () => {
map.resetNorth(); map.resetNorth();
}); });

41
style.css
View File

@@ -2,8 +2,49 @@ body {
padding: 0; padding: 0;
} }
#title {
text-align: center;
font-size:xx-large;
font-family:'Trebuchet MS';
font-weight: bold;
width: 50%;
padding: 15px;
margin: auto;
}
h1 { h1 {
font-family:'Trebuchet MS'; font-family:'Trebuchet MS';
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
#logoJadeHs{
position: fixed;
top: 1%;
right: 10%;
width: 128px;
height: 69px;
transform-origin: center center;
z-index: 0;
}
#logoLbeg{
position: fixed;
top: 1%;
right: 1%;
width: 128px;
height: 69px;
transform-origin: center center;
z-index: 0;
}
#map {
width: 85%;
height: 90%;
position: fixed;
right: 0%;
bottom: 0%;
}