All examplesterraindted-terrain
§ examples · terrain

DTED Terrain

DT0 / DT1 / DT2 elevation data with hillshade and blended raster draping.

slugdted-terrain
source81 lines
statuslive
tsexamples-src/dted-terrain.ts
1/**
2 * DTED Terrain — elevation tiles through the `TerrainRGBLayer` adapter
3 * (Mapzen terrarium-encoded RGB PNGs). DTED is a classified-data format
4 * so the public demo uses the open terrarium mirror; the engine treats
5 * both identically once heights are decoded.
6 *
7 * Camera pitched to ~50° and zoomed out a bit so the view stays above
8 * the terrain while tiles stream in from the LRU cache.
9 */
10 
11import { MapView } from "mapgpu";
12import { RasterTileLayer } from "mapgpu/layers";
13import { RenderEngine } from "mapgpu/render";
14import { TerrainRGBLayer } from "mapgpu/terrain";
15 
16import type { RunResultObject } from "@/components/examples/ExampleCanvas";
17 
18export async function run(container: HTMLElement): Promise<RunResultObject> {
19 const view = new MapView({
20 container,
21 renderEngine: new RenderEngine(),
22 mode: "3d",
23 center: [7.9, 46.55], // Jungfrau / Bernese Alps
24 zoom: 9,
25 pitch: 50,
26 bearing: 20,
27 backgroundColor: "transparent",
28 globeEffects: {
29 atmosphere: { enabled: true, strength: 1.0, falloff: 3 },
30 },
31 });
32 
33 const imagery = new RasterTileLayer({
34 id: "esri-imagery",
35 urlTemplate:
36 "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
37 maxZoom: 19,
38 attribution: "© Esri",
39 });
40 view.map.add(imagery);
41 
42 const terrain = new TerrainRGBLayer({
43 id: "terrarium",
44 tileUrls: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"],
45 encoding: "terrarium",
46 exaggeration: 1.0,
47 });
48 view.map.add(terrain);
49 
50 await view.when();
51 
52 return {
53 dispose: () => view.destroy(),
54 controls: [
55 {
56 kind: "segmented",
57 id: "exag",
58 initial: "1",
59 options: [
60 { value: "1", label: "1×" },
61 { value: "1.4", label: "1.4×" },
62 { value: "2", label: "2×" },
63 ],
64 onChange: (value) => {
65 // `exaggeration` is set at construction; rebuild the layer to apply.
66 view.map.remove(terrain);
67 const next = new TerrainRGBLayer({
68 id: "terrarium",
69 tileUrls: [
70 "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png",
71 ],
72 encoding: "terrarium",
73 exaggeration: Number(value),
74 });
75 view.map.add(next);
76 },
77 },
78 ],
79 };
80}