1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| function G3D_AxisGrid() {
const [instance, setInstance] = React.useState(null);
const [axisGrid, setAxisGrid] = React.useState(null);
const [showAxisGrid, setShowAxisGrid] = React.useState(true);
useEffect(() => {
const x = -13602000;
const y = 5812000;
const halfWidth = 2500;
const extent = new Extent(
"EPSG:3857",
x - halfWidth,
x + halfWidth,
y - halfWidth,
y + halfWidth,
);
const instance = new Instance({
target: "giro3d-view",
crs: extent.crs,
backgroundColor: 0x0a3b59,
});
const map = new Map({
extent,
hillshading: true,
discardNoData: true,
side: DoubleSide,
backgroundColor: "white",
});
instance.add(map);
const source = new TiledImageSource({
source: new XYZ({
minZoom: 10,
maxZoom: 16,
url: "https://3d.oslandia.com/dem/MtStHelens-tiles/{z}/{x}/{y}.tif",
}),
format: new GeoTIFFFormat(),
});
const floor = 1100;
const ceiling = 2500;
const values = colormap({ colormap: "viridis", nshades: 256 });
const colors = values.map((v) => new Color(v));
const dem = new ElevationLayer({
name: "dem",
extent,
interpretation: Interpretation.Raw,
source,
colorMap: new ColorMap(colors, floor, ceiling, ColorMapMode.Elevation),
});
map.addLayer(dem);
// Create an axis grid that encompasses the Map.
const axisGrid = new AxisGrid({
volume: {
extent: extent.withRelativeMargin(0.1),
floor,
ceiling,
},
ticks: {
x: 1000,
y: 1000,
z: 200,
},
});
instance.add(axisGrid);
instance.view.camera.position.set(-13594700, 5819700, 7300);
const controls = new MapControls(instance.view.camera, instance.domElement);
controls.target.set(-13603000, 5811000, 0);
instance.view.setControls(controls);
setInstance(instance);
setAxisGrid(axisGrid);
}, []);
useEffect(() => {
// action on update of showAxisGrid
if (axisGrid !== null && instance !== null) {
let ax = axisGrid
ax.visible = showAxisGrid;
let inst = instance
inst.notifyChange(ax);
setAxisGrid(ax)
setInstance(inst)
}
}, [showAxisGrid]);
return (
<div className={styles.sample}>
<div id="giro3d-view" className={styles.view}></div>
<div class="side-pane-with-status-bar" className={styles.sidepan}>
{/* Parameters */}
<Card>
<div>
<Typography level="title-lg">Paramètres</Typography>
</div>
<CardContent orientation="horizontal">
<Switch
checked={showAxisGrid}
onChange={(event) => setShowAxisGrid(event.target.checked)}
id="entity"/>
</CardContent>
</Card>
</div>
</div>
);
}
export default G3D_AxisGrid; |
