Merge pull request #8 from bbl-dres/claude/analyze-grid-storey-intersection-HEbRv

Add merged storey polygon layer for per-floor 3D visualization

Author: davras5

index.html

@@ -171,6 +171,10 @@ <h2>Gebäude werden analysiert...</h2>
                         <input type="checkbox" class="active-layer-checkbox" id="layer-toggle-grid">
                         <span class="active-layer-title">Rasterzellen</span>
                       </label>
+                      <label class="active-layer-item">
+                        <input type="checkbox" class="active-layer-checkbox" id="layer-toggle-storeys">
+                        <span class="active-layer-title">Geschosspolygone</span>
+                      </label>
                       <label class="active-layer-item">
                         <input type="checkbox" class="active-layer-checkbox" checked id="layer-toggle-labels">
                         <span class="active-layer-title">Beschriftungen</span>

js/map.js

@@ -35,6 +35,13 @@ const GRID_PAINT = {
   "fill-extrusion-base": 0,
   "fill-extrusion-opacity": 0.85,
 };
+const STOREY_PAINT = {
+  "fill-extrusion-color": ["interpolate", ["linear"], ["get", "storey"],
+    1, "#4a90d9", 2, "#3498db", 3, "#2ecc71", 5, "#f39c12", 8, "#e74c3c"],
+  "fill-extrusion-height": ["get", "top"],
+  "fill-extrusion-base": ["get", "base"],
+  "fill-extrusion-opacity": 0.75,
+};
 
 // Cluster style constants
 const CLUSTER_COLORS = [
@@ -53,6 +60,8 @@ let buildingsGeoJSON = null;
 let clusterGeoJSON = null;
 let gridCellsGeoJSON = null;
 let rawGridCells = null;
+let storeyPolygonsGeoJSON = null;
+let rawStoreyData = null;
 let callbacks = {};
 let summaryToggleCb = null;
 
@@ -79,6 +88,31 @@ function ensureGridCellsConverted() {
   }
 }
 
+/** Convert raw LV95 storey polygons to WGS84 GeoJSON on first use */
+function ensureStoreyPolygonsConverted() {
+  if (storeyPolygonsGeoJSON || !rawStoreyData || rawStoreyData.length === 0) return;
+  const features = rawStoreyData.map((sp) => {
+    // Convert polygon rings from LV95 to WGS84
+    const geom = sp.polygonLV95;
+    const convertRing = (ring) => ring.map(([x, y]) => fromLV95(x, y));
+    let coordinates;
+    if (geom.type === "MultiPolygon") {
+      coordinates = geom.coordinates.map((poly) => poly.map(convertRing));
+    } else {
+      coordinates = geom.coordinates.map(convertRing);
+    }
+    return {
+      type: "Feature",
+      geometry: { type: geom.type, coordinates },
+      properties: { storey: sp.storey, base: sp.base, top: sp.top, buildingIndex: sp.buildingIndex },
+    };
+  });
+  storeyPolygonsGeoJSON = { type: "FeatureCollection", features };
+  if (map && map.getSource("storey-polygons")) {
+    map.getSource("storey-polygons").setData(storeyPolygonsGeoJSON);
+  }
+}
+
 export function onSummaryToggle(cb) { summaryToggleCb = cb; }
 export function setSummaryToggleVisible(visible) {
   const btn = document.getElementById("summary-toggle-btn");
@@ -304,6 +338,81 @@ export function plotResults(data) {
     });
   }
 
