Files
Aislo/D03_PlanAnalysis/D03_PlanAnalysis_UI_3D.ts
T
eomsangdonandClaude Opus 5.5 c96d559dc9 feat(D03): 3D 창 예상 코리도 — 측점 예상 단면 → B05 buildCorridor · 켬끔(PLAN 544-3)
- UI_3D — 횡단 판과 같은 예상 단면(Expect) 측점 묶음 → buildCorridor → setCorridor(지형 잘림 sections 실음)
- 모달 위 「예상 코리도」 켬끔 = setCorridorVisible · 검증 창구 window.__d03Plan3d(측점 수 · 짓기 ms)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-26 13:29:12 +09:00

149 lines
6.0 KiB
TypeScript

/* =============================================================================
* D03_PlanAnalysis_UI_3D.ts
* D03 [3D] 큰 모달(PLAN 530-3 · 544-3) — 한 연도 DEM + 그 연도 고른 노선 + 측점 막대 + 예상 코리도.
* 예상 코리도 = 측점마다 횡단 판과 같은 예상 단면(`logic/D03_PlanAnalysis_Expect`) → B05 `buildCorridor`
* → `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 { buildCorridor } from "../B05_Profile/logic/B05_Profile_Corridor_Build";
import type { CrossSection } from "../B06_Section/B06_Section_Api_Types";
import type { Vertex } from "./logic/D03_PlanAnalysis_Plan";
import { expectSections } from "./logic/D03_PlanAnalysis_Expect";
import { loadExpectStandard } from "./D03_PlanAnalysis_UI_Cross";
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 corridorBox = document.createElement("label");
corridorBox.className = "d03-plan__3d-corridor";
const corridorOn = Object.assign(document.createElement("input"), {
type: "checkbox",
checked: true,
});
corridorBox.append(corridorOn, " 예상 코리도(표준 횡단 기본값 · 계획고 = 지반고)");
corridorOn.addEventListener("change", () => viewer?.setCorridorVisible(corridorOn.checked));
const top = document.createElement("div");
top.className = "d03-plan__3d-top";
top.append(pick, corridorBox);
const standard = loadExpectStandard(projectId);
const load = async (year: number): Promise<void> => {
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);
const started = performance.now();
const stat: Record<string, unknown> = { year: item.year, done: false };
(window as unknown as { __d03Plan3d?: unknown }).__d03Plan3d = stat;
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,
);
const std = await standard;
if (!viewer) return;
const built = performance.now();
const sections = std
? (expectSections(ground.stations, std, item.grid) as unknown as CrossSection[])
: [];
const build = buildCorridor(
sections,
item.line.map(([x, y]) => ({ x, y })),
);
if (build) build.sections = sections; // 지형 잘림이 읽음
viewer.setCorridor(build);
viewer.setCorridorVisible(corridorOn.checked);
Object.assign(stat, {
sections: sections.length,
corridor: !!build,
buildMs: Math.round(performance.now() - built),
centers: sections.map((c) => [c.center_x, c.center_y, c.center_z]),
});
viewer.setView("iso");
} catch (error) {
showToast(error instanceof Error ? error.message : "3D 지형을 불러오지 못했습니다.", "error");
} finally {
stat.done = true;
stat.totalMs = Math.round(performance.now() - started);
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));
}