Display a fully underwater elevation layer.
import { MapControls } from "three/examples/jsm/controls/MapControls.js";
import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";
import Extent from "@giro3d/giro3d/core/geographic/Extent.js";
import GeoTIFFSource from "@giro3d/giro3d/sources/GeoTIFFSource.js";
import Instance from "@giro3d/giro3d/core/Instance.js";
import ElevationLayer from "@giro3d/giro3d/core/layer/ElevationLayer.js";
import Map from "@giro3d/giro3d/entities/Map.js";
import Inspector from "@giro3d/giro3d/gui/Inspector.js";
import ColorMap, { ColorMapMode } from "@giro3d/giro3d/core/layer/ColorMap.js";
import AxisGrid from "@giro3d/giro3d/entities/AxisGrid.js";
function makeColorRamp(
preset,
discrete = false,
invert = false,
mirror = false,
) {
let nshades = discrete ? 10 : 256;
const values = colormap({ colormap: preset, nshades });
const colors = values.map((v) => new Color(v));
if (invert) {
colors.reverse();
}
if (mirror) {
const mirrored = [...colors, ...colors.reverse()];
return mirrored;
}
return colors;
}
const extent = new Extent("EPSG:3857", 2285900, 2444000, 4230900, 4386100);
const instance = new Instance({
target: "view",
crs: "EPSG:3857",
backgroundColor: null, // Make the canvas transparent
});
const map = new Map({
extent,
hillshading: true,
});
instance.add(map);
const source = new GeoTIFFSource({
url: "https://3d.oslandia.com/giro3d/rasters/bathymetry-emodnet.cog.tif",
crs: "EPSG:3857",
});
const min = -5200;
const max = -900;
const axisGrid = new AxisGrid({
volume: {
extent,
floor: min,
ceiling: 0,
},
ticks: {
x: 20_000,
y: 20_000,
z: 500,
},
});
instance.add(axisGrid);
const colorMap = new ColorMap(
makeColorRamp("bathymetry"),
min,
max,
ColorMapMode.Elevation,
);
map.addLayer(
new ElevationLayer({
name: "bathymetry",
extent,
source,
colorMap: colorMap,
minmax: { min, max },
}),
);
const controls = new MapControls(instance.view.camera, instance.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.2;
const center = extent.centerAsVector2();
instance.view.camera.position.set(2195551, 4146310, 90_000);
controls.target.set(center.x, center.y, min);
instance.view.setControls(controls);
// Attach the inspector
Inspector.attach("inspector", instance);
const labelElement = document.createElement("span");
labelElement.classList.value = "badge rounded-pill text-bg-light";
labelElement.style.marginTop = "2rem";
const label = new CSS2DObject(labelElement);
label.visible = false;
instance.add(label);
function pick(mouseEvent) {
const picked = instance.pickObjectsAt(mouseEvent, { where: [map] });
if (picked.length > 0) {
label.visible = true;
const point = picked[0].point;
label.element.innerText = `depth: ${Math.round(point.z)}m`;
label.position.copy(point);
label.updateMatrixWorld(true);
} else {
label.visible = false;
}
instance.notifyChange();
}
instance.domElement.addEventListener("mousemove", pick);
<!doctype html>
<html lang="en">
<head>
<title>Bathymetry</title>
<meta charset="UTF-8" />
<meta name="name" content="cog_bathymetry" />
<meta
name="description"
content="Display a fully underwater elevation layer."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="https://giro3d.org/images/favicon.svg" />
<link
href="https://giro3d.org/assets/bootstrap-custom.css"
rel="stylesheet"
/>
<script src="https://giro3d.org/assets/bootstrap.bundle.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://giro3d.org/latest/examples/css/example.css"
/>
<style>
#view canvas {
background: rgb(132, 170, 182);
background: radial-gradient(
circle,
rgba(132, 170, 182, 1) 0%,
rgba(37, 44, 48, 1) 100%
);
}
</style>
</head>
<body>
<div id="view" class="m-0 p-0 w-100 h-100"></div>
<div
id="inspector"
class="position-absolute top-0 start-0 mh-100 overflow-auto"
></div>
<script type="module" src="index.js"></script>
<script>
/* activate popovers */
const popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]'),
);
popoverTriggerList.map(
// bootstrap is used as script in the template, disable warning about undef
// eslint-disable-next-line no-undef
(popoverTriggerEl) =>
new bootstrap.Popover(popoverTriggerEl, {
trigger: "hover",
placement: "left",
content: document.getElementById(
popoverTriggerEl.getAttribute("data-bs-content"),
).innerHTML,
html: true,
}),
);
</script>
</body>
</html>
{
"name": "cog_bathymetry",
"dependencies": {
"colormap": "^2.3.2",
"@giro3d/giro3d": "0.40.0"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}