Add index.html
This commit is contained in:
parent
a8d88fd2b4
commit
c087b5d3f8
1 changed files with 168 additions and 0 deletions
168
index.html
Normal file
168
index.html
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Thin Sections - Geosphere Austria</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.9.0/ol.css">
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 70px;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
padding: 8px 12px;
|
||||
font-family: Arial;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.ol-tooltip {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ol-tooltip-static {
|
||||
background-color: #0080ff;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"ol": "https://esm.sh/ol@10.9.0",
|
||||
"ol/": "https://esm.sh/ol@10.9.0/",
|
||||
"geotiff": "https://esm.sh/geotiff@2.1.3",
|
||||
"geotiff/": "https://esm.sh/geotiff@2.1.3/",
|
||||
"tiff": "https://esm.sh/tiff@1.0.12",
|
||||
"tiff/": "https://esm.sh/tiff@1.0.12/",
|
||||
"web-worker": "https://esm.sh/web-worker@1.3.0",
|
||||
"lerc": "https://esm.sh/lerc@3.0.0"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="https://webstat.geosphere.at/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '18']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="info">Initialisiere…</div>
|
||||
|
||||
<script type="module">
|
||||
const { default: Map } = await import('ol/Map.js');
|
||||
const { default: View } = await import('ol/View.js');
|
||||
const { default: WebGLTileLayer } = await import('ol/layer/WebGLTile.js');
|
||||
const { default: GeoTIFF } = await import('ol/source/GeoTIFF.js');
|
||||
const { Projection, addProjection } = await import('ol/proj.js');
|
||||
|
||||
// Controls & Overlays
|
||||
const { FullScreen, defaults: defaultControls } = await import('ol/control.js');
|
||||
const { default: Overlay } = await import('ol/Overlay.js');
|
||||
|
||||
// Vektor- & Zeichen-Klassen (Für Messwerkzeug)
|
||||
const { default: VectorSource } = await import('ol/source/Vector.js');
|
||||
const { default: VectorLayer } = await import('ol/layer/Vector.js');
|
||||
const { default: Draw } = await import('ol/interaction/Draw.js');
|
||||
const { Style, Stroke } = await import('ol/style.js');
|
||||
|
||||
// ── ID + Pfad ─────────────────────────────────────────────────────────────
|
||||
const parts = window.location.pathname.split('/').filter(Boolean);
|
||||
const tifId = parts[1];
|
||||
const res = await fetch('/tif-index.json');
|
||||
const index = await res.json();
|
||||
const tifUrl = '/cogs/' + index[tifId];
|
||||
document.getElementById('info').textContent = 'TIFF: ' + tifId + ' — ' + index[tifId];
|
||||
|
||||
// ── GeoTIFF Source & Geometrie-Setup ──────────────────────────────────────
|
||||
const source = new GeoTIFF({
|
||||
normalize: true,
|
||||
interpolate: true,
|
||||
sources: [{ url: tifUrl }],
|
||||
});
|
||||
|
||||
const vc = await source.getView();
|
||||
const extent = vc.extent;
|
||||
const [, , w, h] = extent;
|
||||
|
||||
// ── Pixel-Projektion ──────────────────────────────────────────────────────
|
||||
const projCode = 'PIXEL:' + tifId;
|
||||
addProjection(new Projection({
|
||||
code: projCode, units: 'm', extent, global: false,
|
||||
}));
|
||||
|
||||
// ── Raster-Layer (WebGL) ──────────────────────────────────────────────────
|
||||
const layer = new WebGLTileLayer({
|
||||
source: source,
|
||||
style: {
|
||||
color: [
|
||||
'array',
|
||||
['+', ['band', 1], ['*', 1.402, ['-', ['band', 3], 0.5]]],
|
||||
['-', ['-', ['band', 1], ['*', 0.344136, ['-', ['band', 2], 0.5]]], ['*', 0.714136, ['-', ['band', 3], 0.5]]],
|
||||
['+', ['band', 1], ['*', 1.772, ['-', ['band', 2], 0.5]]],
|
||||
1
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// ── View + Map erstellen ──────────────────────────────────────────────────
|
||||
const map = new Map({
|
||||
target: 'map',
|
||||
layers: [layer], // Beide Layer hier einbinden
|
||||
controls: defaultControls().extend([
|
||||
new FullScreen()
|
||||
]),
|
||||
view: new View({
|
||||
projection: projCode,
|
||||
center: [w / 2, h / 2],
|
||||
extent,
|
||||
showFullExtent: true,
|
||||
resolutions: vc.resolutions,
|
||||
}),
|
||||
});
|
||||
|
||||
map.getView().fit(extent, { padding: [20, 20, 20, 20] });
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue