98 lines
2.2 KiB
JavaScript
98 lines
2.2 KiB
JavaScript
import { transformExtent } from "ol/proj";
|
|
import TileLayer from "ol/layer/Tile";
|
|
import OSM from "ol/source/OSM";
|
|
import TileWMS from "ol/source/TileWMS";
|
|
import Map from "ol/Map";
|
|
import View from "ol/View";
|
|
import { getCenter } from "ol/extent";
|
|
|
|
const extent = transformExtent(
|
|
[1.46330151, 45.68460578, 18.73161645, 55.86208711],
|
|
"EPSG:4326",
|
|
"EPSG:3857",
|
|
);
|
|
|
|
const osm = new TileLayer({
|
|
source: new OSM({}),
|
|
});
|
|
|
|
const dwd = new TileLayer({
|
|
extent,
|
|
opacity: 0.5,
|
|
source: new TileWMS({
|
|
attributions: [
|
|
'<a href="https://www.dwd.de/copyright">Deutscher Wetterdienst</a>',
|
|
],
|
|
url: "https://maps.dwd.de/geoserver/ows?version=1.3.0",
|
|
params: {
|
|
LAYERS: "dwd:Niederschlagsradar",
|
|
},
|
|
}),
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [osm, dwd],
|
|
target: "map",
|
|
view: new View({
|
|
center: getCenter(extent),
|
|
zoom: 6,
|
|
}),
|
|
});
|
|
|
|
const reset = () => {
|
|
const now = new Date();
|
|
return new Date(
|
|
now.getFullYear(),
|
|
now.getMonth(),
|
|
now.getDate(),
|
|
now.getHours(),
|
|
Math.floor(now.getMinutes() / 5) * 5,
|
|
);
|
|
};
|
|
|
|
let time = reset();
|
|
|
|
const update = () => {
|
|
dwd.getSource().updateParams({ time: time.toISOString() });
|
|
document.getElementById("time").innerText = time.toString();
|
|
};
|
|
|
|
update();
|
|
|
|
const animate = () =>
|
|
setInterval(() => {
|
|
time.setMinutes(time.getMinutes() + 5);
|
|
|
|
const now = new Date();
|
|
if (time.getTime() > new Date(now).setHours(now.getHours() + 2)) {
|
|
time.setHours(time.getHours() - 2, time.getMinutes() - 5);
|
|
}
|
|
|
|
update();
|
|
}, 1000);
|
|
|
|
let interval = null;
|
|
|
|
const toggleAnimation = () => {
|
|
if (interval !== null) {
|
|
clearInterval(interval);
|
|
interval = null;
|
|
} else {
|
|
interval = animate();
|
|
}
|
|
};
|
|
|
|
const timeInput = document.getElementById("timeInput");
|
|
timeInput.max = new Date(time).setHours(time.getHours() + 2);
|
|
timeInput.min = time.getTime();
|
|
|
|
timeInput.addEventListener("input", (event) => {
|
|
if (interval !== null) {
|
|
clearInterval(interval);
|
|
}
|
|
|
|
time = new Date(parseInt(event.target.value));
|
|
|
|
update();
|
|
});
|