Files
GhiVideo/docs/history/2026-06-24_1453_POI팝업-원본CSV속성표시.md
T
b23042andClaude Opus 4.8 78fc090360 초기 커밋: 스테이션(측점) 기반 주행영상 플레이어
- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel
- 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API
- 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-25 16:37:57 +09:00

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/RouteStructureprops?: { k: string; v: string }[] 추가(순서 보존).
  • 헬퍼 cleanHeader()(트림+BOM)·rowProps(header,row)(비어있지 않은 헤더:값 배열) 추가.
  • 적용 파서(전부 비어있지 않은 모든 컬럼 저장): · parseAccessDoors(출입문) · parsePois(_POI.csv + 02)지장물) · parseStructures(03)교량/04)터널/06)구교).
  • StationOverlay 구조물→GeoPoint 매핑에 props: s.props 전달.

팝업 렌더 (StationOverlay)

  • InfoPopupprops? 추가, 클릭 시 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