Move simulation ownership out of Map

This commit is contained in:
Mattéo Delabre 2022-07-10 12:34:57 -04:00
parent 9e41bf8079
commit 8868642b38
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
5 changed files with 227 additions and 190 deletions

View File

@ -10,8 +10,11 @@
- Modèle 3D des véhicules (<https://github.com/jscastro76/threebox>) - Modèle 3D des véhicules (<https://github.com/jscastro76/threebox>)
* Simulation * Simulation
- Simulation côté serveur - Simulation côté serveur
- Montrer litinéraire emprunté habituellement par une ligne vs. litinéraire emprunté dans les 24 dernières heures
- Retour dans le passé (historique de la simulation côté serveur) - Retour dans le passé (historique de la simulation côté serveur)
- Améliorer réalisme de la simulation
- Accélération/décéleration
- Signaux de rail (un seul véhicule par segment, priorités)
- Montrer litinéraire emprunté habituellement par une ligne vs. litinéraire emprunté dans les 24 dernières heures
- Statistiques ? (retards, vitesse moyenne, ...) - Statistiques ? (retards, vitesse moyenne, ...)
* Données * Données
- Intégrer vélopartage (Vélomagg, Bixi) - Intégrer vélopartage (Vélomagg, Bixi)

View File

@ -1,141 +1,50 @@
import network from "../data/network.json";
import * as simulation from "../data/simulation.js"; import * as simulation from "../data/simulation.js";
import Map from "./map/index.js"; import Map from "./map/index.js";
import { updatePanel } from "./panel.js";
// Run courses simulation const mapKey = "6T8Cb9oYBFeDjDhpmNmd";
const simstate = simulation.start(); const bounds = [
"3.660507202148437", "43.49552248630757",
"4.092750549316406", "43.73736766145917",
];
const map = new Map("map", bounds, mapKey);
window.__map = map;
// Create display panel
const panel = document.querySelector("#panel"); const panel = document.querySelector("#panel");
const timeFormat = new Intl.DateTimeFormat("fr-FR", { map.addEventListener("ready", () => {
timeZone: "Europe/Paris", const simstate = simulation.start();
timeStyle: "medium", window.__simstate = simstate.courses;
});
const timeToHTML = time => { let showCourse = null;
const delta = Math.ceil((time - Date.now()) / 1000);
if (delta <= 0) { const boundUpdatePanel = () => {
return `Imminent`; updatePanel(panel, simstate.courses, showCourse);
} else if (delta < 60) { };
return `${delta} s`;
} else {
return `${Math.floor(delta / 60)} min ${delta % 60} s`;
}
};
const updatePanel = () => { const animateCourses = () => {
const vehicleCount = Object.values(simstate.courses).length; simstate.update();
const movingVehicles = Object.values(simstate.courses).filter( map.update(simstate.courses);
course => course.properties.speed > 0 requestAnimationFrame(animateCourses);
).length; };
let html = ` map.addEventListener("click-courses", event => {
<dl> const courses = event.detail;
<dt>Heure locale</dt> const index = courses.indexOf(showCourse);
<dd>${timeFormat.format(Date.now())}</dd>
</dl>
<dl>
<dt>Véhicules sur la carte</dt>
<dd>
${movingVehicles} en mouvement,
${vehicleCount - movingVehicles} à larrêt
</dd>
</dl>
`;
if (map.selectedCourse !== null && map.selectedCourse in simstate.courses) {
const course = simstate.courses[map.selectedCourse].properties;
const stopToHTML = stopId => stopId in network.stops ?
network.stops[stopId].properties.name :
'<em>Arrêt inconnu</em>';
const passingsToHTML = passings => passings.map(([stopId, time]) => `
<tr>
<td>${stopToHTML(stopId)}</td>
<td>${timeFormat.format(time)}</td>
</tr>
`).join("\n");
const state = (
course.traveledDistance === 0 && course.speed === 0
? "stopped" : "moving"
);
let prevPassings = course.prevPassings;
if (state === "moving") {
prevPassings = prevPassings.concat([[course.departureStop, course.departureTime]]);
}
html += `
<h2>Véhicule</h2>
<dl>
<dt>ID</dt>
<dd>${map.selectedCourse}</dd>
<dt>Ligne</dt>
<dd>${course.line}</dd>
<dt>Destination</dt>
<dd>${stopToHTML(course.finalStop)}</dd>
<dt>État</dt>
<dd>${state === "moving"
? `Entre ${stopToHTML(course.departureStop)}
et ${stopToHTML(course.arrivalStop)}`
: `À larrêt ${stopToHTML(course.departureStop)}`}</dd>
${state === "moving" ? `
<dt>Arrivée dans</dt>
<dd>${timeToHTML(course.arrivalTime - 10000)}</dd>
<dt>Distance parcourue</dt>
<dd>${Math.ceil(course.traveledDistance)} m</dd>
<dt>Vitesse</dt>
<dd>${Math.ceil(course.speed * 3600)} km/h</dd>
` : `
<dt>Départ dans</dt>
<dd>${timeToHTML(course.departureTime)}</dd>
`}
</dl>
<h2>Arrêts précédents</h2>
<table>${passingsToHTML(prevPassings)}</table>
<h2>Arrêts suivants</h2>
<table>${passingsToHTML(course.nextPassings)}</table>
`;
}
panel.innerHTML = html;
};
setInterval(updatePanel, 1000);
const map = new Map("map", simstate, {
onVehicleClick(courses) {
courses = [...courses];
courses.sort();
const index = courses.indexOf(map.selectedCourse);
if (courses.length === 0) { if (courses.length === 0) {
map.select(null); showCourse = null;
} else if (index === -1) { } else if (index === -1) {
map.select(courses[0]); showCourse = courses[0];
} else { } else {
map.select(courses[(index + 1) % courses.length]); showCourse = courses[(index + 1) % courses.length];
} }
updatePanel(); map.follow(showCourse);
} boundUpdatePanel();
});
setInterval(boundUpdatePanel, 1000);
animateCourses();
}); });
// Reference as globals to facilitate debugging
window.__map = map;
window.__simstate = simstate.courses;
window.__network = network;

