168 lines
No EOL
5.4 KiB
HTML
168 lines
No EOL
5.4 KiB
HTML
<!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> |