+  // Storey polygons — compute merged polygon per storey per building
+  rawStoreyData = [];
+  storeyPolygonsGeoJSON = null;
+  const half = GRID_SPACING / 2;
+
+  for (let bi = 0; bi < data.buildings.length; bi++) {
+    const b = data.buildings[bi];
+    if (!b.grid_cells || !b.floor_height_used || b.floor_height_used <= 0) continue;
+
+    const floorH = b.floor_height_used;
+    const angle = b.grid_angle || 0;
+    const cos = Math.cos(angle), sin = Math.sin(angle);
+    const maxH = Math.max(...b.grid_cells.map((c) => c.h));
+    const maxStoreys = Math.ceil(maxH / floorH);
+
+    for (let s = 1; s <= maxStoreys; s++) {
+      const threshold = (s - 1) * floorH;
+      const cellsAtLevel = b.grid_cells.filter((c) => c.h > threshold);
+
+      // Skip storey if fewer than 50% of cells reach it (partial roof artefact)
+      if (cellsAtLevel.length < b.grid_cells.length * 0.5 && s > Math.floor(maxH / floorH)) continue;
+      if (cellsAtLevel.length === 0) continue;
+
+      // Build cell polygons in LV95 for union
+      const cellFeatures = cellsAtLevel.map((c) => {
+        const corners = [[-half, -half], [half, -half], [half, half], [-half, half]].map(([dx, dy]) =>
+          [c.x + dx * cos - dy * sin, c.y + dx * sin + dy * cos]
+        );
+        corners.push(corners[0]);
+        return turf.polygon([corners]);
+      });
+
+      // Union all cell polygons into a single polygon for this storey
+      let merged;
+      if (cellFeatures.length === 1) {
+        merged = cellFeatures[0];
+      } else {
+        try {
+          merged = turf.union(turf.featureCollection(cellFeatures));
+        } catch (_) {
+          // If union fails, skip this storey
+          continue;
+        }
+      }
+
+      if (merged) {
+        rawStoreyData.push({
+          buildingIndex: bi,
+          storey: s,
+          polygonLV95: merged.geometry,
+          base: (s - 1) * floorH,
+          top: Math.min(s * floorH, maxH),
+        });
+      }
+    }
+  }
+
+  // Storey polygons source + layer (starts empty, converted lazily)
+  const emptyGeoJSON2 = { type: "FeatureCollection", features: [] };
+  if (map.getSource("storey-polygons")) {
+    map.getSource("storey-polygons").setData(emptyGeoJSON2);
+  } else {
+    map.addSource("storey-polygons", { type: "geojson", data: emptyGeoJSON2 });
+  }
+
+  if (!map.getLayer("storey-polygons-3d")) {
+    map.addLayer({
+      id: "storey-polygons-3d",
+      type: "fill-extrusion",
+      source: "storey-polygons",
+      layout: { visibility: "none" },
+      paint: STOREY_PAINT,
+    });
+  }
+
   // Labels
   if (!map.getLayer("buildings-labels")) {
     map.addLayer({
@@ -389,6 +498,14 @@ export function plotResults(data) {
       map.setLayoutProperty("grid-cells-3d", "visibility", e.target.checked ? "visible" : "none");
     }
   });
+  document.getElementById("layer-toggle-storeys")?.addEventListener("change", (e) => {
+    if (e.target.checked) {
+      ensureStoreyPolygonsConverted();
+    }
+    if (map.getLayer("storey-polygons-3d")) {
+      map.setLayoutProperty("storey-polygons-3d", "visibility", e.target.checked ? "visible" : "none");
+    }
+  });
   document.getElementById("layer-toggle-labels")?.addEventListener("change", (e) => {
     if (map.getLayer("buildings-labels")) {
       map.setLayoutProperty("buildings-labels", "visibility", e.target.checked ? "visible" : "none");
@@ -484,6 +601,12 @@ function initBasemapSwitcher() {
           map.addLayer({ id: "grid-cells-3d", type: "fill-extrusion", source: "grid-cells",
             layout: { visibility: visGrid }, paint: GRID_PAINT });
 
+          const visStoreys = document.getElementById("layer-toggle-storeys")?.checked ? "visible" : "none";
+          const storeyData = storeyPolygonsGeoJSON || { type: "FeatureCollection", features: [] };
+          map.addSource("storey-polygons", { type: "geojson", data: storeyData });
+          map.addLayer({ id: "storey-polygons-3d", type: "fill-extrusion", source: "storey-polygons",
+            layout: { visibility: visStoreys }, paint: STOREY_PAINT });
+
           // Re-add cluster layers
           addClusterLayers(visClusters);
         }