- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2.0 KiB
2.0 KiB
POI 클릭 팝업에 원본 CSV 속성 표시 (KMZ 정보표 형태)
날짜: 2026-06-24
수정 파일: client/src/types/geo.ts, client/src/utils/geoData.ts,
client/src/components/overlay/StationOverlay.tsx
요구
KMZ 팝업처럼 POI(출입문 등)의 본부·선별·역구간·시설팀·측점 등 원본 속성을 라벨 클릭 팝업에 표시.
구현
데이터: 원본 CSV 컬럼을 props 로 보존
GeoPoint/RouteStructure에props?: { k: string; v: string }[]추가(순서 보존).- 헬퍼
cleanHeader()(트림+BOM)·rowProps(header,row)(비어있지 않은 헤더:값 배열) 추가. - 적용 파서(전부 비어있지 않은 모든 컬럼 저장):
·
parseAccessDoors(출입문) ·parsePois(_POI.csv + 02)지장물) ·parseStructures(03)교량/04)터널/06)구교). StationOverlay구조물→GeoPoint 매핑에props: s.props전달.
팝업 렌더 (StationOverlay)
InfoPopup에props?추가, 클릭 시obj.props캡처.- 팝업 본문을
grid grid-cols-[auto_1fr](키/값) 로: · props 있으면 모든 속성(예 본부·선별·역구간·latitude·longitude·시설팀·출입문번호·5186x/y·X/Y/Z좌표·z·측점) + 드론거리. · props 없으면 기존 기본(종류/위도/경도/표고/거리). max-h-[45vh] overflow-y-auto(속성 많을 때 스크롤).
효과
- 출입문 6-007 클릭 → KMZ와 동일 항목(본부 대전충남 / 선별 경부선 / 역구간 회덕-대전조 / 시설팀 대전시설팀 / 출입문번호 6-007 / 측점 (158K600) / z 67.391 …)이 팝업에 표시.
- 지장물·_POI·교량/터널/구교도 각 CSV 속성 표시.
참고 (미구현)
- KMZ의 "지면 고도 46.12m"(구글 DEM 실측)는 CSV에 없음 → 로컬 공개 DEM(
36710.img, rasterio)으로 좌표별 지면고도를 채워 팝업/표고에 쓰는 건 별도 작업으로 가능.
검증
npm run build -w client(node20) tsc + vite build 통과.
소요 시간: 약 12분 Context 사용량: input ~660k / output ~7k tokens