View File

@ -5,92 +5,99 @@ import * as network from "./network";
import * as vehicles from "./vehicles"; import * as vehicles from "./vehicles";
import style from "./assets/style.json"; import style from "./assets/style.json";
const mapId = "c1309cde-1b6e-4c9b-8b65-48512757d354"; export default class Map extends EventTarget {
const mapKey = "6T8Cb9oYBFeDjDhpmNmd";
style.sources.openmaptiles.url = style.sources.openmaptiles.url.replace("{key}", mapKey);
style.glyphs = style.glyphs.replace("{key}", mapKey);
const bounds = [
"3.660507202148437", "43.49552248630757",
"4.092750549316406", "43.73736766145917",
];
export default class Map {
/** /**
* Instantiate a map. * Instantiate a map.
* @param {string|HTMLElement} target The container to add the map to. * @param {string|HTMLElement} target HTML container to add the map to.
* @param {Object} simstate Course simulation state. * @param {Array<string>} bounds Initial map bounds.
* @param {Object.<callable>} handlers Handlers for the map events. * @param {string} apiKey MapTiler API key.
*/ */
constructor(target, simstate, handlers) { constructor(target, bounds, apiKey) {
this.renderer = new maplibre.Map({ super();
container: target,
style,
bounds,
// Replace map key placeholder in style definition
const thisStyle = JSON.parse(JSON.stringify(style));
thisStyle.sources.openmaptiles.url = (
style.sources.openmaptiles.url.replace("{key}", apiKey)
);
thisStyle.glyphs = style.glyphs.replace("{key}", apiKey);
// Initialize MapLibre renderer
this._renderer = new maplibre.Map({
container: target,
bounds,
style: thisStyle,
maplibreLogo: true, maplibreLogo: true,
maxPitch: 70, maxPitch: 70,
}); });
this.renderer.addControl(new maplibre.NavigationControl()); this._renderer.on("load", () => {
network.addLayers(this._renderer);
this.renderer.on("load", () => { vehicles.addLayers(this._renderer, courses => {
network.addLayers(this.renderer); this.dispatchEvent(new CustomEvent(
vehicles.addLayers(this.renderer, handlers); "click-courses",
{detail: courses}
// Move 3D buildings to the front of custom layers ));
this.renderer.moveLayer("building-3d");
this.start();
}); });
// ID of the currently selected course // Move 3D buildings to the front of custom layers
this.selectedCourse = null; this._renderer.moveLayer("building-3d");
this.animation = null; this.dispatchEvent(new CustomEvent("ready"));
this.simstate = simstate; });
this.handlers = handlers;
this._renderer.addControl(new maplibre.NavigationControl());
// Last known courses state
this._courses = null;
// ID of a course to follow
this._follow = null;
} }
/** Start animating vehicles on the map. */ /** Stop following a course. */
start() { unfollow() {
this._animate(); this._follow = null;
}
/** Stop the vehicle animation. */
stop() {
cancelAnimationFrame(this.animation);
this.animation = null;
} }
/** /**
* Select or unselect a vehicle. * Start following a course with the camera.
* @param {string?} id The ID of the vehicle to select, or null to unselect. * @param {string} courseId The ID of the course to follow.
*/ */
select(courseId) { follow(courseId) {
this.selectedCourse = courseId; if (courseId in this._courses) {
this._follow = courseId;
const course = this.simstate.courses[courseId]; const course = this._courses[courseId];
this.renderer.flyTo({ this._renderer.flyTo({
center: course.geometry.coordinates, center: course.geometry.coordinates,
bearing: course.properties.bearing, bearing: course.properties.bearing,
pitch: 60, pitch: 60,
zoom: 20, zoom: 20,
}); });
} else {
this._follow = null;
}
} }
_animate() { /** Update the map with new courses state. */
this.simstate.update(); update(courses) {
vehicles.update(this.renderer, this.simstate.courses); this._courses = courses;
vehicles.update(this._renderer, courses);
if (this.selectedCourse !== null && !this.renderer.isMoving()) { if (this._follow !== null) {
const course = this.simstate.courses[this.selectedCourse]; if (this._follow in courses) {
this.renderer.jumpTo({ const course = courses[this._follow];
if (course.properties.speed > 0) {
this._renderer.jumpTo({
center: course.geometry.coordinates, center: course.geometry.coordinates,
bearing: course.properties.bearing, bearing: course.properties.bearing,
}); });
} }
} else {
this.animation = requestAnimationFrame(this._animate.bind(this)); this._follow = null;
}
}
} }
} }

View File

@ -40,9 +40,9 @@ const makeVehicleIcon = size => {
/** /**
* Add layers that display the live vehicle positions on the map. * Add layers that display the live vehicle positions on the map.
* @param {Map} map The map to add the layers to. * @param {Map} map The map to add the layers to.
* @param {Object.<callable>} handlers Handlers for the map events. * @param {Function} onClick Function to call when a vehicle is clicked.
*/ */
export const addLayers = (map, handlers) => { export const addLayers = (map, onClick) => {
map.addImage("vehicle", makeVehicleIcon(128), {sdf: true}); map.addImage("vehicle", makeVehicleIcon(128), {sdf: true});
map.addSource("vehicles", { map.addSource("vehicles", {
@ -63,6 +63,8 @@ export const addLayers = (map, handlers) => {
"icon-image": "vehicle", "icon-image": "vehicle",
"icon-size": scaleZoom(factor), "icon-size": scaleZoom(factor),
"icon-allow-overlap": true, "icon-allow-overlap": true,
"icon-ignore-placement": true,
"icon-overlap": "always",
"icon-rotation-alignment": "map", "icon-rotation-alignment": "map",
"icon-rotate": ["get", "bearing"], "icon-rotate": ["get", "bearing"],
}, },
@ -89,7 +91,7 @@ export const addLayers = (map, handlers) => {
return time1 - time2; return time1 - time2;
}); });
handlers.onVehicleClick(event.features.map( onClick(event.features.map(
feature => feature.properties.id feature => feature.properties.id
)); ));
}); });

116
src/front/panel.js Normal file
View File

@ -0,0 +1,116 @@
import network from "../data/network.json";
const timeFormat = new Intl.DateTimeFormat("fr-FR", {
timeZone: "Europe/Paris",
timeStyle: "medium",
});
const timeToHTML = time => {
const delta = Math.ceil((time - Date.now()) / 1000);
if (delta <= 0) {
return `Imminent`;
} else if (delta < 60) {
return `${delta} s`;
} else {
return `${Math.floor(delta / 60)} min ${delta % 60} s`;
}
};
/**
* Update the contents of the side panel with course information.
* @param {HTMLElement} target The panel element.
* @param {Object} courses Active courses.
* @param {string?} showCourse The ID of a course to show.
*/
export const updatePanel = (target, courses, showCourse) => {
const vehicleCount = Object.values(courses).length;
const movingVehicles = Object.values(courses).filter(
course => course.properties.speed > 0
).length;
let html = `
<dl>
<dt>Heure locale</dt>
<dd>${timeFormat.format(Date.now())}</dd>
</dl>
<dl>
<dt>Véhicules sur la carte</dt>
<dd>
${movingVehicles} en mouvement,
${vehicleCount - movingVehicles} à larrêt
</dd>
</dl>
`;
if (showCourse !== null && showCourse in courses) {
const course = courses[showCourse].properties;
const stopToHTML = stopId => stopId in network.stops ?
network.stops[stopId].properties.name :
'<em>Arrêt inconnu</em>';
const passingsToHTML = passings => passings.map(([stopId, time]) => `
<tr>
<td>${stopToHTML(stopId)}</td>
<td>${timeFormat.format(time)}</td>
</tr>
`).join("\n");
const state = (
course.traveledDistance === 0 && course.speed === 0
? "stopped" : "moving"
);
let prevPassings = course.prevPassings;
if (state === "moving") {
prevPassings = prevPassings.concat([[
course.departureStop,
course.departureTime
]]);
}
html += `
<h2>Véhicule</h2>
<dl>
<dt>ID</dt>
<dd>${showCourse}</dd>
<dt>Ligne</dt>
<dd>${course.line}</dd>
<dt>Destination</dt>
<dd>${stopToHTML(course.finalStop)}</dd>
<dt>État</dt>
<dd>${state === "moving"
? `Entre ${stopToHTML(course.departureStop)}
et ${stopToHTML(course.arrivalStop)}`
: `À larrêt ${stopToHTML(course.departureStop)}`}</dd>
${state === "moving" ? `
<dt>Arrivée dans</dt>
<dd>${timeToHTML(course.arrivalTime - 10000)}</dd>
<dt>Distance parcourue</dt>
<dd>${Math.ceil(course.traveledDistance)} m</dd>
<dt>Vitesse</dt>
<dd>${Math.ceil(course.speed * 3600)} km/h</dd>
` : `
<dt>Départ dans</dt>
<dd>${timeToHTML(course.departureTime)}</dd>
`}
</dl>
<h2>Arrêts précédents</h2>
<table>${passingsToHTML(prevPassings)}</table>
<h2>Arrêts suivants</h2>
<table>${passingsToHTML(course.nextPassings)}</table>
`;
}
target.innerHTML = html;
};