mobility-toolbox-js 3.0.0-beta.32 → 3.0.0-beta.34
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.
- package/api/HttpAPI.js +1 -3
- package/api/RealtimeAPI.d.ts +5 -5
- package/api/RealtimeAPI.js +3 -3
- package/api/WebSocketAPI.js +0 -1
- package/common/controls/StopFinderControlCommon.d.ts +1 -1
- package/common/controls/StopFinderControlCommon.js +1 -1
- package/common/styles/realtimeDefaultStyle.js +0 -5
- package/common/styles/realtimeHeadingStyle.js +0 -5
- package/common/styles/realtimeSimpleStyle.d.ts +0 -1
- package/common/styles/realtimeSimpleStyle.js +0 -1
- package/common/utils/RealtimeEngine.d.ts +214 -0
- package/common/utils/RealtimeEngine.js +555 -0
- package/common/utils/getLayersAsFlatArray.d.ts +0 -1
- package/common/utils/getLayersAsFlatArray.js +0 -1
- package/common/utils/realtimeConfig.d.ts +1 -1
- package/common/utils/realtimeConfig.js +0 -1
- package/common/utils/renderTrajectories.d.ts +1 -0
- package/common/utils/renderTrajectories.js +1 -0
- package/common/utils/sortAndFilterDepartures.d.ts +1 -0
- package/common/utils/sortAndFilterDepartures.js +1 -0
- package/maplibre/controls/CopyrightControl.d.ts +9 -6
- package/maplibre/controls/CopyrightControl.js +11 -8
- package/maplibre/layers/Layer.d.ts +7 -6
- package/maplibre/layers/Layer.js +1 -2
- package/maplibre/layers/RealtimeLayer.d.ts +54 -111
- package/maplibre/layers/RealtimeLayer.js +126 -114
- package/maplibre/utils/getSourceCoordinates.d.ts +1 -0
- package/maplibre/utils/getSourceCoordinates.js +5 -4
- package/mbt.js +5329 -13530
- package/mbt.js.map +4 -4
- package/mbt.min.js +68 -71
- package/mbt.min.js.map +4 -4
- package/ol/controls/CopyrightControl.d.ts +13 -5
- package/ol/controls/CopyrightControl.js +13 -5
- package/ol/controls/RoutingControl.d.ts +30 -19
- package/ol/controls/RoutingControl.js +33 -48
- package/ol/controls/StopFinderControl.d.ts +23 -4
- package/ol/controls/StopFinderControl.js +22 -3
- package/ol/layers/MaplibreLayer.d.ts +22 -9
- package/ol/layers/MaplibreLayer.js +22 -9
- package/ol/layers/MaplibreStyleLayer.d.ts +35 -27
- package/ol/layers/MaplibreStyleLayer.js +36 -29
- package/ol/layers/RealtimeLayer.d.ts +76 -125
- package/ol/layers/RealtimeLayer.js +134 -169
- package/ol/mixins/PropertiesLayerMixin.d.ts +4 -6
- package/ol/mixins/PropertiesLayerMixin.js +0 -2
- package/ol/renderers/RealtimeLayerRenderer.js +6 -31
- package/ol/styles/fullTrajectoryDelayStyle.js +5 -7
- package/ol/styles/fullTrajectoryStyle.d.ts +1 -2
- package/ol/styles/fullTrajectoryStyle.js +5 -7
- package/ol/styles/routingStyle.d.ts +0 -1
- package/ol/styles/routingStyle.js +2 -7
- package/package.json +34 -32
- package/types/common.d.ts +2 -1
- package/common/mixins/RealtimeLayerMixin.d.ts +0 -267
- package/common/mixins/RealtimeLayerMixin.js +0 -751
|
@@ -0,0 +1,555 @@
|
|
|
1
|
+
import debounce from 'lodash.debounce';
|
|
2
|
+
import throttle from 'lodash.throttle';
|
|
3
|
+
import { buffer, containsCoordinate, intersects } from 'ol/extent';
|
|
4
|
+
import GeoJSON from 'ol/format/GeoJSON';
|
|
5
|
+
import { fromLonLat } from 'ol/proj';
|
|
6
|
+
import { RealtimeAPI, RealtimeModes } from '../../api';
|
|
7
|
+
import realtimeDefaultStyle from '../styles/realtimeDefaultStyle';
|
|
8
|
+
import * as realtimeConfig from './realtimeConfig';
|
|
9
|
+
import renderTrajectories from './renderTrajectories';
|
|
10
|
+
/**
|
|
11
|
+
* This class is responsible for drawing trajectories from a realtime API in a canvas,
|
|
12
|
+
* depending on the map's view state and at a specific time.
|
|
13
|
+
*
|
|
14
|
+
* This class is totally agnostic from Maplibre or OpenLayers and must stay taht way.
|
|
15
|
+
*/
|
|
16
|
+
class RealtimeEngine {
|
|
17
|
+
constructor(options) {
|
|
18
|
+
this.getViewState = () => ({});
|
|
19
|
+
this.shouldRender = () => true;
|
|
20
|
+
this._mode = options.mode || RealtimeModes.TOPOGRAPHIC;
|
|
21
|
+
this._speed = options.speed || 1; // If live property is true. The speed is ignored.
|
|
22
|
+
this._style = options.style || realtimeDefaultStyle;
|
|
23
|
+
this._time = options.time || new Date();
|
|
24
|
+
this.api = options.api || new RealtimeAPI(options);
|
|
25
|
+
this.bboxParameters = options.bboxParameters;
|
|
26
|
+
this.canvas = options.canvas || document.createElement('canvas');
|
|
27
|
+
this.debug = options.debug || false;
|
|
28
|
+
this.filter = options.filter;
|
|
29
|
+
this.hoverVehicleId = options.hoverVehicleId;
|
|
30
|
+
/**
|
|
31
|
+
* If true. The layer will always use Date.now() on the next tick to render the trajectories.
|
|
32
|
+
* When true, setting the time property has no effect.
|
|
33
|
+
*/
|
|
34
|
+
this.live = options.live !== false;
|
|
35
|
+
this.minZoomInterpolation = options.minZoomInterpolation || 8; // Min zoom level from which trains positions are not interpolated.
|
|
36
|
+
this.pixelRatio =
|
|
37
|
+
options.pixelRatio ||
|
|
38
|
+
(typeof window !== 'undefined' ? window.devicePixelRatio : 1);
|
|
39
|
+
this.selectedVehicleId = options.selectedVehicleId;
|
|
40
|
+
this.sort = options.sort;
|
|
41
|
+
/**
|
|
42
|
+
* Custom options to pass as last parameter of the style function.
|
|
43
|
+
*/
|
|
44
|
+
// @ts-expect-error good type must be defined
|
|
45
|
+
this.styleOptions = Object.assign(Object.assign({}, realtimeConfig), (options.styleOptions || {}));
|
|
46
|
+
this.tenant = options.tenant || ''; // sbb,sbh or sbm
|
|
47
|
+
this.trajectories = {};
|
|
48
|
+
this.useDebounce = options.useDebounce || false;
|
|
49
|
+
this.useRequestAnimationFrame = options.useRequestAnimationFrame || false;
|
|
50
|
+
this.useThrottle = options.useThrottle !== false; // the default behavior
|
|
51
|
+
this.getViewState = options.getViewState || (() => ({}));
|
|
52
|
+
this.shouldRender = options.shouldRender || (() => true);
|
|
53
|
+
this.onRender = options.onRender;
|
|
54
|
+
this.onStart = options.onStart;
|
|
55
|
+
this.onStop = options.onStop;
|
|
56
|
+
this.format = new GeoJSON();
|
|
57
|
+
// Server will block non train before zoom 9
|
|
58
|
+
this.motsByZoom = options.motsByZoom || [
|
|
59
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
60
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
61
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
62
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
63
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
64
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
65
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
66
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
67
|
+
realtimeConfig.MOTS_ONLY_RAIL,
|
|
68
|
+
realtimeConfig.MOTS_WITHOUT_CABLE,
|
|
69
|
+
realtimeConfig.MOTS_WITHOUT_CABLE,
|
|
70
|
+
];
|
|
71
|
+
// Mots by zoom
|
|
72
|
+
this.getMotsByZoom = (zoom) => {
|
|
73
|
+
if (options.getMotsByZoom) {
|
|
74
|
+
return options.getMotsByZoom(zoom, this.motsByZoom);
|
|
75
|
+
}
|
|
76
|
+
return this.motsByZoom[zoom];
|
|
77
|
+
};
|
|
78
|
+
// Generalization levels by zoom
|
|
79
|
+
this.generalizationLevelByZoom = options.generalizationLevelByZoom || [];
|
|
80
|
+
this.getGeneralizationLevelByZoom = (zoom) => {
|
|
81
|
+
if (options.getGeneralizationLevelByZoom) {
|
|
82
|
+
return options.getGeneralizationLevelByZoom(zoom, this.generalizationLevelByZoom);
|
|
83
|
+
}
|
|
84
|
+
return this.generalizationLevelByZoom[zoom];
|
|
85
|
+
};
|
|
86
|
+
// Render time interval by zoom
|
|
87
|
+
this.renderTimeIntervalByZoom = options.renderTimeIntervalByZoom || [
|
|
88
|
+
100000, 50000, 40000, 30000, 20000, 15000, 10000, 5000, 2000, 1000, 400,
|
|
89
|
+
300, 250, 180, 90, 60, 50, 50, 50, 50, 50,
|
|
90
|
+
];
|
|
91
|
+
this.getRenderTimeIntervalByZoom = (zoom) => {
|
|
92
|
+
if (options.getRenderTimeIntervalByZoom) {
|
|
93
|
+
return options.getRenderTimeIntervalByZoom(zoom, this.renderTimeIntervalByZoom);
|
|
94
|
+
}
|
|
95
|
+
return this.renderTimeIntervalByZoom[zoom];
|
|
96
|
+
};
|
|
97
|
+
// This property will call api.setBbox on each movend event
|
|
98
|
+
this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd !== false;
|
|
99
|
+
// Define throttling and debounce render function
|
|
100
|
+
this.throttleRenderTrajectories = throttle(this.renderTrajectoriesInternal, 50, { leading: false, trailing: true });
|
|
101
|
+
this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, 50, { leading: true, maxWait: 5000, trailing: true });
|
|
102
|
+
this.renderState = {
|
|
103
|
+
center: [0, 0],
|
|
104
|
+
rotation: 0,
|
|
105
|
+
zoom: undefined,
|
|
106
|
+
};
|
|
107
|
+
this.onTrajectoryMessage = this.onTrajectoryMessage.bind(this);
|
|
108
|
+
this.onDeleteTrajectoryMessage = this.onDeleteTrajectoryMessage.bind(this);
|
|
109
|
+
this.onDocumentVisibilityChange =
|
|
110
|
+
this.onDocumentVisibilityChange.bind(this);
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* Add a trajectory.
|
|
114
|
+
* @param {RealtimeTrajectory} trajectory The trajectory to add.
|
|
115
|
+
* @private
|
|
116
|
+
*/
|
|
117
|
+
addTrajectory(trajectory) {
|
|
118
|
+
if (!this.trajectories) {
|
|
119
|
+
this.trajectories = {};
|
|
120
|
+
}
|
|
121
|
+
const id = trajectory.properties.train_id;
|
|
122
|
+
if (id !== undefined) {
|
|
123
|
+
this.trajectories[id] = trajectory;
|
|
124
|
+
}
|
|
125
|
+
this.renderTrajectories();
|
|
126
|
+
}
|
|
127
|
+
attachToMap() {
|
|
128
|
+
// To avoid browser hanging when the tab is not visible for a certain amount of time,
|
|
129
|
+
// We stop the rendering and the websocket when hide and start again when show.
|
|
130
|
+
document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
|
|
131
|
+
}
|
|
132
|
+
detachFromMap() {
|
|
133
|
+
document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
|
|
134
|
+
this.stop();
|
|
135
|
+
if (this.canvas) {
|
|
136
|
+
const context = this.canvas.getContext('2d');
|
|
137
|
+
if (context) {
|
|
138
|
+
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* Get the duration before the next update depending on zoom level.
|
|
144
|
+
*
|
|
145
|
+
* @private
|
|
146
|
+
*/
|
|
147
|
+
getRefreshTimeInMs() {
|
|
148
|
+
var _a;
|
|
149
|
+
const viewState = this.getViewState();
|
|
150
|
+
const zoom = viewState.zoom || 0;
|
|
151
|
+
const roundedZoom = zoom !== undefined ? Math.round(zoom) : -1;
|
|
152
|
+
const timeStep = this.getRenderTimeIntervalByZoom(roundedZoom) || 25;
|
|
153
|
+
const nextTick = Math.max(25, timeStep / (this.speed || 1));
|
|
154
|
+
const nextThrottleTick = Math.min(nextTick, 500);
|
|
155
|
+
// TODO: see if this should go elsewhere.
|
|
156
|
+
if (this.useThrottle) {
|
|
157
|
+
this.throttleRenderTrajectories = throttle(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, trailing: true });
|
|
158
|
+
}
|
|
159
|
+
else if (this.useDebounce) {
|
|
160
|
+
this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, maxWait: 5000, trailing: true });
|
|
161
|
+
}
|
|
162
|
+
if ((_a = this.api) === null || _a === void 0 ? void 0 : _a.buffer) {
|
|
163
|
+
const [, size] = this.api.buffer;
|
|
164
|
+
this.api.buffer = [nextThrottleTick, size];
|
|
165
|
+
}
|
|
166
|
+
return nextTick;
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* Get vehicle.
|
|
170
|
+
* @param {function} filterFc A function use to filter results.
|
|
171
|
+
* @return {Array<Object>} Array of vehicle.
|
|
172
|
+
*/
|
|
173
|
+
getVehicle(filterFc) {
|
|
174
|
+
return ((this.trajectories &&
|
|
175
|
+
// @ts-expect-error good type must be defined
|
|
176
|
+
Object.values(this.trajectories).filter(filterFc)) ||
|
|
177
|
+
[]);
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Request feature information for a given coordinate.
|
|
181
|
+
*
|
|
182
|
+
* @param {ol/coordinate~Coordinate} coordinate Coordinate.
|
|
183
|
+
* @param {Object} options Options See child classes to see which options are supported.
|
|
184
|
+
* @param {number} [options.resolution=1] The resolution of the map.
|
|
185
|
+
* @param {number} [options.nb=Infinity] The max number of vehicles to return.
|
|
186
|
+
* @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
|
|
187
|
+
*/
|
|
188
|
+
getVehiclesAtCoordinate(coordinate, options) {
|
|
189
|
+
const { resolution } = this.getViewState();
|
|
190
|
+
const { hitTolerance, nb } = options || {};
|
|
191
|
+
const ext = buffer([...coordinate, ...coordinate], (hitTolerance || 5) * (resolution || 1));
|
|
192
|
+
let trajectories = Object.values(this.trajectories || {});
|
|
193
|
+
if (this.sort) {
|
|
194
|
+
// @ts-expect-error good type must be defined
|
|
195
|
+
trajectories = trajectories.sort(this.sort);
|
|
196
|
+
}
|
|
197
|
+
const vehicles = [];
|
|
198
|
+
for (let i = 0; i < trajectories.length; i += 1) {
|
|
199
|
+
// @ts-expect-error coordinate is added by the RealtimeLayer
|
|
200
|
+
const { coordinate: trajcoord } = trajectories[i].properties;
|
|
201
|
+
if (trajcoord && containsCoordinate(ext, trajcoord)) {
|
|
202
|
+
vehicles.push(trajectories[i]);
|
|
203
|
+
}
|
|
204
|
+
if (vehicles.length === nb) {
|
|
205
|
+
break;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
return { features: vehicles, type: 'FeatureCollection' };
|
|
209
|
+
}
|
|
210
|
+
/**
|
|
211
|
+
* Callback on websocket's deleted_vehicles channel events.
|
|
212
|
+
* It removes the trajectory from the list.
|
|
213
|
+
*
|
|
214
|
+
* @private
|
|
215
|
+
* @override
|
|
216
|
+
*/
|
|
217
|
+
onDeleteTrajectoryMessage(data) {
|
|
218
|
+
if (!data.content) {
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
221
|
+
this.removeTrajectory(data.content);
|
|
222
|
+
}
|
|
223
|
+
onDocumentVisibilityChange() {
|
|
224
|
+
if (document.hidden) {
|
|
225
|
+
this.stop();
|
|
226
|
+
// Since we don't receive deleted_vehicles event when docuement
|
|
227
|
+
// is hidden. We have to clean all the trajectories for a fresh
|
|
228
|
+
// start when the document is visible again.
|
|
229
|
+
this.trajectories = {};
|
|
230
|
+
}
|
|
231
|
+
else {
|
|
232
|
+
const viewState = this.getViewState();
|
|
233
|
+
if (!viewState.visible) {
|
|
234
|
+
return;
|
|
235
|
+
}
|
|
236
|
+
this.start();
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
/**
|
|
240
|
+
* Callback on websocket's trajectory channel events.
|
|
241
|
+
* It adds a trajectory to the list.
|
|
242
|
+
*
|
|
243
|
+
* @private
|
|
244
|
+
*/
|
|
245
|
+
onTrajectoryMessage(data) {
|
|
246
|
+
if (!data.content) {
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
const trajectory = data.content;
|
|
250
|
+
const { geometry, properties: { raw_coordinates: rawCoordinates, time_since_update: timeSinceUpdate, }, } = trajectory;
|
|
251
|
+
// ignore old events [SBAHNM-97]
|
|
252
|
+
// @ts-expect-error can be undefined
|
|
253
|
+
if (timeSinceUpdate < 0) {
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
// console.time(`onTrajectoryMessage${data.content.properties.train_id}`);
|
|
257
|
+
if (this.purgeTrajectory(trajectory)) {
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
if (this.debug &&
|
|
261
|
+
this.mode === RealtimeModes.TOPOGRAPHIC &&
|
|
262
|
+
rawCoordinates) {
|
|
263
|
+
// @ts-expect-error missing type definition
|
|
264
|
+
trajectory.properties.olGeometry = this.format.readGeometry({
|
|
265
|
+
coordinates: fromLonLat(rawCoordinates),
|
|
266
|
+
type: 'Point',
|
|
267
|
+
});
|
|
268
|
+
}
|
|
269
|
+
else {
|
|
270
|
+
// @ts-expect-error missing type definition
|
|
271
|
+
trajectory.properties.olGeometry = this.format.readGeometry(geometry);
|
|
272
|
+
}
|
|
273
|
+
// TODO Make sure the timeOffset is useful. May be we can remove it.
|
|
274
|
+
// @ts-expect-error missing type definition
|
|
275
|
+
trajectory.properties.timeOffset = Date.now() - data.timestamp;
|
|
276
|
+
this.addTrajectory(trajectory);
|
|
277
|
+
}
|
|
278
|
+
/**
|
|
279
|
+
* On zoomend we adjust the time interval of the update of vehicles positions.
|
|
280
|
+
*
|
|
281
|
+
* @private
|
|
282
|
+
*/
|
|
283
|
+
onZoomEnd() {
|
|
284
|
+
this.startUpdateTime();
|
|
285
|
+
}
|
|
286
|
+
/**
|
|
287
|
+
* Remove all trajectories that are in the past.
|
|
288
|
+
*/
|
|
289
|
+
purgeOutOfDateTrajectories() {
|
|
290
|
+
Object.entries(this.trajectories || {}).forEach(([key, trajectory]) => {
|
|
291
|
+
var _a;
|
|
292
|
+
const timeIntervals = (_a = trajectory === null || trajectory === void 0 ? void 0 : trajectory.properties) === null || _a === void 0 ? void 0 : _a.time_intervals;
|
|
293
|
+
if (this.time && (timeIntervals === null || timeIntervals === void 0 ? void 0 : timeIntervals.length)) {
|
|
294
|
+
const lastTimeInterval = timeIntervals[timeIntervals.length - 1][0];
|
|
295
|
+
if (lastTimeInterval < this.time.getTime()) {
|
|
296
|
+
this.removeTrajectory(key);
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
});
|
|
300
|
+
}
|
|
301
|
+
/**
|
|
302
|
+
* Determine if the trajectory is useless and should be removed from the list or not.
|
|
303
|
+
* By default, this function exclude vehicles:
|
|
304
|
+
* - that have their trajectory outside the current extent and
|
|
305
|
+
* - that aren't in the MOT list.
|
|
306
|
+
*
|
|
307
|
+
* @param {RealtimeTrajectory} trajectory
|
|
308
|
+
* @return {boolean} if the trajectory must be displayed or not.
|
|
309
|
+
* @private
|
|
310
|
+
*/
|
|
311
|
+
purgeTrajectory(trajectory) {
|
|
312
|
+
const viewState = this.getViewState();
|
|
313
|
+
const extent = viewState.extent;
|
|
314
|
+
const { bounds, type } = trajectory.properties;
|
|
315
|
+
if ((this.isUpdateBboxOnMoveEnd && extent && !intersects(extent, bounds)) ||
|
|
316
|
+
(this.mots && !this.mots.includes(type))) {
|
|
317
|
+
this.removeTrajectory(trajectory);
|
|
318
|
+
return true;
|
|
319
|
+
}
|
|
320
|
+
return false;
|
|
321
|
+
}
|
|
322
|
+
removeTrajectory(trajectoryOrId) {
|
|
323
|
+
var _a;
|
|
324
|
+
let id;
|
|
325
|
+
if (typeof trajectoryOrId !== 'string') {
|
|
326
|
+
id = (_a = trajectoryOrId === null || trajectoryOrId === void 0 ? void 0 : trajectoryOrId.properties) === null || _a === void 0 ? void 0 : _a.train_id;
|
|
327
|
+
}
|
|
328
|
+
else {
|
|
329
|
+
id = trajectoryOrId;
|
|
330
|
+
}
|
|
331
|
+
if (id !== undefined && this.trajectories) {
|
|
332
|
+
delete this.trajectories[id];
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
/**
|
|
336
|
+
* Render the trajectories requesting an animation frame and cancelling the previous one.
|
|
337
|
+
* This function must be overrided by children to provide the correct parameters.
|
|
338
|
+
*
|
|
339
|
+
* @param {boolean} noInterpolate If true trajectories are not interpolated but
|
|
340
|
+
* drawn at the last known coordinate. Use this for performance optimization
|
|
341
|
+
* during map navigation.
|
|
342
|
+
* @private
|
|
343
|
+
*/
|
|
344
|
+
renderTrajectories(noInterpolate) {
|
|
345
|
+
const viewState = this.getViewState();
|
|
346
|
+
if (this.requestId) {
|
|
347
|
+
cancelAnimationFrame(this.requestId);
|
|
348
|
+
this.requestId = undefined;
|
|
349
|
+
}
|
|
350
|
+
if (!(viewState === null || viewState === void 0 ? void 0 : viewState.center) || !(viewState === null || viewState === void 0 ? void 0 : viewState.extent) || !(viewState === null || viewState === void 0 ? void 0 : viewState.size)) {
|
|
351
|
+
return;
|
|
352
|
+
}
|
|
353
|
+
if (!noInterpolate && this.useRequestAnimationFrame) {
|
|
354
|
+
this.requestId = requestAnimationFrame(() => {
|
|
355
|
+
this.renderTrajectoriesInternal(viewState, noInterpolate);
|
|
356
|
+
});
|
|
357
|
+
}
|
|
358
|
+
else if (!noInterpolate && this.useDebounce) {
|
|
359
|
+
this.debounceRenderTrajectories(viewState, noInterpolate);
|
|
360
|
+
}
|
|
361
|
+
else if (!noInterpolate && this.useThrottle) {
|
|
362
|
+
this.throttleRenderTrajectories(viewState, noInterpolate);
|
|
363
|
+
}
|
|
364
|
+
else {
|
|
365
|
+
this.renderTrajectoriesInternal(viewState, noInterpolate);
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
/**
|
|
369
|
+
* Launch renderTrajectories. it avoids duplicating code in renderTrajectories method.
|
|
370
|
+
*
|
|
371
|
+
* @param {object} viewState The view state of the map.
|
|
372
|
+
* @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
|
|
373
|
+
* @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
|
|
374
|
+
* @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
|
|
375
|
+
* @param {number} [viewState.rotation = 0] Rotation of the map to render.
|
|
376
|
+
* @param {number} viewState.resolution Resolution of the map to render.
|
|
377
|
+
* @param {boolean} noInterpolate If true trajectories are not interpolated but
|
|
378
|
+
* drawn at the last known coordinate. Use this for performance optimization
|
|
379
|
+
* during map navigation.
|
|
380
|
+
* @private
|
|
381
|
+
*/
|
|
382
|
+
renderTrajectoriesInternal(viewState, noInterpolate = false) {
|
|
383
|
+
var _a, _b;
|
|
384
|
+
if (!this.trajectories || !this.shouldRender()) {
|
|
385
|
+
return false;
|
|
386
|
+
}
|
|
387
|
+
const time = this.live ? Date.now() : (_a = this.time) === null || _a === void 0 ? void 0 : _a.getTime();
|
|
388
|
+
const trajectories = Object.values(this.trajectories);
|
|
389
|
+
// console.time('sort');
|
|
390
|
+
if (this.sort) {
|
|
391
|
+
// @ts-expect-error type problem
|
|
392
|
+
trajectories.sort(this.sort);
|
|
393
|
+
}
|
|
394
|
+
// console.timeEnd('sort');
|
|
395
|
+
if (!this.canvas || !this.style) {
|
|
396
|
+
return true;
|
|
397
|
+
}
|
|
398
|
+
this.renderState = renderTrajectories(this.canvas, trajectories, this.style, Object.assign(Object.assign({}, viewState), { pixelRatio: this.pixelRatio || 1, time }), Object.assign({ filter: this.filter, hoverVehicleId: this.hoverVehicleId, noInterpolate: (viewState.zoom || 0) < this.minZoomInterpolation
|
|
399
|
+
? true
|
|
400
|
+
: noInterpolate, selectedVehicleId: this.selectedVehicleId }, this.styleOptions));
|
|
401
|
+
(_b = this.onRender) === null || _b === void 0 ? void 0 : _b.call(this, this.renderState, viewState);
|
|
402
|
+
// console.timeEnd('render');
|
|
403
|
+
return true;
|
|
404
|
+
}
|
|
405
|
+
setBbox() {
|
|
406
|
+
const viewState = this.getViewState();
|
|
407
|
+
const extent = viewState.extent;
|
|
408
|
+
const zoom = viewState.zoom || 0;
|
|
409
|
+
if (!extent || Number.isNaN(zoom)) {
|
|
410
|
+
return;
|
|
411
|
+
}
|
|
412
|
+
// Clean trajectories before sending the new bbox
|
|
413
|
+
// Purge trajectories:
|
|
414
|
+
// - which are outside the extent
|
|
415
|
+
// - when it's bus and zoom level is too low for them
|
|
416
|
+
if (this.trajectories && extent && zoom) {
|
|
417
|
+
const keys = Object.keys(this.trajectories);
|
|
418
|
+
for (let i = keys.length - 1; i >= 0; i -= 1) {
|
|
419
|
+
this.purgeTrajectory(this.trajectories[keys[i]]);
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
// The backend only supports non float value
|
|
423
|
+
const zoomFloor = Math.floor(zoom);
|
|
424
|
+
if (!extent || Number.isNaN(zoomFloor)) {
|
|
425
|
+
return;
|
|
426
|
+
}
|
|
427
|
+
// The extent does not need to be precise under meter, so we round floor/ceil the values.
|
|
428
|
+
const [minX, minY, maxX, maxY] = extent;
|
|
429
|
+
const bbox = [
|
|
430
|
+
Math.floor(minX),
|
|
431
|
+
Math.floor(minY),
|
|
432
|
+
Math.ceil(maxX),
|
|
433
|
+
Math.ceil(maxY),
|
|
434
|
+
zoomFloor,
|
|
435
|
+
];
|
|
436
|
+
/* @private */
|
|
437
|
+
this.generalizationLevel = this.getGeneralizationLevelByZoom(zoomFloor);
|
|
438
|
+
if (this.generalizationLevel) {
|
|
439
|
+
bbox.push(`gen=${this.generalizationLevel}`);
|
|
440
|
+
}
|
|
441
|
+
/* @private */
|
|
442
|
+
this.mots = this.getMotsByZoom(zoomFloor);
|
|
443
|
+
if (this.mots) {
|
|
444
|
+
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
|
|
445
|
+
bbox.push(`mots=${this.mots}`);
|
|
446
|
+
}
|
|
447
|
+
if (this.tenant) {
|
|
448
|
+
bbox.push(`tenant=${this.tenant}`);
|
|
449
|
+
}
|
|
450
|
+
if (this.mode !== 'topographic') {
|
|
451
|
+
bbox.push(`channel_prefix=${this.mode}`);
|
|
452
|
+
}
|
|
453
|
+
if (this.bboxParameters) {
|
|
454
|
+
Object.entries(this.bboxParameters).forEach(([key, value]) => {
|
|
455
|
+
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
|
|
456
|
+
bbox.push(`${key}=${value}`);
|
|
457
|
+
});
|
|
458
|
+
}
|
|
459
|
+
// Extent and zoom level are mandatory.
|
|
460
|
+
this.api.bbox = bbox;
|
|
461
|
+
}
|
|
462
|
+
start() {
|
|
463
|
+
this.stop();
|
|
464
|
+
// Before starting to update trajectories, we remove trajectories that have
|
|
465
|
+
// a time_intervals in the past, it will
|
|
466
|
+
// avoid phantom train that are at the end of their route because we never
|
|
467
|
+
// received the deleted_vehicle event because we have changed the browser tab.
|
|
468
|
+
this.purgeOutOfDateTrajectories();
|
|
469
|
+
this.renderTrajectories();
|
|
470
|
+
this.startUpdateTime();
|
|
471
|
+
this.api.open();
|
|
472
|
+
this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, undefined, this.isUpdateBboxOnMoveEnd);
|
|
473
|
+
this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, undefined, this.isUpdateBboxOnMoveEnd);
|
|
474
|
+
// Update the bbox on each move end
|
|
475
|
+
if (this.isUpdateBboxOnMoveEnd) {
|
|
476
|
+
this.setBbox();
|
|
477
|
+
}
|
|
478
|
+
if (this.onStart) {
|
|
479
|
+
this.onStart(this);
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
/**
|
|
483
|
+
* Start the clock.
|
|
484
|
+
* @private
|
|
485
|
+
*/
|
|
486
|
+
startUpdateTime() {
|
|
487
|
+
this.stopUpdateTime();
|
|
488
|
+
this.updateTimeDelay = this.getRefreshTimeInMs() || 0;
|
|
489
|
+
this.updateTimeInterval = window.setInterval(() => {
|
|
490
|
+
// When live=true, we update the time with new Date();
|
|
491
|
+
if (this.live) {
|
|
492
|
+
this.time = new Date();
|
|
493
|
+
}
|
|
494
|
+
else if (this.time && this.updateTimeDelay && this.speed) {
|
|
495
|
+
this.time = new Date(this.time.getTime() + this.updateTimeDelay * this.speed);
|
|
496
|
+
}
|
|
497
|
+
}, this.updateTimeDelay);
|
|
498
|
+
}
|
|
499
|
+
stop() {
|
|
500
|
+
this.api.unsubscribeTrajectory(this.onTrajectoryMessage);
|
|
501
|
+
this.api.unsubscribeDeletedVehicles(this.onDeleteTrajectoryMessage);
|
|
502
|
+
this.api.close();
|
|
503
|
+
if (this.onStop) {
|
|
504
|
+
this.onStop(this);
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
/**
|
|
508
|
+
* Stop the clock.
|
|
509
|
+
* @private
|
|
510
|
+
*/
|
|
511
|
+
stopUpdateTime() {
|
|
512
|
+
if (this.updateTimeInterval) {
|
|
513
|
+
clearInterval(this.updateTimeInterval);
|
|
514
|
+
this.updateTimeInterval = undefined;
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
get mode() {
|
|
518
|
+
return this._mode;
|
|
519
|
+
}
|
|
520
|
+
set mode(newMode) {
|
|
521
|
+
var _a, _b;
|
|
522
|
+
if (newMode === this._mode) {
|
|
523
|
+
return;
|
|
524
|
+
}
|
|
525
|
+
this._mode = newMode;
|
|
526
|
+
if ((_b = (_a = this.api) === null || _a === void 0 ? void 0 : _a.wsApi) === null || _b === void 0 ? void 0 : _b.open) {
|
|
527
|
+
this.stop();
|
|
528
|
+
this.start();
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
get speed() {
|
|
532
|
+
return this._speed;
|
|
533
|
+
}
|
|
534
|
+
set speed(newSpeed) {
|
|
535
|
+
this._speed = newSpeed;
|
|
536
|
+
this.start();
|
|
537
|
+
}
|
|
538
|
+
get style() {
|
|
539
|
+
return this._style;
|
|
540
|
+
}
|
|
541
|
+
set style(newStyle) {
|
|
542
|
+
this._style = newStyle;
|
|
543
|
+
this.renderTrajectories();
|
|
544
|
+
}
|
|
545
|
+
get time() {
|
|
546
|
+
return this._time;
|
|
547
|
+
}
|
|
548
|
+
set time(newTime) {
|
|
549
|
+
this._time = (newTime === null || newTime === void 0 ? void 0 : newTime.getTime)
|
|
550
|
+
? newTime
|
|
551
|
+
: new Date(newTime);
|
|
552
|
+
this.renderTrajectories();
|
|
553
|
+
}
|
|
554
|
+
}
|
|
555
|
+
export default RealtimeEngine;
|
|
@@ -57,7 +57,7 @@ export declare const getTextSize: (ctx: AnyCanvasContext, markerSize: number, te
|
|
|
57
57
|
* @param {boolean} cancelled true if the journey is cancelled.
|
|
58
58
|
* @param {boolean} isDelayText true if the color is used for delay text of the symbol.
|
|
59
59
|
*/
|
|
60
|
-
export declare const getDelayColor: (delayInMs:
|
|
60
|
+
export declare const getDelayColor: (delayInMs: null | number, cancelled?: boolean, isDelayText?: boolean) => string;
|
|
61
61
|
/**
|
|
62
62
|
* @private
|
|
63
63
|
*/
|
|
@@ -5,6 +5,7 @@ import { AnyCanvas, RealtimeRenderState, RealtimeStyleFunction, RealtimeStyleOpt
|
|
|
5
5
|
* @param {ViewState} trajectories An array of trajectories.
|
|
6
6
|
* @param {Function} style A function that returns a canvas representing a vehicle of a specific trajectory.
|
|
7
7
|
* @param {ViewState} viewState The view state of the map.
|
|
8
|
+
* @param {Object} options The options.
|
|
8
9
|
* @param {boolean} options.hoverVehicleId The id of the vehicle to highlight.
|
|
9
10
|
* @param {boolean} options.selectedVehicleId The id of the vehicle to select.
|
|
10
11
|
* @param {boolean} options.noInterpolate If true trajectories are not interpolated but
|
|
@@ -6,6 +6,7 @@ import getVehiclePosition from './getVehiclePosition';
|
|
|
6
6
|
* @param {ViewState} trajectories An array of trajectories.
|
|
7
7
|
* @param {Function} style A function that returns a canvas representing a vehicle of a specific trajectory.
|
|
8
8
|
* @param {ViewState} viewState The view state of the map.
|
|
9
|
+
* @param {Object} options The options.
|
|
9
10
|
* @param {boolean} options.hoverVehicleId The id of the vehicle to highlight.
|
|
10
11
|
* @param {boolean} options.selectedVehicleId The id of the vehicle to select.
|
|
11
12
|
* @param {boolean} options.noInterpolate If true trajectories are not interpolated but
|
|
@@ -8,6 +8,7 @@ import type { RealtimeDepartureExtended } from '../../types';
|
|
|
8
8
|
*
|
|
9
9
|
* @param {Object} depObject The object containing departures by id.
|
|
10
10
|
* @param {boolean} [sortByMinArrivalTime=false] If true sort departures by arrival time.
|
|
11
|
+
* @param {number} [maxDepartureAge=30] The maximum departure age in minutes.
|
|
11
12
|
* @return {RealtimeDeparture[]} Return departures array.
|
|
12
13
|
* @private
|
|
13
14
|
*/
|
|
@@ -7,6 +7,7 @@ import compareDepartures from './compareDepartures';
|
|
|
7
7
|
*
|
|
8
8
|
* @param {Object} depObject The object containing departures by id.
|
|
9
9
|
* @param {boolean} [sortByMinArrivalTime=false] If true sort departures by arrival time.
|
|
10
|
+
* @param {number} [maxDepartureAge=30] The maximum departure age in minutes.
|
|
10
11
|
* @return {RealtimeDeparture[]} Return departures array.
|
|
11
12
|
* @private
|
|
12
13
|
*/
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ControlPosition, IControl } from 'maplibre-gl';
|
|
2
2
|
/**
|
|
3
|
-
* Display layer's
|
|
3
|
+
* Display layer's attributions trying to remove duplicated ones.
|
|
4
4
|
*
|
|
5
5
|
* @example
|
|
6
|
-
* import { Map } from '
|
|
7
|
-
* import { CopyrightControl } from 'mobility-toolbox-js/
|
|
6
|
+
* import { Map } from 'maplibre-gl';
|
|
7
|
+
* import { CopyrightControl } from 'mobility-toolbox-js/maplibre';
|
|
8
8
|
*
|
|
9
9
|
* const map = new Map({
|
|
10
10
|
* container: 'map',
|
|
@@ -15,21 +15,24 @@ import { ControlPosition, IControl } from 'maplibre-gl';
|
|
|
15
15
|
* map.addControl(control);
|
|
16
16
|
*
|
|
17
17
|
*
|
|
18
|
-
* @see <a href="/example/mb-
|
|
18
|
+
* @see <a href="/example/mb-realtime>MapLibre Realtime layer example</a>
|
|
19
19
|
*
|
|
20
|
+
* @implements {maplibregl.IControl}
|
|
21
|
+
*
|
|
22
|
+
* @public
|
|
20
23
|
*/
|
|
21
24
|
declare class CopyrightControl implements IControl {
|
|
22
|
-
map?: maplibregl.Map;
|
|
23
25
|
container?: HTMLElement;
|
|
24
26
|
content?: string;
|
|
27
|
+
map?: maplibregl.Map;
|
|
25
28
|
options?: {
|
|
26
29
|
customAttribution?: string | string[];
|
|
27
30
|
separator?: string;
|
|
28
31
|
};
|
|
29
32
|
constructor(options?: {});
|
|
33
|
+
getDefaultPosition(): ControlPosition;
|
|
30
34
|
onAdd(map: maplibregl.Map): HTMLElement;
|
|
31
35
|
onRemove(): HTMLElement | undefined;
|
|
32
|
-
getDefaultPosition(): ControlPosition;
|
|
33
36
|
render(): void;
|
|
34
37
|
}
|
|
35
38
|
export default CopyrightControl;
|