-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquery-terrain-elevation.html
164 lines (151 loc) · 5.21 KB
/
query-terrain-elevation.html
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Query terrain elevation</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<div id="map"></div>
<script>
mapboxgl.accessToken =
"...";
(async () => {
const map = new mapboxgl.Map({
container: "map",
zoom: 13,
center: [6.58968, 45.39701],
pitch: 76,
bearing: 150,
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: "mapbox://styles/mapbox/satellite-streets-v12",
interactive: false,
hash: false,
});
// Start downloading the route data, and wait for map load to occur in parallel
const [pinRouteGeojson] = await Promise.all([
fetch(
"https://docs.mapbox.com/mapbox-gl-js/assets/route-pin.geojson"
).then((response) => response.json()),
map.once("style.load"),
]);
// Set custom fog
map.setFog({
range: [-0.5, 2],
color: "#def",
"high-color": "#def",
"space-color": "#def",
});
// Add terrain source, with slight exaggeration
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.terrain-rgb",
tileSize: 512,
maxzoom: 14,
});
map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
const pinRoute = pinRouteGeojson.features[0].geometry.coordinates;
// Create the marker and popup that will display the elevation queries
const popup = new mapboxgl.Popup({ closeButton: false });
const marker = new mapboxgl.Marker({
color: "red",
scale: 0.8,
draggable: false,
pitchAlignment: "auto",
rotationAlignment: "auto",
})
.setLngLat(pinRoute[0])
.setPopup(popup)
.addTo(map)
.togglePopup();
// Add a line feature and layer. This feature will get updated as we progress the animation
map.addSource("line", {
type: "geojson",
// Line metrics is required to use the 'line-progress' property
lineMetrics: true,
data: pinRouteGeojson,
});
map.addLayer({
type: "line",
source: "line",
id: "line",
paint: {
"line-color": "rgba(0,0,0,0)",
"line-width": 5,
},
layout: {
"line-cap": "round",
"line-join": "round",
},
});
await map.once("idle");
// The total animation duration, in milliseconds
const animationDuration = 20000;
// Use the https://turfjs.org/ library to calculate line distances and
// sample the line at a given percentage with the turf.along function.
const path = turf.lineString(pinRoute);
// Get the total line distance
const pathDistance = turf.lineDistance(path);
let start;
function frame(time) {
if (!start) start = time;
const animationPhase = (time - start) / animationDuration;
if (animationPhase > 1) {
return;
}
// Get the new latitude and longitude by sampling along the path
const alongPath = turf.along(path, pathDistance * animationPhase)
.geometry.coordinates;
const lngLat = {
lng: alongPath[0],
lat: alongPath[1],
};
// Sample the terrain elevation. We round to an integer value to
// prevent showing a lot of digits during the animation
const elevation = Math.floor(
// Do not use terrain exaggeration to get actual meter values
map.queryTerrainElevation(lngLat, { exaggerated: false })
);
// Update the popup altitude value and marker location
popup.setHTML("Altitude: " + elevation + "m<br/>");
marker.setLngLat(lngLat);
// Reduce the visible length of the line by using a line-gradient to cutoff the line
// animationPhase is a value between 0 and 1 that reprents the progress of the animation
map.setPaintProperty("line", "line-gradient", [
"step",
["line-progress"],
"red",
animationPhase,
"rgba(255, 0, 0, 0)",
]);
// Rotate the camera at a slightly lower speed to give some parallax effect in the background
const rotation = 150 - animationPhase * 40.0;
map.setBearing(rotation % 360);
window.requestAnimationFrame(frame);
}
window.requestAnimationFrame(frame);
})();
</script>
</body>
</html>