-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy path3dbuilding.html
79 lines (74 loc) · 2.82 KB
/
3dbuilding.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:20%; width:100%; }
#info { position:absolute; top:80%; height:20%; width: 100%; outline: 1px solid black; background: white; overflow: auto;}
</style>
</head>
<body>
<div id='map'></div>
<div id='info'></div>
<script>
//mapboxgl.accessToken = 'your_key_here';
var map = new mapboxgl.Map({
container: 'map',
style: 'https://saturnus.geodan.nl/mapbox-viewer/styles/freetilehosting/positron.json',
zoom: 16,
center: [4.913, 52.342],
pitch: 60,
maxPitch: 60
});
map.on('load', function () {
map.addLayer({
"id": "building3D",
"type": "fill-extrusion",
"source": {
type: 'vector',
tiles:["https://research1.geodan.nl/anneb.bag13_lod1213_2d_levering/{z}/{x}/{y}.pbf"],
bounds: [3.25524871110589,50.7347266517351,7.24079584680245,53.5258520631408],
minzoom: 13,
maxzoom: 18
},
"source-layer": "anneb.bag13_lod1213_2d_levering",
"minzoom": 13,
"maxzoom": 24,
"paint": {
"fill-extrusion-color": ["case",
["<",["get","bouwjaar"],1001],"black",
["<",["get","bouwjaar"],1700],"#7f0000",
["<",["get","bouwjaar"],1800],"#b30000",
["<",["get","bouwjaar"],1900],"#d7301f",
["<",["get","bouwjaar"],1930],"#ef6548",
["<",["get","bouwjaar"],1960],"#fc8d59",
["<",["get","bouwjaar"],1975],"#fdbb84",
["<",["get","bouwjaar"],1990],"#fdd49e",
["<",["get","bouwjaar"],2000],"#fee8c8",
["<=",["get","bouwjaar"],2025],"#fff7ec",
"#fff7ec"],
"fill-extrusion-height": ["-",["get","dd_h_dak_max"],["get","h_maaiveld"]],
"fill-extrusion-base": 0,
"fill-extrusion-opacity": 0.95
}
});
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point).filter((feature)=>feature.layer.id === 'building3D');
let table = features.map(feature=>`<tr>
<td><b>bag-id</b> ${feature.properties.bagpandid}</td>
<td><b>ground level</b> ${feature.properties.h_maaiveld.toFixed(2)} m</td>
<td><b>height</b> ${(feature.properties.dd_h_dak_max - feature.properties.h_maaiveld).toFixed(2)} m</td>
<td><b>lod</b> ${feature.properties.lod}</td>
<td><b>year</b> ${feature.properties.bouwjaar}</td>
</tr>`).join("\n");
document.getElementById('info').innerHTML = `<table>${table}</table>`;
});
});
</script>
</body>
</html>