From 271ebae0fc79cf03bb657f2286f06364c2fe58d7 Mon Sep 17 00:00:00 2001 From: Dominic Schweizer Date: Sat, 13 May 2023 12:20:49 +0200 Subject: [PATCH] feat: combines features --- prototype-2/index.html | 7 ++++++ prototype-2/lib.js | 50 ++++++++++++++++++++++++++++++++++++++++++ prototype-2/main.js | 38 +++++++++++++++++++++++++++----- 3 files changed, 89 insertions(+), 6 deletions(-) diff --git a/prototype-2/index.html b/prototype-2/index.html index d3f499e..1c0313b 100644 --- a/prototype-2/index.html +++ b/prototype-2/index.html @@ -19,6 +19,13 @@ crossorigin="anonymous" referrerpolicy="no-referrer" > + + diff --git a/prototype-2/lib.js b/prototype-2/lib.js index 3729cd5..63f1860 100644 --- a/prototype-2/lib.js +++ b/prototype-2/lib.js @@ -1,3 +1,4 @@ +const iconSize = [10, 10]; /** * * @param {[number, number]} origin @@ -24,3 +25,52 @@ export function createWindPolygon(origin, windVector, time) { ]; return polygon; } + +export function loadData() { + // Stream big file in worker thread + let geodata = []; + Papa.parse("../prototype-1/data/geodaten.csv", { + //worker: true, + download: true, + header: true, + complete: (results) => { + results.data.forEach((bro) => { + // hier werden wir aus dem objekt ein koordinaten paar beziehen + const coordpair = [ + parseFloat(bro["WGS84-N"]), + parseFloat(bro["WGS84-E"]), + ]; + bro.position = coordpair; + // prüfen ob die koordinaten nummerisch sind + if (typeof coordpair[0] !== "number" || Number.isNaN(coordpair[0])) { + return; + } + geodata.push(bro); + }); + }, + }); + return geodata; +} + +export function getPeopleInPolygon(polygon, people) { + const poly = buildTurfPolygon(polygon); + return people.filter((p) => { + return turf.booleanPointInPolygon(turf.point(p.position), poly); + }); +} +function buildTurfPolygon(polygon) { + const pPoints = [...polygon]; + // close the polygon + pPoints.push(pPoints[0]); + return turf.polygon([[...pPoints]]); +} +export const oldPersonIcon = L.icon({ + iconUrl: "https://svgsilh.com/svg/1800224-ff5722.svg", + iconSize: iconSize, + iconAnchor: iconSize, +}); +export const youngPersonIcon = L.icon({ + iconUrl: "https://svgsilh.com/svg/44050-ae0aa3.svg", + iconSize: iconSize, + iconAnchor: iconSize, +}); diff --git a/prototype-2/main.js b/prototype-2/main.js index b975ef5..cc1a927 100644 --- a/prototype-2/main.js +++ b/prototype-2/main.js @@ -1,21 +1,28 @@ -import { createWindPolygon } from "./lib.js"; +import { + createWindPolygon, + loadData, + getPeopleInPolygon, + oldPersonIcon, + youngPersonIcon, +} from "./lib.js"; var map = L.map("map").setView([46.94863, 7.45164], 16); L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: '© OpenStreetMap', }).addTo(map); +const data = loadData(); let clickOrigin; let originMarker; let clickWind; let windMarker; let windVector; +let markerGroup; const MAXHOURS = 5; let hour = 0; let polygon; map.on("click", (e) => { - console.log(e); if (clickOrigin && clickWind) { clickOrigin = undefined; clickWind = undefined; @@ -33,6 +40,7 @@ map.on("click", (e) => { clickOrigin = e.latlng; originMarker = L.marker(clickOrigin).addTo(map); }); + function triggerCloudCalculation() { windVector = L.polyline([clickOrigin, clickWind], { color: "red" }).addTo( map @@ -41,16 +49,33 @@ function triggerCloudCalculation() { const intervall = setInterval(() => { const originKoords = [originMarker._latlng.lat, originMarker._latlng.lng]; const windKoords = [windMarker._latlng.lat, windMarker._latlng.lng]; - console.log("foo", originKoords, windKoords); - console.log(originMarker, windMarker); if (polygon) map.removeLayer(polygon); - polygon = L.polygon(createWindPolygon(originKoords, windKoords, hour), { + const windPolygon = createWindPolygon(originKoords, windKoords, hour); + polygon = L.polygon(windPolygon, { color: "yellow", }).addTo(map); + const people = getPeopleInPolygon(windPolygon, data); + console.log(people); + const markers = []; + people + .filter((p) => p.Alter >= 75) + .forEach((person) => { + markers.push( + L.marker(L.latLng(...person.position), { icon: oldPersonIcon }) + ); + }); + people + .filter((p) => p.Alter <= 10) + .forEach((person) => { + markers.push( + L.marker(L.latLng(...person.position), { icon: youngPersonIcon }) + ); + }); + markerGroup = L.featureGroup(markers).addTo(map); hour += 1; if (hour > MAXHOURS) clearInterval(intervall); }, 1000); -} +} /* const rathaus = [46.94866, 7.45144]; const wind = [46.94806, 7.45004]; @@ -67,3 +92,4 @@ const intervall = setInterval(() => { if (hour > MAXHOURS) clearInterval(intervall); }, 1000); //L.polygon(createWindPolygon(rathaus, wind, 3), { color: "yellow" }).addTo(map); +*/