/* ============================================================================= * D03_PlanAnalysis_UI_3D.ts * D03 [3D] 큰 모달(PLAN 530-3) — 한 연도 DEM + 그 연도 고른 노선 + 측점 막대만. 코리도 · 구조물은 * 안 부름(`setCorridor` 안 씀 → 노견 · 절성토면 · 구조물 없음). 연도 고름 = 모달 위 칸. * 뷰어 = B05 `createRouteViewer` 그대로 · 닫으면 버림(WebGL 문맥까지). * ========================================================================== */ import "../B05_Profile/B05_Profile_UI_Style.css"; import { openModal } from "@ui/ui_template_modal"; import { createProgressCircle } from "@ui/ui_template_progress"; import { showToast } from "@ui/ui_template_elements"; import type { DtmGrid } from "../common_util/common_util_surface_sampler"; import { createRouteViewer, type RouteViewer } from "../B05_Profile/B05_Profile_UI_Viewer"; import { sectionsGround } from "../B05_Profile/logic/B05_Profile_Sections_Ground"; import type { Vertex } from "./logic/D03_PlanAnalysis_Plan"; export interface Plan3dYear { year: number; modelId: number; grid: DtmGrid; line: Vertex[]; /** 그 연도 노선 위 측점 누가(연도 시작 = 0) · 등록 누가. */ stations: Array<{ localM: number; chainage: number }>; } /** 격자 → 뷰어 상자(지형에 붙는 노선 · 막대는 높이 원점과 무관 · x · y 만 메시와 맞으면 됨). */ function gridBounds(grid: DtmGrid): { x: [number, number]; y: [number, number]; z: [number, number]; } { let low = Infinity; let high = -Infinity; for (const z of grid.z) { if (!Number.isFinite(z)) continue; if (z < low) low = z; if (z > high) high = z; } return { x: [grid.x[0], grid.x[grid.x.length - 1]], y: [grid.y[0], grid.y[grid.y.length - 1]], z: [low, high], }; } export function openPlan3d(projectId: string, years: Plan3dYear[], firstYear: number): void { if (!years.length) return void showToast("3D 로 볼 연도 노선이 없습니다.", "warning"); let viewer: RouteViewer | null = createRouteViewer(); const pick = document.createElement("select"); pick.className = "d03-plan__3d-year"; for (const item of years) pick.append(new Option(`${item.year}년`, String(item.year), false, item.year === firstYear)); const top = document.createElement("div"); top.className = "d03-plan__3d-top"; top.append(pick); const load = async (year: number): Promise => { const item = years.find((entry) => entry.year === year) ?? years[0]; if (!viewer) return; const progress = createProgressCircle({ label: "3D 지형을 불러오는 중…", overlay: true }); progress.set(null); viewer.root.append(progress.root); try { await viewer.loadSurface(projectId, item.modelId, "dtm", true, 5, gridBounds(item.grid)); if (!viewer) return; viewer.markers.renderRoute(item.line.map(([x, y]) => ({ x, y }))); const ground = sectionsGround( item.line, item.stations.map((s) => s.localM), item.grid, ); viewer.renderStationLines( ground.stations.map((station, i) => ({ station_id: String(item.stations[i]?.chainage ?? station.chainage_m), center_x: station.center_x, center_y: station.center_y, center_z: station.center_z, frame: { left_xy: station.left_xy }, kind: "regular", chainage_m: item.stations[i]?.chainage ?? station.chainage_m, })), 2.5, ); viewer.setView("iso"); } catch (error) { showToast(error instanceof Error ? error.message : "3D 지형을 불러오지 못했습니다.", "error"); } finally { progress.remove(); } }; pick.addEventListener("change", () => void load(Number(pick.value))); openModal({ title: "3D 보기 — 지형 + 노선", closeLabel: "닫기", wide: true, dialogClass: "b05-route__3d-modal", mount: (body) => { body.classList.add("b05-route__3d-body"); body.append(top, viewer!.root); viewer!.setActive(true); }, beforeClose: () => { viewer?.dispose(); viewer = null; return true; }, }); void load(Number(pick.value)); }