569 lines
14 KiB
JavaScript
569 lines
14 KiB
JavaScript
const COLORS = {
|
|
"Bil 1": "#ff0000",
|
|
"Bil 2": "#00c853",
|
|
"Bil 3": "#2979ff",
|
|
"Bil 4": "#2979ff",
|
|
"Bil 5": "#2979ff",
|
|
"Bil 8": "#00c853",
|
|
"Bil 9": "#00c853",
|
|
"Bil 10": "#00c853"
|
|
};
|
|
|
|
const map = L.map("map").setView([55.6761, 12.5683], 13);
|
|
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
attribution: "© OpenStreetMap contributors",
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
const statusEl = document.getElementById("status");
|
|
const alertsEl = document.getElementById("presenceAlerts");
|
|
const offmapIndicatorsEl = document.getElementById("offmapIndicators");
|
|
const playBtn = document.getElementById("playBtn");
|
|
const pauseBtn = document.getElementById("pauseBtn");
|
|
const resetBtn = document.getElementById("resetBtn");
|
|
|
|
let forcedPopupVehicle = null;
|
|
|
|
function openVehiclePopup(name) {
|
|
const v = vehicles[name];
|
|
if (!v) return;
|
|
|
|
forcedPopupVehicle = name;
|
|
|
|
if (!map.hasLayer(v.marker)) {
|
|
v.marker.addTo(map);
|
|
}
|
|
|
|
v.marker.setOpacity(1);
|
|
v.marker.setZIndexOffset(1000);
|
|
v.marker.setLatLng([v.displayLat, v.displayLon]);
|
|
setHeading(v.marker, v.displayHeading);
|
|
v.marker.setPopupContent(popupHtml(v.name, v));
|
|
v.marker.openPopup();
|
|
}
|
|
|
|
function carIcon(color) {
|
|
return L.divIcon({
|
|
className: "",
|
|
iconSize: [24, 24],
|
|
iconAnchor: [12, 12],
|
|
html: `
|
|
<div class="car" data-role="car">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M12 2 L20 22 L12 18 L4 22 Z"
|
|
fill="${color}"
|
|
stroke="#ffffff"
|
|
stroke-width="1.5"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
`
|
|
});
|
|
}
|
|
|
|
function setHeading(marker, deg) {
|
|
const el = marker.getElement();
|
|
if (!el) return;
|
|
const car = el.querySelector("[data-role=car]");
|
|
if (!car) return;
|
|
car.style.transform = `rotate(${deg}deg)`;
|
|
}
|
|
|
|
function fmtTs(ts) {
|
|
return `${ts}s`;
|
|
}
|
|
|
|
function getDirectionInfo(lat, lon, bounds) {
|
|
const centerLat = (bounds.getSouth() + bounds.getNorth()) / 2;
|
|
const centerLon = (bounds.getWest() + bounds.getEast()) / 2;
|
|
const dLat = lat - centerLat;
|
|
const dLon = lon - centerLon;
|
|
|
|
const vertical = Math.abs(dLat) > 0.01 ? (dLat > 0 ? "N" : "S") : "";
|
|
const horizontal = Math.abs(dLon) > 0.01 ? (dLon > 0 ? "Ø" : "V") : "";
|
|
const label = `${vertical}${horizontal}` || "Nær kanten";
|
|
|
|
const arrowMap = {
|
|
"N": "↑",
|
|
"S": "↓",
|
|
"Ø": "→",
|
|
"V": "←",
|
|
"NØ": "↗",
|
|
"NV": "↖",
|
|
"SØ": "↘",
|
|
"SV": "↙",
|
|
"Nær kanten": "•"
|
|
};
|
|
|
|
return {
|
|
label,
|
|
arrow: arrowMap[label] || "•"
|
|
};
|
|
}
|
|
|
|
function popupHtml(name, state) {
|
|
return `
|
|
<div style="font:13px/1.4 system-ui,sans-serif;min-width:190px;">
|
|
<div style="font-weight:600;margin-bottom:6px;">${name}</div>
|
|
<div><strong>Tid:</strong> ${fmtTs(state.current.ts)}</div>
|
|
<div><strong>Lat:</strong> ${state.displayLat.toFixed(5)}</div>
|
|
<div><strong>Lon:</strong> ${state.displayLon.toFixed(5)}</div>
|
|
<div><strong>Hastighed:</strong> ${state.current.speedMps} m/s</div>
|
|
<div><strong>Retning:</strong> ${state.displayHeading.toFixed(0)}°</div>
|
|
<div><strong>Usikkerhed:</strong> ${state.current.uncertaintyM} m</div>
|
|
<div><strong>På kortet:</strong> ${state.presenceStateLabel || "ja"}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function smoothstep(t) {
|
|
t = Math.max(0, Math.min(1, t));
|
|
return t * t * (3 - 2 * t);
|
|
}
|
|
|
|
function lerp(a, b, t) {
|
|
return a + (b - a) * t;
|
|
}
|
|
|
|
function lerpAngleDeg(a, b, t) {
|
|
let d = ((b - a + 540) % 360) - 180;
|
|
return (a + d * t + 360) % 360;
|
|
}
|
|
|
|
function buildVehicleBuckets(events) {
|
|
const out = {};
|
|
for (const e of events) {
|
|
if (!out[e.vehicle]) out[e.vehicle] = [];
|
|
out[e.vehicle].push({ ...e });
|
|
}
|
|
for (const k of Object.keys(out)) {
|
|
out[k].sort((a, b) => a.ts - b.ts);
|
|
}
|
|
return out;
|
|
}
|
|
|
|
function metersBetween(lat1, lon1, lat2, lon2) {
|
|
const meanLatRad = ((lat1 + lat2) / 2) * Math.PI / 180;
|
|
const metersPerDegLat = 111320;
|
|
const metersPerDegLon = 111320 * Math.cos(meanLatRad);
|
|
|
|
const dLatM = (lat2 - lat1) * metersPerDegLat;
|
|
const dLonM = (lon2 - lon1) * metersPerDegLon;
|
|
|
|
return Math.hypot(dLatM, dLonM);
|
|
}
|
|
|
|
function clamp(value, min, max) {
|
|
return Math.max(min, Math.min(max, value));
|
|
}
|
|
|
|
function distanceToBoundsMeters(lat, lon, bounds) {
|
|
const south = bounds.getSouth();
|
|
const north = bounds.getNorth();
|
|
const west = bounds.getWest();
|
|
const east = bounds.getEast();
|
|
|
|
const clampedLat = clamp(lat, south, north);
|
|
const clampedLon = clamp(lon, west, east);
|
|
|
|
return metersBetween(lat, lon, clampedLat, clampedLon);
|
|
}
|
|
|
|
function maxDistanceToBoundsCornerMeters(lat, lon, bounds) {
|
|
const corners = [
|
|
[bounds.getSouth(), bounds.getWest()],
|
|
[bounds.getSouth(), bounds.getEast()],
|
|
[bounds.getNorth(), bounds.getWest()],
|
|
[bounds.getNorth(), bounds.getEast()]
|
|
];
|
|
|
|
return Math.max(...corners.map(([cornerLat, cornerLon]) =>
|
|
metersBetween(lat, lon, cornerLat, cornerLon)
|
|
));
|
|
}
|
|
|
|
function getPresenceState(lat, lon, uncertaintyM) {
|
|
const bounds = map.getBounds();
|
|
const centerInside = bounds.contains([lat, lon]);
|
|
|
|
if (centerInside) {
|
|
return {
|
|
code: "inside",
|
|
label: "ja"
|
|
};
|
|
}
|
|
|
|
if (uncertaintyM > 0) {
|
|
const distToBounds = distanceToBoundsMeters(lat, lon, bounds);
|
|
if (distToBounds <= uncertaintyM) {
|
|
const maxCornerDistance = maxDistanceToBoundsCornerMeters(lat, lon, bounds);
|
|
if (uncertaintyM >= maxCornerDistance) {
|
|
return {
|
|
code: "covers",
|
|
label: "dækker hele kortet"
|
|
};
|
|
}
|
|
|
|
return {
|
|
code: "possible",
|
|
label: "muligvis"
|
|
};
|
|
}
|
|
}
|
|
|
|
return {
|
|
code: "outside",
|
|
label: "nej"
|
|
};
|
|
}
|
|
|
|
function ensureUncertaintyCircle(v) {
|
|
if (v.uncertaintyCircle || v.current.uncertaintyM <= 0) {
|
|
return;
|
|
}
|
|
|
|
v.uncertaintyCircle = L.circle([v.displayLat, v.displayLon], {
|
|
radius: v.current.uncertaintyM,
|
|
color: v.color,
|
|
weight: 2,
|
|
dashArray: "6,6",
|
|
opacity: 0.7,
|
|
fillColor: v.color,
|
|
fillOpacity: 0.08,
|
|
interactive: false
|
|
}).addTo(map);
|
|
}
|
|
|
|
function syncUncertaintyCircle(v) {
|
|
if (v.current.uncertaintyM > 0) {
|
|
ensureUncertaintyCircle(v);
|
|
}
|
|
|
|
if (!v.uncertaintyCircle) {
|
|
return;
|
|
}
|
|
|
|
if (v.current.uncertaintyM <= 0) {
|
|
if (map.hasLayer(v.uncertaintyCircle)) {
|
|
map.removeLayer(v.uncertaintyCircle);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (!map.hasLayer(v.uncertaintyCircle)) {
|
|
v.uncertaintyCircle.addTo(map);
|
|
}
|
|
|
|
v.uncertaintyCircle.setLatLng([v.displayLat, v.displayLon]);
|
|
v.uncertaintyCircle.setRadius(v.current.uncertaintyM);
|
|
|
|
if (v.presenceState === "inside") {
|
|
v.uncertaintyCircle.setStyle({ opacity: 0.7, fillOpacity: 0.08 });
|
|
} else if (v.presenceState === "covers") {
|
|
v.uncertaintyCircle.setStyle({ opacity: 0.28, fillOpacity: 0.05 });
|
|
} else if (v.presenceState === "possible") {
|
|
v.uncertaintyCircle.setStyle({ opacity: 0.35, fillOpacity: 0.03 });
|
|
} else {
|
|
v.uncertaintyCircle.setStyle({ opacity: 0.15, fillOpacity: 0.01 });
|
|
}
|
|
}
|
|
|
|
const vehicleEvents = buildVehicleBuckets(VEHICLE_EVENTS);
|
|
const vehicleNames = Object.keys(vehicleEvents);
|
|
|
|
const vehicles = {};
|
|
|
|
for (const name of vehicleNames) {
|
|
const first = vehicleEvents[name][0];
|
|
const color = COLORS[name] || "#2979ff";
|
|
|
|
const marker = L.marker([first.lat, first.lon], {
|
|
icon: carIcon(color)
|
|
}).addTo(map);
|
|
|
|
const trail = L.polyline([[first.lat, first.lon]], {
|
|
color,
|
|
weight: 3,
|
|
opacity: 0.85
|
|
}).addTo(map);
|
|
|
|
let uncertaintyCircle = null;
|
|
if (first.uncertaintyM > 0) {
|
|
uncertaintyCircle = L.circle([first.lat, first.lon], {
|
|
radius: first.uncertaintyM,
|
|
color: color,
|
|
weight: 2,
|
|
dashArray: "6,6",
|
|
opacity: 0.7,
|
|
fillColor: color,
|
|
fillOpacity: 0.08,
|
|
interactive: false
|
|
}).addTo(map);
|
|
}
|
|
|
|
vehicles[name] = {
|
|
name,
|
|
color,
|
|
events: vehicleEvents[name],
|
|
marker,
|
|
trail,
|
|
uncertaintyCircle,
|
|
currentIndex: 0,
|
|
current: first,
|
|
next: vehicleEvents[name][1] || null,
|
|
displayLat: first.lat,
|
|
displayLon: first.lon,
|
|
displayHeading: first.headingDeg,
|
|
lastTrailLat: first.lat,
|
|
lastTrailLon: first.lon,
|
|
presenceState: "inside",
|
|
presenceStateLabel: "ja"
|
|
};
|
|
|
|
marker.bindPopup(popupHtml(name, vehicles[name]));
|
|
setHeading(marker, first.headingDeg);
|
|
}
|
|
|
|
let simTime = 0;
|
|
let lastFrameTime = null;
|
|
let running = true;
|
|
const TIME_SCALE = 0.175;
|
|
|
|
function resetDemo() {
|
|
simTime = 0;
|
|
lastFrameTime = null;
|
|
|
|
for (const name of vehicleNames) {
|
|
const v = vehicles[name];
|
|
const first = v.events[0];
|
|
|
|
v.currentIndex = 0;
|
|
v.current = first;
|
|
v.next = v.events[1] || null;
|
|
v.displayLat = first.lat;
|
|
v.displayLon = first.lon;
|
|
v.displayHeading = first.headingDeg;
|
|
v.lastTrailLat = first.lat;
|
|
v.lastTrailLon = first.lon;
|
|
v.presenceState = "inside";
|
|
v.presenceStateLabel = "ja";
|
|
|
|
v.marker.setLatLng([first.lat, first.lon]);
|
|
setHeading(v.marker, first.headingDeg);
|
|
v.marker.setPopupContent(popupHtml(name, v));
|
|
|
|
v.trail.setLatLngs([[first.lat, first.lon]]);
|
|
v.trail.setStyle({ opacity: 0.85 });
|
|
|
|
syncUncertaintyCircle(v);
|
|
|
|
if (!map.hasLayer(v.marker)) {
|
|
v.marker.addTo(map);
|
|
}
|
|
}
|
|
|
|
updateStatus();
|
|
}
|
|
|
|
function advanceVehiclePointers(v) {
|
|
while (v.next && simTime >= v.next.ts) {
|
|
v.currentIndex += 1;
|
|
v.current = v.events[v.currentIndex];
|
|
v.next = v.events[v.currentIndex + 1] || null;
|
|
|
|
v.trail.addLatLng([v.current.lat, v.current.lon]);
|
|
v.lastTrailLat = v.current.lat;
|
|
v.lastTrailLon = v.current.lon;
|
|
}
|
|
}
|
|
|
|
function updateVehicleDisplay(v) {
|
|
advanceVehiclePointers(v);
|
|
|
|
let lat = v.current.lat;
|
|
let lon = v.current.lon;
|
|
let heading = v.current.headingDeg;
|
|
|
|
if (v.next) {
|
|
const dt = v.next.ts - v.current.ts;
|
|
const raw = dt > 0 ? (simTime - v.current.ts) / dt : 1;
|
|
const t = smoothstep(raw);
|
|
|
|
lat = lerp(v.current.lat, v.next.lat, t);
|
|
lon = lerp(v.current.lon, v.next.lon, t);
|
|
heading = lerpAngleDeg(v.current.headingDeg, v.next.headingDeg, t);
|
|
} else {
|
|
const age = simTime - v.current.ts;
|
|
const predictFor = Math.min(age, 8);
|
|
const meters = v.current.speedMps * predictFor;
|
|
|
|
const rad = v.current.headingDeg * Math.PI / 180;
|
|
const northM = Math.cos(rad) * meters;
|
|
const eastM = Math.sin(rad) * meters;
|
|
|
|
const metersPerDegLat = 111320;
|
|
const metersPerDegLon = 111320 * Math.cos(v.current.lat * Math.PI / 180);
|
|
|
|
lat = v.current.lat + northM / metersPerDegLat;
|
|
lon = v.current.lon + eastM / metersPerDegLon;
|
|
heading = v.current.headingDeg;
|
|
}
|
|
|
|
v.displayLat = lat;
|
|
v.displayLon = lon;
|
|
v.displayHeading = heading;
|
|
|
|
const presence = getPresenceState(lat, lon, v.current.uncertaintyM);
|
|
v.presenceState = presence.code;
|
|
v.presenceStateLabel = presence.label;
|
|
|
|
const shouldForcePopup = forcedPopupVehicle === v.name;
|
|
|
|
if (presence.code === "inside" || shouldForcePopup) {
|
|
if (!map.hasLayer(v.marker)) {
|
|
v.marker.addTo(map);
|
|
}
|
|
v.marker.setOpacity(1);
|
|
v.marker.setZIndexOffset(shouldForcePopup ? 1000 : 0);
|
|
v.marker.setLatLng([lat, lon]);
|
|
setHeading(v.marker, heading);
|
|
v.trail.setStyle({ opacity: 0.85 });
|
|
} else {
|
|
v.marker.closePopup();
|
|
v.marker.setZIndexOffset(0);
|
|
if (map.hasLayer(v.marker)) {
|
|
map.removeLayer(v.marker);
|
|
}
|
|
v.trail.setStyle({ opacity: presence.code === "covers" ? 0.4 : 0.25 });
|
|
}
|
|
|
|
v.marker.setPopupContent(popupHtml(v.name, v));
|
|
|
|
syncUncertaintyCircle(v);
|
|
}
|
|
|
|
function updateAlerts() {
|
|
const alertVehicles = vehicleNames
|
|
.map(name => vehicles[name])
|
|
.filter(v => v.presenceState === "possible" || v.presenceState === "covers");
|
|
|
|
if (alertVehicles.length === 0) {
|
|
alertsEl.innerHTML = "";
|
|
offmapIndicatorsEl.innerHTML = "";
|
|
return;
|
|
}
|
|
|
|
alertsEl.innerHTML = alertVehicles.map(v => {
|
|
if (v.presenceState === "covers") {
|
|
return `
|
|
<div class="alert-item">
|
|
<strong>${v.name}: usikkerhed dækker hele kortet</strong>
|
|
Estimatet er udenfor kortet, men usikkerheden spænder over hele viewporten.
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return `
|
|
<div class="alert-item">
|
|
<strong>${v.name}: mulig tilstedeværelse</strong>
|
|
Estimatet er udenfor kortet, men usikkerheden overlapper det viste område delvist.
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
|
|
const bounds = map.getBounds();
|
|
offmapIndicatorsEl.innerHTML = alertVehicles.map(v => {
|
|
const direction = getDirectionInfo(v.displayLat, v.displayLon, bounds);
|
|
const subtitle = v.presenceState === "covers"
|
|
? "Usikkerheden dækker hele viewporten"
|
|
: `Mulig tilstedeværelse fra ${direction.label}`;
|
|
|
|
return `
|
|
<button type="button" class="offmap-indicator ${v.presenceState === "covers" ? "covers" : ""}" data-vehicle="${v.name}">
|
|
<div class="offmap-arrow" style="background:${v.color};">${direction.arrow}</div>
|
|
<div class="offmap-meta">
|
|
<strong>${v.name}</strong>
|
|
<span>${subtitle}</span>
|
|
</div>
|
|
</button>
|
|
`;
|
|
}).join("");
|
|
}
|
|
|
|
function updateStatus() {
|
|
const total = VEHICLE_EVENTS.length;
|
|
const passed = VEHICLE_EVENTS.filter(e => e.ts <= simTime).length;
|
|
|
|
statusEl.textContent =
|
|
`Simuleret tid: ${simTime.toFixed(1)} s\n` +
|
|
`Events passeret: ${passed} / ${total}\n` +
|
|
`Afspilning: 2x`;
|
|
|
|
updateAlerts();
|
|
}
|
|
|
|
function tick(now) {
|
|
if (!running) return;
|
|
|
|
if (lastFrameTime === null) {
|
|
lastFrameTime = now;
|
|
}
|
|
|
|
const dtReal = (now - lastFrameTime) / 1000;
|
|
lastFrameTime = now;
|
|
simTime += dtReal / TIME_SCALE;
|
|
|
|
for (const name of vehicleNames) {
|
|
updateVehicleDisplay(vehicles[name]);
|
|
}
|
|
|
|
updateStatus();
|
|
requestAnimationFrame(tick);
|
|
}
|
|
|
|
playBtn.addEventListener("click", () => {
|
|
if (running) return;
|
|
running = true;
|
|
lastFrameTime = null;
|
|
requestAnimationFrame(tick);
|
|
});
|
|
|
|
pauseBtn.addEventListener("click", () => {
|
|
running = false;
|
|
});
|
|
|
|
resetBtn.addEventListener("click", () => {
|
|
running = false;
|
|
resetDemo();
|
|
running = true;
|
|
requestAnimationFrame(tick);
|
|
});
|
|
|
|
offmapIndicatorsEl.addEventListener("click", (event) => {
|
|
const button = event.target.closest(".offmap-indicator");
|
|
if (!button) return;
|
|
|
|
const vehicleName = button.dataset.vehicle;
|
|
openVehiclePopup(vehicleName);
|
|
});
|
|
|
|
map.on("popupclose", (event) => {
|
|
const popupVehicle = Object.values(vehicles).find(v => v.marker === event.popup._source);
|
|
if (popupVehicle && forcedPopupVehicle === popupVehicle.name) {
|
|
forcedPopupVehicle = null;
|
|
updateVehicleDisplay(popupVehicle);
|
|
}
|
|
});
|
|
|
|
map.on("moveend zoomend", () => {
|
|
for (const name of vehicleNames) {
|
|
updateVehicleDisplay(vehicles[name]);
|
|
}
|
|
updateStatus();
|
|
});
|
|
|
|
resetDemo();
|
|
requestAnimationFrame(tick);
|