irie 0.0.42__py3-none-any.whl → 0.0.44__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of irie might be problematic. Click here for more details.
- irie/apps/inventory/archive/CESMD.py +0 -0
- irie/apps/inventory/filters.py +7 -6
- irie/apps/inventory/models.py +27 -0
- irie/apps/inventory/services/render.py +0 -0
- irie/apps/inventory/urls.py +4 -1
- irie/apps/inventory/views.py +56 -0
- irie/apps/prediction/forms.py +2 -1
- irie/apps/prediction/models.py +24 -0
- irie/apps/prediction/urls.py +5 -3
- irie/apps/prediction/views.py +101 -8
- irie/apps/static/assets/css/brace.css +0 -32
- irie/apps/static/assets/css/brace.css.map +1 -1
- irie/apps/static/assets/css/brace.min.css +1 -1
- irie/apps/templates/inventory/asset-on-map.html +457 -0
- irie/apps/templates/inventory/asset-profile.html +1 -2
- irie/apps/templates/inventory/asset-table.html +14 -0
- irie/apps/templates/inventory/map-inventory.html +136 -0
- irie/apps/templates/inventory/map-inventory2.html +143 -0
- irie/apps/templates/inventory/map-single-asset.html +0 -0
- irie/apps/templates/inventory/map-single-asset2.html +618 -0
- irie/apps/templates/inventory/map-terrain.html +214 -0
- irie/apps/templates/inventory/sensor-upload.html +1 -0
- irie/apps/templates/inventory/three-maps.html +229 -0
- irie/apps/templates/layouts/base.html +1 -0
- irie/apps/templates/prediction/predictor-upload.html +68 -22
- irie/apps/templates/site/index.html +36 -27
- irie/apps/templates/site/page-400-sidebar.html +31 -0
- irie/apps/templates/site/page-400.html +29 -0
- irie/apps/templates/site/page-404-sidebar.html +1 -1
- irie/apps/templates/site/page-404.html +1 -1
- irie/fhwa/__init__.py +132 -0
- irie/fhwa/__main__.py +79 -0
- irie/fhwa/fields/nbi001.py +61 -0
- irie/fhwa/fields/nbi001b.py +1 -0
- irie/fhwa/fields/nbi002.py +0 -0
- irie/fhwa/fields.py +32 -0
- irie/init/__main__.py +0 -4
- irie/init/calid.py +86 -3
- irie/init/getNBIData.py +1 -1
- irie/init/management/commands/init_assets.py +11 -11
- irie/init/management/commands/init_predictors.py +1 -1
- irie/init/management/commands/make_asset.py +0 -0
- {irie-0.0.42.dist-info → irie-0.0.44.dist-info}/METADATA +2 -2
- {irie-0.0.42.dist-info → irie-0.0.44.dist-info}/RECORD +48 -33
- {irie-0.0.42.dist-info → irie-0.0.44.dist-info}/WHEEL +1 -1
- irie/apps/inventory/CESMD.py +0 -81
- irie/apps/inventory/archive/arcGIS.py +0 -1175
- irie/apps/inventory/traffic.py +0 -175052
- /irie/apps/inventory/{calid.py → archive/calid.py} +0 -0
- {irie-0.0.42.dist-info → irie-0.0.44.dist-info}/entry_points.txt +0 -0
- {irie-0.0.42.dist-info → irie-0.0.44.dist-info}/top_level.txt +0 -0
|
@@ -0,0 +1,618 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> -->
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
|
|
8
|
+
|
|
9
|
+
<link rel="icon" href="/static/assets/favicon.ico?v=2">
|
|
10
|
+
<link rel="manifest" href="/static/assets/img/favicon/site.webmanifest">
|
|
11
|
+
<link rel="mask-icon" href="/static/assets/img/favicon/safari-pinned-tab.svg" color="#ffffff">
|
|
12
|
+
|
|
13
|
+
<!-- <link type="text/css" href="/static/assets/vendor/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
|
|
14
|
+
<link type="text/css" href="/static/assets/vendor/notyf/notyf.min.css" rel="stylesheet"> -->
|
|
15
|
+
<link type="text/css" href="/static/assets/css/brace.css" media="screen" rel="stylesheet">
|
|
16
|
+
|
|
17
|
+
<title>Test Maps</title>
|
|
18
|
+
<meta charset="utf-8">
|
|
19
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
20
|
+
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.css">
|
|
21
|
+
<script src="https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.js"></script>
|
|
22
|
+
|
|
23
|
+
<script type="importmap">
|
|
24
|
+
{
|
|
25
|
+
"imports": {
|
|
26
|
+
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
|
|
27
|
+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
<style>
|
|
32
|
+
#map { height: 100%; margin: 0; padding: 0; }
|
|
33
|
+
</style>
|
|
34
|
+
<!-- <style>
|
|
35
|
+
body { margin: 0; padding: 0; }
|
|
36
|
+
html, body, #map { height: 100%; }
|
|
37
|
+
</style> -->
|
|
38
|
+
</head>
|
|
39
|
+
<body class="g-sidenav-show">
|
|
40
|
+
|
|
41
|
+
<nav class="navbar navbar-theme-secondary navbar-dark px-4 col-12 d-lg-none">
|
|
42
|
+
<a class="navbar-brand me-lg-5" href="/">
|
|
43
|
+
<img class="navbar-brand-light" src="/static/assets/img/brace2-no_text.png" alt="BRACE2 logo">
|
|
44
|
+
</a>
|
|
45
|
+
<div class="d-flex align-items-center">
|
|
46
|
+
<a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
|
|
47
|
+
<div class="sidenav-toggler-inner">
|
|
48
|
+
<i class="sidenav-toggler-line"></i>
|
|
49
|
+
<i class="sidenav-toggler-line"></i>
|
|
50
|
+
<i class="sidenav-toggler-line"></i>
|
|
51
|
+
</div>
|
|
52
|
+
</a>
|
|
53
|
+
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
|
54
|
+
<span class="navbar-toggler-icon"></span>
|
|
55
|
+
</button>
|
|
56
|
+
</div>
|
|
57
|
+
</nav>
|
|
58
|
+
|
|
59
|
+
<aside id="sidenav-main" style="z-index: 1;" class="sidebar navbar navbar-vertical navbar-expand-xs d-lg-block collapse bg-white ms-2 my-2 fixed-start">
|
|
60
|
+
<div class="collapse navbar-collapse sidebar-inner px-4 pt-3 w-auto" id="sidenav-collapse-main">
|
|
61
|
+
<ul class="nav navbar-nav flex-column pt-3 pt-md-0">
|
|
62
|
+
<li class="nav-item">
|
|
63
|
+
<a href="/" class="nav-link d-flex align-items-center" data-bs-toggle="collapse">
|
|
64
|
+
<span class="sidebar-icon">
|
|
65
|
+
<img src="/static/assets/img/brace2-no_text.png" height="20" width="20" alt="BRACE2 Logo">
|
|
66
|
+
</span>
|
|
67
|
+
<span class="mt-1 ms-1 sidebar-text center">BRACE<sup class="superscript">2</sup></span>
|
|
68
|
+
</a>
|
|
69
|
+
</li>
|
|
70
|
+
<hr class="horizontal dark mt-0">
|
|
71
|
+
|
|
72
|
+
<li role="separator" class="dropdown-divider mt-2 mb-2 border-gray-700"></li>
|
|
73
|
+
|
|
74
|
+
<li class="nav-item " data-bs-toggle="collapse">
|
|
75
|
+
<a href="/dashboard/" class="nav-link">
|
|
76
|
+
<span class="sidebar-icon">
|
|
77
|
+
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
|
|
78
|
+
</span>
|
|
79
|
+
<span class="sidebar-text">Dashboard</span>
|
|
80
|
+
</a>
|
|
81
|
+
</li>
|
|
82
|
+
|
|
83
|
+
<li class="nav-item " data-bs-toggle="collapse">
|
|
84
|
+
<span class="nav-link collapsed d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#submenu-events">
|
|
85
|
+
<span>
|
|
86
|
+
<span class="sidebar-icon">
|
|
87
|
+
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path></svg>
|
|
88
|
+
</span>
|
|
89
|
+
<span title="Listing of processed events" class="sidebar-text">Events</span>
|
|
90
|
+
</span>
|
|
91
|
+
<span class="link-arrow">
|
|
92
|
+
<svg class="icon icon-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
|
93
|
+
</span>
|
|
94
|
+
</span>
|
|
95
|
+
<div class="multi-level collapse " role="list" id="submenu-events" aria-expanded="false">
|
|
96
|
+
<ul class="flex-column nav">
|
|
97
|
+
<li class="nav-item ">
|
|
98
|
+
<a class="nav-link" href="/event-table/">
|
|
99
|
+
<span class="sidebar-text">CGS Motions</span>
|
|
100
|
+
</a>
|
|
101
|
+
</li>
|
|
102
|
+
</ul>
|
|
103
|
+
</div>
|
|
104
|
+
</li>
|
|
105
|
+
|
|
106
|
+
<li class="nav-item text-dark " data-bs-toggle="collapse">
|
|
107
|
+
<a href="/asset-table/" class="nav-link">
|
|
108
|
+
<span class="sidebar-icon">
|
|
109
|
+
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path><path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
|
|
110
|
+
</span>
|
|
111
|
+
<span title="Listing of bridges with hosted digital twins" class="sidebar-text">Inventory</span>
|
|
112
|
+
</a>
|
|
113
|
+
</li>
|
|
114
|
+
|
|
115
|
+
<li class="nav-item ">
|
|
116
|
+
<span class="nav-link collapsed d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#submenu-apps">
|
|
117
|
+
<span>
|
|
118
|
+
<span class="sidebar-icon">
|
|
119
|
+
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path></svg>
|
|
120
|
+
</span>
|
|
121
|
+
<span title="Listing of processed events" class="sidebar-text">Applications</span>
|
|
122
|
+
</span>
|
|
123
|
+
<span class="link-arrow">
|
|
124
|
+
<svg class="icon icon-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
|
125
|
+
</span>
|
|
126
|
+
</span>
|
|
127
|
+
<div class="multi-level collapse " role="list" id="submenu-apps" aria-expanded="false">
|
|
128
|
+
<ul class="flex-column nav">
|
|
129
|
+
<li class="nav-item ">
|
|
130
|
+
<a class="nav-link" href="/networks/">
|
|
131
|
+
<span class="sidebar-text">Networks</span>
|
|
132
|
+
</a>
|
|
133
|
+
</li>
|
|
134
|
+
<li class="nav-item ">
|
|
135
|
+
<a class="nav-link" href="/simulations/">
|
|
136
|
+
<span class="sidebar-text">Simulation</span>
|
|
137
|
+
</a>
|
|
138
|
+
</li>
|
|
139
|
+
<li class="nav-item ">
|
|
140
|
+
<a class="nav-link" href="/visualization/">
|
|
141
|
+
<span class="sidebar-text">Visualization</span>
|
|
142
|
+
</a>
|
|
143
|
+
</li>
|
|
144
|
+
</ul>
|
|
145
|
+
</div>
|
|
146
|
+
</li>
|
|
147
|
+
<li role="separator" class="dropdown-divider mt-4 mb-3 border-gray-700"></li>
|
|
148
|
+
<li class="nav-item">
|
|
149
|
+
<a href="/documents/" class="nav-link d-flex align-items-center">
|
|
150
|
+
<span class="sidebar-icon">
|
|
151
|
+
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
|
|
152
|
+
</span>
|
|
153
|
+
<span class="sidebar-text">Documents</span>
|
|
154
|
+
</a>
|
|
155
|
+
</li>
|
|
156
|
+
</ul>
|
|
157
|
+
</div>
|
|
158
|
+
</aside>
|
|
159
|
+
|
|
160
|
+
<div id="irie-map" data-location="[-116.94864, 32.565277]" data-rendering="/uploads/renderings/002917ff-7ab8-4a97-91de-68ce3ff2e3e4.glb" >
|
|
161
|
+
|
|
162
|
+
<main class="content">
|
|
163
|
+
<h1>hi</h1>
|
|
164
|
+
</div>
|
|
165
|
+
<footer class="bg-white rounded shadow p-5 mb-2 mt-2 py-3">
|
|
166
|
+
<div class="row">
|
|
167
|
+
<div class="col-10 col-md-8 col-xl-8 mb-0 mb-md-0">
|
|
168
|
+
<p class="mb-0 text-left">
|
|
169
|
+
© <em>BRACE</em><sup class="superscript">2</sup>
|
|
170
|
+
- A project by <a target="_blank" href="https://peer.berkeley.edu">PEER</a>.
|
|
171
|
+
</p>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="col-10 col-md-4 col-xl-4 text-end">
|
|
174
|
+
<ul class="list-inline list-group-flush list-group-borderless text-end mb-0">
|
|
175
|
+
<li class="list-inline-item px-0 px-sm-2">
|
|
176
|
+
Powered by
|
|
177
|
+
<a target="_blank" href="https://stairlab.berkeley.edu/software/irie/">
|
|
178
|
+
IRiE</a>
|
|
179
|
+
</li>
|
|
180
|
+
</ul>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</footer>
|
|
184
|
+
|
|
185
|
+
</main>
|
|
186
|
+
|
|
187
|
+
<!--
|
|
188
|
+
<script src="/static/assets/vendor/@popperjs/core/dist/umd/popper.min.js"></script>
|
|
189
|
+
<script src="/static/assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
190
|
+
|
|
191
|
+
<script>
|
|
192
|
+
var win = navigator.platform.indexOf('Win') > -1;
|
|
193
|
+
if (win && document.querySelector('#sidenav-scrollbar')) {
|
|
194
|
+
var options = {
|
|
195
|
+
damping: '0.5'
|
|
196
|
+
}
|
|
197
|
+
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
|
|
198
|
+
}
|
|
199
|
+
</script>
|
|
200
|
+
|
|
201
|
+
-->
|
|
202
|
+
<!--
|
|
203
|
+
<script src="/static/assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
|
|
204
|
+
<script src="/static/assets/vendor/sweetalert2/dist/sweetalert2.all.min.js"></script>
|
|
205
|
+
<script src="/static/assets/vendor/notyf/notyf.min.js"></script>
|
|
206
|
+
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
|
|
207
|
+
<script src="/static/assets/js/brace.js"></script>
|
|
208
|
+
-->
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
<script type="module">
|
|
212
|
+
import * as THREE from 'three';
|
|
213
|
+
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
|
214
|
+
|
|
215
|
+
function createAssetLayerThreeJS(options) {
|
|
216
|
+
const {map, modelSource, modelOrigin, modelRotate, unitToMeter} = options;
|
|
217
|
+
const modelAltitude = 0;
|
|
218
|
+
const modelCoord = maplibregl.MercatorCoordinate.fromLngLat(
|
|
219
|
+
modelOrigin,
|
|
220
|
+
modelAltitude
|
|
221
|
+
);
|
|
222
|
+
const modelScale = modelCoord.meterInMercatorCoordinateUnits()*unitToMeter;
|
|
223
|
+
const modelTransform = {
|
|
224
|
+
translateX: modelCoord.x,
|
|
225
|
+
translateY: modelCoord.y-25*modelScale,
|
|
226
|
+
translateZ: modelCoord.z+35*modelScale,
|
|
227
|
+
rotateX: modelRotate[0],
|
|
228
|
+
rotateY: modelRotate[1],
|
|
229
|
+
rotateZ: modelRotate[2],
|
|
230
|
+
scale: modelScale
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
return {
|
|
234
|
+
id: '3d-model',
|
|
235
|
+
type: 'custom',
|
|
236
|
+
renderingMode: '3d',
|
|
237
|
+
onAdd(map, gl) {
|
|
238
|
+
this.camera = new THREE.Camera();
|
|
239
|
+
this.scene = new THREE.Scene();
|
|
240
|
+
|
|
241
|
+
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
|
|
242
|
+
directionalLight.position.set(100, 100, 100);
|
|
243
|
+
directionalLight.castShadow = true;
|
|
244
|
+
this.scene.add(directionalLight);
|
|
245
|
+
|
|
246
|
+
directionalLight.shadow.camera.near = 0.1;
|
|
247
|
+
directionalLight.shadow.camera.far = 2000;
|
|
248
|
+
directionalLight.shadow.camera.left = -500;
|
|
249
|
+
directionalLight.shadow.camera.right = 500;
|
|
250
|
+
directionalLight.shadow.camera.top = 500;
|
|
251
|
+
directionalLight.shadow.camera.bottom = -500;
|
|
252
|
+
|
|
253
|
+
directionalLight.shadow.mapSize.width = 4096;
|
|
254
|
+
directionalLight.shadow.mapSize.height = 4096;
|
|
255
|
+
|
|
256
|
+
const groundGeometry = new THREE.PlaneGeometry(1000, 1000);
|
|
257
|
+
const groundMaterial = new THREE.ShadowMaterial({ opacity: 0.5 });
|
|
258
|
+
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
|
|
259
|
+
ground.rotation.x = -Math.PI / 2;
|
|
260
|
+
ground.position.y = modelCoord.z;
|
|
261
|
+
ground.receiveShadow = true;
|
|
262
|
+
this.scene.add(ground);
|
|
263
|
+
|
|
264
|
+
const loader = new GLTFLoader();
|
|
265
|
+
loader.load(
|
|
266
|
+
modelSource,
|
|
267
|
+
(gltf) => {
|
|
268
|
+
gltf.scene.traverse(function (node) {
|
|
269
|
+
if (node.isMesh || node.isLight) {
|
|
270
|
+
node.castShadow = true;
|
|
271
|
+
node.receiveShadow = true;
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
this.scene.add(gltf.scene);
|
|
275
|
+
}
|
|
276
|
+
);
|
|
277
|
+
this.map = map;
|
|
278
|
+
|
|
279
|
+
this.renderer = new THREE.WebGLRenderer({
|
|
280
|
+
canvas: map.getCanvas(),
|
|
281
|
+
context: gl,
|
|
282
|
+
antialias: true
|
|
283
|
+
});
|
|
284
|
+
this.renderer.shadowMap.enabled = true;
|
|
285
|
+
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
286
|
+
|
|
287
|
+
this.renderer.autoClear = false;
|
|
288
|
+
},
|
|
289
|
+
render(gl, args) {
|
|
290
|
+
const rotationX = new THREE.Matrix4().makeRotationAxis(
|
|
291
|
+
new THREE.Vector3(1, 0, 0),
|
|
292
|
+
modelTransform.rotateX
|
|
293
|
+
);
|
|
294
|
+
const rotationY = new THREE.Matrix4().makeRotationAxis(
|
|
295
|
+
new THREE.Vector3(0, 1, 0),
|
|
296
|
+
modelTransform.rotateY
|
|
297
|
+
);
|
|
298
|
+
const rotationZ = new THREE.Matrix4().makeRotationAxis(
|
|
299
|
+
new THREE.Vector3(0, 0, 1),
|
|
300
|
+
modelTransform.rotateZ
|
|
301
|
+
);
|
|
302
|
+
|
|
303
|
+
const m = new THREE.Matrix4().fromArray(args.defaultProjectionData.mainMatrix);
|
|
304
|
+
const l = new THREE.Matrix4()
|
|
305
|
+
.makeTranslation(
|
|
306
|
+
modelTransform.translateX,
|
|
307
|
+
modelTransform.translateY,
|
|
308
|
+
modelTransform.translateZ
|
|
309
|
+
)
|
|
310
|
+
.scale(
|
|
311
|
+
new THREE.Vector3(
|
|
312
|
+
modelTransform.scale,
|
|
313
|
+
-modelTransform.scale,
|
|
314
|
+
modelTransform.scale
|
|
315
|
+
)
|
|
316
|
+
)
|
|
317
|
+
.multiply(rotationX)
|
|
318
|
+
.multiply(rotationY)
|
|
319
|
+
.multiply(rotationZ);
|
|
320
|
+
|
|
321
|
+
this.camera.projectionMatrix = m.multiply(l);
|
|
322
|
+
this.renderer.resetState();
|
|
323
|
+
this.renderer.render(this.scene, this.camera);
|
|
324
|
+
this.map.triggerRepaint();
|
|
325
|
+
}
|
|
326
|
+
};
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
function createAssetLayerBabylon(options) {
|
|
330
|
+
const {map, modelSource, modelOrigin, modelRotate, unitToMeter} = options;
|
|
331
|
+
const worldAltitude = 0;
|
|
332
|
+
|
|
333
|
+
const BABYLON = window.BABYLON;
|
|
334
|
+
// +x east, +y up, +z north
|
|
335
|
+
// const modelRotate = [Math.PI / 2, 0, 0];
|
|
336
|
+
// Maplibre.js default coordinate system (no rotations)
|
|
337
|
+
// +x east, -y north, +z up
|
|
338
|
+
//var worldRotate = [0, 0, 0];
|
|
339
|
+
|
|
340
|
+
const worldOriginMercator = maplibregl.MercatorCoordinate.fromLngLat(
|
|
341
|
+
modelOrigin,
|
|
342
|
+
worldAltitude
|
|
343
|
+
);
|
|
344
|
+
const modelScale = worldOriginMercator.meterInMercatorCoordinateUnits()*unitToMeter;
|
|
345
|
+
const modelTransform = {
|
|
346
|
+
translateX: worldOriginMercator.x,
|
|
347
|
+
translateY: worldOriginMercator.y-25*modelScale,
|
|
348
|
+
translateZ: worldOriginMercator.z+35*modelScale,
|
|
349
|
+
rotateX: modelRotate[0],
|
|
350
|
+
rotateY: modelRotate[1],
|
|
351
|
+
rotateZ: modelRotate[2],
|
|
352
|
+
scale: modelScale
|
|
353
|
+
};
|
|
354
|
+
|
|
355
|
+
// Calculate world matrix
|
|
356
|
+
const worldMatrix = BABYLON.Matrix.Compose(
|
|
357
|
+
new BABYLON.Vector3(modelScale, modelScale, modelScale),
|
|
358
|
+
BABYLON.Quaternion.FromEulerAngles(
|
|
359
|
+
modelRotate[0],
|
|
360
|
+
modelRotate[1],
|
|
361
|
+
modelRotate[2]
|
|
362
|
+
),
|
|
363
|
+
new BABYLON.Vector3(
|
|
364
|
+
worldOriginMercator.x,
|
|
365
|
+
worldOriginMercator.y,
|
|
366
|
+
worldOriginMercator.z
|
|
367
|
+
)
|
|
368
|
+
);
|
|
369
|
+
|
|
370
|
+
return {
|
|
371
|
+
id: '3d-model',
|
|
372
|
+
type: 'custom',
|
|
373
|
+
renderingMode: '3d',
|
|
374
|
+
onAdd (map, gl) {
|
|
375
|
+
this.engine = new BABYLON.Engine(
|
|
376
|
+
gl,
|
|
377
|
+
true,
|
|
378
|
+
{
|
|
379
|
+
useHighPrecisionMatrix: true // Important to prevent jitter at mercator scale
|
|
380
|
+
},
|
|
381
|
+
true
|
|
382
|
+
);
|
|
383
|
+
this.scene = new BABYLON.Scene(this.engine);
|
|
384
|
+
/**
|
|
385
|
+
* optionally add
|
|
386
|
+
* this.scene.autoClearDepthAndStencil = false
|
|
387
|
+
* and for renderingGroupIds set this individually via
|
|
388
|
+
* this.scene.setRenderingAutoClearDepthStencil(1,false)
|
|
389
|
+
* to allow blending with maplibre scene
|
|
390
|
+
* as documented in https://doc.babylonjs.com/features/featuresDeepDive/scene/optimize_your_scene#reducing-calls-to-glclear
|
|
391
|
+
*/
|
|
392
|
+
this.scene.autoClear = false;
|
|
393
|
+
/**
|
|
394
|
+
* use detachControl if you only want to interact with maplibre-gl and do not need pointer events of babylonjs.
|
|
395
|
+
* alternatively exchange this.scene.detachControl() with the following two lines, they will allow bubbling up events to maplibre-gl.
|
|
396
|
+
* this.scene.preventDefaultOnPointerDown = false
|
|
397
|
+
* this.scene.preventDefaultOnPointerUp = false
|
|
398
|
+
* https://doc.babylonjs.com/typedoc/classes/BABYLON.Scene#preventDefaultOnPointerDown
|
|
399
|
+
*/
|
|
400
|
+
this.scene.detachControl();
|
|
401
|
+
|
|
402
|
+
this.scene.beforeRender = () => {
|
|
403
|
+
this.engine.wipeCaches(true);
|
|
404
|
+
};
|
|
405
|
+
|
|
406
|
+
// create simple camera (will have its project matrix manually calculated)
|
|
407
|
+
this.camera = new BABYLON.Camera(
|
|
408
|
+
'Camera',
|
|
409
|
+
new BABYLON.Vector3(0, 0, 0),
|
|
410
|
+
this.scene
|
|
411
|
+
);
|
|
412
|
+
|
|
413
|
+
// create simple light
|
|
414
|
+
const light = new BABYLON.HemisphericLight(
|
|
415
|
+
'light1',
|
|
416
|
+
new BABYLON.Vector3(0, 0, 100),
|
|
417
|
+
this.scene
|
|
418
|
+
);
|
|
419
|
+
light.intensity = 0.7;
|
|
420
|
+
|
|
421
|
+
// Add debug axes viewer, positioned at origin, 10 meter axis lengths
|
|
422
|
+
new BABYLON.AxesViewer(this.scene, 10);
|
|
423
|
+
|
|
424
|
+
// load GLTF model in to the scene
|
|
425
|
+
BABYLON.SceneLoader.LoadAssetContainerAsync(
|
|
426
|
+
modelSource, '', this.scene
|
|
427
|
+
).then((modelContainer) => {
|
|
428
|
+
modelContainer.addAllToScene();
|
|
429
|
+
|
|
430
|
+
const rootMesh = modelContainer.createRootMesh();
|
|
431
|
+
|
|
432
|
+
// If using maplibre.js coordinate system (+z up)
|
|
433
|
+
// rootMesh.rotation.x = Math.PI/2
|
|
434
|
+
|
|
435
|
+
// // Create a second mesh
|
|
436
|
+
// const rootMesh2 = rootMesh.clone();
|
|
437
|
+
|
|
438
|
+
// // Position in babylon.js coordinate system
|
|
439
|
+
// rootMesh2.position.x = 25; // +east, meters
|
|
440
|
+
// rootMesh2.position.z = 25; // +north, meters
|
|
441
|
+
});
|
|
442
|
+
|
|
443
|
+
this.map = map;
|
|
444
|
+
},
|
|
445
|
+
render (gl, args) {
|
|
446
|
+
const cameraMatrix = BABYLON.Matrix.FromArray(args.defaultProjectionData.mainMatrix);
|
|
447
|
+
|
|
448
|
+
// world-view-projection matrix
|
|
449
|
+
const wvpMatrix = worldMatrix.multiply(cameraMatrix);
|
|
450
|
+
|
|
451
|
+
this.camera.freezeProjectionMatrix(wvpMatrix);
|
|
452
|
+
|
|
453
|
+
this.scene.render(false);
|
|
454
|
+
this.map.triggerRepaint();
|
|
455
|
+
}
|
|
456
|
+
};
|
|
457
|
+
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
/*
|
|
461
|
+
* Helper function used to get threejs-scene-coordinates from mercator coordinates.
|
|
462
|
+
* This is just a quick and dirty solution - it won't work if points are far away from each other
|
|
463
|
+
* because a meter near the north-pole covers more mercator-units
|
|
464
|
+
* than a meter near the equator.
|
|
465
|
+
*/
|
|
466
|
+
function calculateDistanceMercatorToMeters(from, to) {
|
|
467
|
+
const mercatorPerMeter = from.meterInMercatorCoordinateUnits();
|
|
468
|
+
// mercator x: 0=west, 1=east
|
|
469
|
+
const dEast = to.x - from.x;
|
|
470
|
+
const dEastMeter = dEast / mercatorPerMeter;
|
|
471
|
+
// mercator y: 0=north, 1=south
|
|
472
|
+
const dNorth = from.y - to.y;
|
|
473
|
+
const dNorthMeter = dNorth / mercatorPerMeter;
|
|
474
|
+
return {dEastMeter, dNorthMeter};
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
const div = document.querySelector('#irie-map');
|
|
478
|
+
const modelOrigin = JSON.parse(div.dataset.location); // [-124.1014, 40.50303];
|
|
479
|
+
const modelSource = div.dataset.rendering ; //'/uploads/renderings/painter.glb';
|
|
480
|
+
const unitToMeter = 1/3.2808;
|
|
481
|
+
|
|
482
|
+
const MAPTILER_KEY = 'get_your_own_OpIi9ZULNHzrESv6T2vL';
|
|
483
|
+
const mapid = 'winter'; // 'dataviz'; // 'basic-v2'; // 'aquarelle';
|
|
484
|
+
const map = (window.map = new maplibregl.Map({
|
|
485
|
+
container: 'irie-map',
|
|
486
|
+
style: `https://api.maptiler.com/maps/${mapid}/style.json?key=${MAPTILER_KEY}`,
|
|
487
|
+
// style: {
|
|
488
|
+
// version: 8,
|
|
489
|
+
// sources: {
|
|
490
|
+
// osm: {
|
|
491
|
+
// type: 'raster',
|
|
492
|
+
// tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
|
|
493
|
+
// tileSize: 256,
|
|
494
|
+
// attribution: '© OpenStreetMap Contributors',
|
|
495
|
+
// maxzoom: 19
|
|
496
|
+
// },
|
|
497
|
+
// // Use a different source for terrain and hillshade layers, to improve render quality
|
|
498
|
+
// terrainSource: {
|
|
499
|
+
// type: 'raster-dem',
|
|
500
|
+
// url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
|
|
501
|
+
// tileSize: 256
|
|
502
|
+
// },
|
|
503
|
+
// hillshadeSource: {
|
|
504
|
+
// type: 'raster-dem',
|
|
505
|
+
// url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
|
|
506
|
+
// tileSize: 256
|
|
507
|
+
// }
|
|
508
|
+
// },
|
|
509
|
+
// layers: [
|
|
510
|
+
// {
|
|
511
|
+
// id: 'osm',
|
|
512
|
+
// type: 'raster',
|
|
513
|
+
// source: 'osm'
|
|
514
|
+
// },
|
|
515
|
+
// {
|
|
516
|
+
// id: 'hills',
|
|
517
|
+
// type: 'hillshade',
|
|
518
|
+
// source: 'hillshadeSource',
|
|
519
|
+
// layout: {visibility: 'visible'},
|
|
520
|
+
// paint: {'hillshade-shadow-color': '#473B24'}
|
|
521
|
+
// }
|
|
522
|
+
// ],
|
|
523
|
+
// terrain: {
|
|
524
|
+
// source: 'terrainSource',
|
|
525
|
+
// exaggeration: 1
|
|
526
|
+
// }
|
|
527
|
+
// },
|
|
528
|
+
zoom: 18,
|
|
529
|
+
center: modelOrigin,
|
|
530
|
+
zoom: 18,
|
|
531
|
+
maxZoom: 30,
|
|
532
|
+
maxPitch: 85,
|
|
533
|
+
pitch: 77,
|
|
534
|
+
canvasContextAttributes: {antialias: true} // create the gl context with MSAA antialiasing, so custom layers are antialiased
|
|
535
|
+
}));
|
|
536
|
+
|
|
537
|
+
|
|
538
|
+
//
|
|
539
|
+
// Add Buildings
|
|
540
|
+
//
|
|
541
|
+
|
|
542
|
+
// The 'building' layer in the streets vector source contains building-height
|
|
543
|
+
// data from OpenStreetMap.
|
|
544
|
+
map.on('load', () => {
|
|
545
|
+
// Insert the layer beneath any symbol layer.
|
|
546
|
+
const layers = map.getStyle().layers;
|
|
547
|
+
|
|
548
|
+
let labelLayerId;
|
|
549
|
+
for (let i = 0; i < layers.length; i++) {
|
|
550
|
+
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
|
|
551
|
+
labelLayerId = layers[i].id;
|
|
552
|
+
break;
|
|
553
|
+
}
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
map.addSource('openmaptiles', {
|
|
557
|
+
url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${MAPTILER_KEY}`,
|
|
558
|
+
type: 'vector',
|
|
559
|
+
});
|
|
560
|
+
|
|
561
|
+
map.addLayer(
|
|
562
|
+
{
|
|
563
|
+
'id': '3d-buildings',
|
|
564
|
+
'source': 'openmaptiles',
|
|
565
|
+
'source-layer': 'building',
|
|
566
|
+
'type': 'fill-extrusion',
|
|
567
|
+
'minzoom': 15,
|
|
568
|
+
'filter': ['!=', ['get', 'hide_3d'], true],
|
|
569
|
+
'paint': {
|
|
570
|
+
'fill-extrusion-color': [
|
|
571
|
+
'interpolate',
|
|
572
|
+
['linear'],
|
|
573
|
+
['get', 'render_height'], 0, 'lightgray', 200, 'royalblue', 400, 'lightblue'
|
|
574
|
+
],
|
|
575
|
+
'fill-extrusion-height': [
|
|
576
|
+
'interpolate',
|
|
577
|
+
['linear'],
|
|
578
|
+
['zoom'],
|
|
579
|
+
15,
|
|
580
|
+
0,
|
|
581
|
+
16,
|
|
582
|
+
['get', 'render_height']
|
|
583
|
+
],
|
|
584
|
+
'fill-extrusion-base': ['case',
|
|
585
|
+
['>=', ['get', 'zoom'], 16],
|
|
586
|
+
['get', 'render_min_height'], 0
|
|
587
|
+
]
|
|
588
|
+
}
|
|
589
|
+
},
|
|
590
|
+
labelLayerId
|
|
591
|
+
);
|
|
592
|
+
});
|
|
593
|
+
|
|
594
|
+
|
|
595
|
+
//
|
|
596
|
+
// Add Asset
|
|
597
|
+
//
|
|
598
|
+
const worldAltitude = 0;
|
|
599
|
+
// +x east, +y up, +z north
|
|
600
|
+
const modelRotate = [Math.PI / 2, 0, 0];
|
|
601
|
+
// Maplibre.js default coordinate system (no rotations)
|
|
602
|
+
// +x east, -y north, +z up
|
|
603
|
+
// const modelRotate = [0, 0, 0];
|
|
604
|
+
|
|
605
|
+
map.on('style.load', () => {
|
|
606
|
+
map.addLayer(createAssetLayerThreeJS({
|
|
607
|
+
|
|
608
|
+
map,
|
|
609
|
+
modelSource,
|
|
610
|
+
modelOrigin,
|
|
611
|
+
modelRotate,
|
|
612
|
+
unitToMeter
|
|
613
|
+
}));
|
|
614
|
+
});
|
|
615
|
+
</script>
|
|
616
|
+
|
|
617
|
+
</body>
|
|
618
|
+
</html>
|