GhiVideo 소스 복제 — v4 작업 시작 기준
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,745 @@
|
||||
# GhiVideo 구현 상세 — 기술과 소스코드 매칭
|
||||
|
||||
> 작성일: 2026-06-30
|
||||
> 본 문서는 [쉬운설명_GhiVideo_기술이야기](쉬운설명_GhiVideo_기술이야기.md) 및 [DefVideo→GhiVideo_업그레이드_상세](DefVideo→GhiVideo_업그레이드_상세.md)에서 설명한 기술들을 **실제 소스코드(파일·라인·핵심 코드)**와 1:1로 매칭하여, "어떻게 구현했는가"를 코드 근거와 함께 상세히 기술한 문서다.
|
||||
> 라인 번호는 작성 시점(2026-06-30) 기준이며 코드 수정 시 다소 달라질 수 있다.
|
||||
|
||||
---
|
||||
|
||||
## 목차
|
||||
|
||||
1. [전체 데이터 흐름](#1-전체-데이터-흐름-한눈에)
|
||||
2. [데이터 로딩 — V2.0 폴더 파싱](#2-데이터-로딩--v20-폴더-파싱)
|
||||
3. [좌표 투영 엔진](#3-좌표-투영-엔진)
|
||||
4. [역투영 — 화면을 다시 세계로](#4-역투영--화면을-다시-세계로)
|
||||
5. [측점·체이니지 계산](#5-측점체이니지-계산)
|
||||
6. [영상 오버레이 렌더링](#6-영상-오버레이-렌더링)
|
||||
7. [라벨 안정화 — 평활과 이상치 거부](#7-라벨-안정화--평활과-이상치-거부)
|
||||
8. [POI 겹침 억제·컴팩트 팝업](#8-poi-겹침-억제컴팩트-팝업)
|
||||
9. [위치 보정 — 드래그·DEM·세로화각](#9-위치-보정--드래그demem세로화각)
|
||||
10. [나침반 미니맵](#10-나침반-미니맵)
|
||||
11. [하단 측점바 — 이동거리축](#11-하단-측점바--이동거리축)
|
||||
12. [60fps 부드러운 커서 — smoothTimeRef](#12-60fps-부드러운-커서--smoothtimeref)
|
||||
13. [상태 관리 — geoStore·settingsStore·playerStore](#13-상태-관리)
|
||||
14. [서버 — 고도(DEM) 프록시 API](#14-서버--고도dem-프록시-api)
|
||||
|
||||
---
|
||||
|
||||
## 1. 전체 데이터 흐름 (한눈에)
|
||||
|
||||
```
|
||||
[폴더 드롭]
|
||||
VideoPlayer.handleDrop (webkitGetAsEntry + collectDropEntry 재귀 수집)
|
||||
│
|
||||
▼
|
||||
[파싱] geoData.loadFolderGeoData
|
||||
├ decodeBytes (BOM 자동 인코딩)
|
||||
├ parseKmz (영상 옆 root .kml/.kmz) POI·구조물의 *유일* 소스(필수)
|
||||
│ └ 없거나 비면 kmzMissing=true → 경고(alert+console), POI·구조물 빈 상태
|
||||
│ (building/ POI·구조물 CSV 폴백 제거됨. 측점은 별개로 항상 로드)
|
||||
├ parseStations → 측점 + 방향전환점 (측점 CSV: root 또는 building/)
|
||||
├ parsePoiOverrides (드래그 보정 JSON)
|
||||
└ buildCenterlineFromStations (center.csv 대체)
|
||||
│
|
||||
▼
|
||||
[상태] geoStore (basePois + poiOverrides → applyPoiOverrides → pois)
|
||||
settingsStore (gradeFilter 등 localStorage 영속)
|
||||
playerStore (videoReady, videoWidth/Height)
|
||||
│
|
||||
▼
|
||||
[투영] geoProjection: ENU → 카메라좌표(회전행렬) → 정규픽셀
|
||||
chainage: 드론 GPS → 측점값(km) / 선로 이격(offsetM)
|
||||
│
|
||||
▼
|
||||
[렌더] StationOverlay (RAF 60fps): 선형·궤적·라벨·팝업·미니맵
|
||||
StationBar (RAF): 이동거리축 커서/측점배지
|
||||
VideoPlayer (RAF): smoothTimeRef 단조보간 시간
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 데이터 로딩 — KMZ 우선, CSV 폴백
|
||||
|
||||
**파일**: [client/src/utils/geoData.ts](client/src/utils/geoData.ts)
|
||||
|
||||
> **데이터 소스 우선순위 (중요 — KMZ 필수 정책)**
|
||||
> POI·구조물의 **유일한 소스는 영상 옆(root)의 `.kml`/`.kmz`** 다. KMZ는 **필수**이며, 없거나 비어 있으면 `kmzMissing=true`로 두고 **경고(alert + console)** 만 띄운 채 POI·구조물을 빈 상태로 둔다(데이터 누락 → 재구축 필요). **`building/` POI·구조물 CSV 폴백은 제거**되었다(`parsePois`/`parseStructures`/`parseAccessDoors`/`parseHistoricStations` 삭제). 단 **측점**은 KMZ에 없어 항상 CSV에서 읽으며, 이 측점 CSV는 root 또는 `building/` 어디서든 찾는다. 따라서 지금은 **KMZ(root) + 측점 CSV(root)** 만으로 동작한다. (철도역=역사는 KMZ의 `KAKAO_RAIL` placemark에서 구조물로 생성된다.)
|
||||
>
|
||||
> ```ts
|
||||
> // loadFolderGeoData — KMZ가 유일 소스(필수). 없으면 경고만, 폴백 없음.
|
||||
> const kmzMissing = !kmz || (kmz.pois.length === 0 && kmz.structures.length === 0);
|
||||
> if (kmzMissing) console.warn('[KMZ] 누락/비어있음 — POI·구조물 미표시. 재구축 필요');
|
||||
> const pois = kmz?.pois ?? [];
|
||||
> const baseStructures = kmz?.structures ?? [];
|
||||
> ```
|
||||
|
||||
### 2.1 자동 인코딩 감지 (`decodeBytes`, 63–70행)
|
||||
|
||||
ArrayBuffer 앞 3바이트(BOM)로 UTF-8 / EUC-KR을 자동 판별한다. 구버전은 파일별로 인코딩을 하드코딩했으나, 신버전은 혼재 환경을 자동 처리한다.
|
||||
|
||||
```ts
|
||||
export function decodeBytes(buf: ArrayBuffer): string {
|
||||
const head = new Uint8Array(buf, 0, Math.min(3, buf.byteLength));
|
||||
const isUtf8Bom = head.length >= 3 && head[0] === 0xef && head[1] === 0xbb && head[2] === 0xbf;
|
||||
const encoding = isUtf8Bom ? 'utf-8' : 'euc-kr';
|
||||
const text = new TextDecoder(encoding).decode(buf);
|
||||
return text.replace(/^/, ''); // 디코딩 후 잔여 BOM 제거
|
||||
}
|
||||
```
|
||||
|
||||
### 2.2 파싱 견고성 헬퍼 (83–129행)
|
||||
|
||||
깨진 EUC-KR 헤더에도 안전하도록, 헤더명 검색 실패 시 위치 인덱스로 폴백한다.
|
||||
|
||||
```ts
|
||||
function makeFieldIndexer(header: string[]): (name: string, fallback?: number) => number {
|
||||
const cleaned = header.map((h) => h.trim().replace(/^/, ''));
|
||||
return (name, fallback) => {
|
||||
const i = cleaned.indexOf(name);
|
||||
return i >= 0 ? i : (fallback ?? -1); // 헤더명 실패 → 위치 폴백
|
||||
};
|
||||
}
|
||||
function cell(row: string[], i: number): string { // 음수/범위 밖 → '' (크래시 방지)
|
||||
return i >= 0 && i < row.length ? row[i] : '';
|
||||
}
|
||||
```
|
||||
|
||||
측점 CSV는 `findBuildingFile(files, '01)측점')` 키워드 매칭으로 `building/` → root 순으로 찾는다(둘 다 지원). KMZ 도입 후 POI·구조물 CSV 파서는 제거되어, 현재 CSV 파서는 측점·드론 둘뿐이다.
|
||||
|
||||
| 소스 | 파서 | 산출물 | 위치 |
|
||||
|------|------|--------|------|
|
||||
| 루트 `*.kml` / `*.kmz` | `parseKmz` | POI·구조물·역사 | **유일 소스(root, 필수)** |
|
||||
| `측점.csv` | `parseStations` | 측점 + 방향전환점 | root **또는** building/ |
|
||||
| `<base>.csv` | `parseDroneFrames` | 드론 프레임(자세/위치) | root |
|
||||
|
||||
> ~~`parsePois`·`parseStructures`·`parseAccessDoors`·`parseHistoricStations`~~ — KMZ 필수 정책으로 **삭제됨**(building/ POI·구조물 CSV 폴백 제거).
|
||||
|
||||
> 정리: **측점·역사**는 root 폴백이 있어 building 없이도 읽힌다. **지장물·교량·터널·구교·출입문 CSV**는 여전히 building/ 안에서만 찾지만, 이들은 KMZ가 있을 때 통째로 무시되므로 현재 KMZ 기반 데이터에서는 building 폴더가 없어도 정상 동작한다.
|
||||
|
||||
### 2.3 측점 표고 우선순위 & 방향전환점 (207–260행)
|
||||
|
||||
측점 CSV에서 `Z좌표_한국`(정표고, EPSG:5186)을 우선 사용하고, 없으면 `Z좌표`로 폴백한다. 비고 컬럼은 정규식으로 방향전환점을 추출한다.
|
||||
|
||||
```ts
|
||||
const iZKorea = fi('Z좌표_한국');
|
||||
const iZ = iZKorea >= 0 ? iZKorea : fi('Z좌표', 3); // 정표고 우선
|
||||
// ...
|
||||
// 비고: "방향전환점(상행->하행, 02:05)"
|
||||
const m = note.match(/방향전환점\s*\(\s*([^->]+?)\s*->\s*([^,)]+?)\s*,\s*([\d:]+)\s*\)/);
|
||||
if (m) directionChanges.push({
|
||||
station: title, from: m[1].trim(), to: m[2].trim(),
|
||||
atSeconds: mmssToSeconds(m[3]),
|
||||
});
|
||||
```
|
||||
|
||||
### 2.4 POI 위치 보정 입출력 (732–767행)
|
||||
|
||||
드래그로 만든 보정값을 `<base>_poi_overrides.json`에서 읽고(`parsePoiOverrides`), 원본에 덧씌운다(`applyPoiOverrides`). 원본과 보정을 분리해 **재적용 가능**하게 둔 것이 핵심 설계다.
|
||||
|
||||
```ts
|
||||
export function applyPoiOverrides(pois: GeoPoint[], overrides: PoiOverrideMap): GeoPoint[] {
|
||||
if (!overrides || !Object.keys(overrides).length) return pois;
|
||||
return pois.map((p) => {
|
||||
const o = overrides[p.title];
|
||||
return o ? { ...p, lat: o.lat, lon: o.lon, z: o.z } : p;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 2.5 중심선 생성 (`buildCenterlineFromStations`, 776–781행)
|
||||
|
||||
V2.0엔 `center.csv`가 없으므로, 측점을 측점값 순으로 정렬해 중심선 폴리라인을 만든다.
|
||||
|
||||
```ts
|
||||
export function buildCenterlineFromStations(stations: GeoPoint[]): CenterlinePoint[] {
|
||||
return [...stations]
|
||||
.filter((s) => !isNaN(s.lat) && !isNaN(s.lon))
|
||||
.sort((a, b) => stationOrder(a.title) - stationOrder(b.title))
|
||||
.map((s) => ({ lat: s.lat, lon: s.lon, z: s.z }));
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 좌표 투영 엔진
|
||||
|
||||
**파일**: [client/src/utils/geoProjection.ts](client/src/utils/geoProjection.ts)
|
||||
|
||||
월드좌표(위경도+표고)를 영상 화면의 정규픽셀(0~1)로 변환하는 핵심이다. 흐름은 **ENU → 카메라좌표(회전) → 정규픽셀** 3단계.
|
||||
|
||||
### 🧒 먼저, 아주 쉽게 — "이거 무슨 일을 하는 거야?"
|
||||
|
||||
우리는 지도에서 **다리(교량)가 어디 있는지** 알아요. 위도·경도라는 숫자로요. (예: "북위 36.33도, 동경 127.45도")
|
||||
|
||||
그런데 드론이 하늘에서 영상을 찍고 있어요. 우리가 하고 싶은 건:
|
||||
|
||||
> **"그 다리가 지금 드론 영상 화면의 어디쯤에 보일까?"** 를 계산해서, 그 자리에 이름표(라벨)를 딱 붙이는 거예요.
|
||||
|
||||
이걸 **투영(projection)** 이라고 해요. 쉽게 말하면 **"지도 위의 한 점 → 영상 화면 위의 한 점"으로 바꾸는 마법**이에요.
|
||||
|
||||
```
|
||||
지도(현실 세계) 드론 영상 화면
|
||||
┌───────────────┐ ┌───────────────┐
|
||||
│ 🌉 다리 │ ──투영 마법──► │ 🌉 │ ← 여기 이름표!
|
||||
│ (위도, 경도) │ │ (화면 x, y) │
|
||||
└───────────────┘ └───────────────┘
|
||||
```
|
||||
|
||||
이 마법은 한 번에 안 되고 **3단계**를 거쳐요. 마치 요리처럼 순서대로 재료를 다듬어요.
|
||||
|
||||
```
|
||||
1단계 2단계 3단계
|
||||
[ENU 변환] → [카메라 눈으로 보기] → [사진 찍기]
|
||||
둥근 지구를 드론이 고개 돌린 3D 세상을
|
||||
평평한 모눈 방향에 맞춰 납작한 사진
|
||||
종이로 폄 좌표를 돌림 한 장으로
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3.1 1단계 — 둥근 지구를 평평한 모눈종이로 (`geoToEnu`, 91–97행)
|
||||
|
||||
**문제**: 지구는 둥글어요. 그런데 둥근 표면 위에서 "몇 미터 떨어졌나"를 계산하긴 어려워요.
|
||||
|
||||
**해결**: 우리가 보는 작은 지역(노선 한 구간)만 **싹둑 잘라서 평평한 모눈종이(graph paper)** 위에 펼쳐요. 그러면 위치를 그냥 "오른쪽으로 몇 미터(E, East), 위로 몇 미터(N, North)"로 말할 수 있어요. 높이(U, Up)는 "기준점보다 몇 미터 높은가"로 둬요.
|
||||
|
||||
```
|
||||
둥근 지구 표면 평평한 모눈종이 (ENU)
|
||||
🌐 N(북) ↑
|
||||
╱ ╲ ──► │ • 다리 (E=120m, N=300m, U=-5m)
|
||||
(위도,경도) │
|
||||
────────┼────────► E(동)
|
||||
│ 기준점(0,0)
|
||||
```
|
||||
|
||||
- `E`, `N` = 옆으로·앞으로 몇 미터 (지도를 평평하게 편 좌표, EPSG:5186 TM)
|
||||
- `U` = 높이. `alt - refAlt` 즉 **기준 높이를 빼서** "상대 높이"로 만들어요.
|
||||
|
||||
```ts
|
||||
function geoToEnu(lat, lon, alt, _refLat, _refLon, refAlt): [number, number, number] {
|
||||
const [e, n] = latLonToTM(lat, lon); // 위도·경도 → 평평한 미터 좌표(E, N)
|
||||
return [e, n, alt - refAlt]; // 높이는 기준점 대비 상대값(U)
|
||||
}
|
||||
```
|
||||
|
||||
> 💡 비유: 지구본에 붙은 스티커를 떼어 책상 위에 평평하게 붙이는 것. 작은 조각이라 찌그러짐이 거의 없어요.
|
||||
|
||||
---
|
||||
|
||||
### 3.2 2단계 — 드론의 눈높이로 고개 돌리기 (`toCameraCoords`, 301–317행)
|
||||
|
||||
모눈종이 좌표(E, N, U)는 **'세상' 기준**이에요. 하지만 카메라(드론)는 **자기가 바라보는 방향**이 따로 있어요. 드론이 동쪽을 보든 북쪽을 보든, "내 앞·내 오른쪽·내 위" 기준으로 바꿔줘야 해요.
|
||||
|
||||
이때 드론의 자세 3가지를 써요:
|
||||
- **yaw(요)** = 어느 쪽을 향하는지 (나침반 방향, 좌우 회전)
|
||||
- **pitch(피치)** = 위/아래로 얼마나 기울었는지
|
||||
- **roll(롤)** = 좌우로 얼마나 갸우뚱했는지
|
||||
|
||||
이 3개로 **회전 행렬**을 만들어 세상 좌표를 "카메라가 보는 좌표(Xc, Yc, Zc)"로 빙글 돌려요.
|
||||
|
||||
```
|
||||
세상 기준(N=북 고정) 카메라 기준(드론이 보는 방향)
|
||||
N↑ "앞"(Zc) ↗
|
||||
│ • 다리 / • 다리
|
||||
│ ╱ / (앞으로 50m,
|
||||
────────┼────────► E ──회전──► / 오른쪽 8m)
|
||||
│drone🚁 🚁─────► "오른쪽"(side)
|
||||
(북을 보는 중) 드론이 보는 정면이 기준!
|
||||
```
|
||||
|
||||
추가로 **진행방향(가는 길) 기준 거리**도 계산해요:
|
||||
- `fwd` = 드론이 **가는 방향으로 앞쪽 몇 미터** (양수면 앞)
|
||||
- `side` = **옆으로 몇 미터** (오른쪽 +, 왼쪽 −)
|
||||
|
||||
이게 왜 필요할까요? 👉 "앞에 있는 먼 다리는 보여주되, 옆으로 멀리 떨어진 건 가리고 싶다" 같은 **똑똑한 필터**(앞은 멀리, 옆은 가깝게 = 비등방 거리필터)를 만들 수 있어요.
|
||||
|
||||
```ts
|
||||
const cc = applyRw2c(b2w, relEnu); // 세상좌표 → 카메라좌표 (회전 적용)
|
||||
cc.distH = dist; // 평면(수평) 거리
|
||||
const yaw = toRad(camera.yaw + params.yawOffset);
|
||||
const sy = Math.sin(yaw), cy = Math.cos(yaw);
|
||||
cc.fwd = relEnu[0] * sy + relEnu[1] * cy; // +면 내 앞쪽
|
||||
cc.side = relEnu[0] * cy - relEnu[1] * sy; // +면 오른쪽 / −면 왼쪽
|
||||
```
|
||||
|
||||
> 💡 비유: 친구가 "북쪽으로 3걸음"이라고 말해도, 내가 서쪽을 보고 있으면 그건 "내 오른쪽 3걸음"이에요. **내가 보는 방향 기준으로 바꿔 말하는 것**이 2단계예요.
|
||||
|
||||
---
|
||||
|
||||
### 3.3 3단계 — 3D 세상을 납작한 사진 한 장으로 (`pixelFromCamera`, 126–137행)
|
||||
|
||||
이제 진짜 **사진 찍기**예요. 카메라는 입체(3D) 세상을 납작한(2D) 사진으로 눌러 담아요. 핵심 원리는 딱 하나:
|
||||
|
||||
> **멀리 있는 건 화면 가운데로 작게, 가까이 있는 건 크게.**
|
||||
|
||||
옛날 **바늘구멍 사진기(핀홀 카메라)** 와 똑같아요. 작은 구멍으로 빛이 들어와 뒤쪽 종이에 상이 맺혀요.
|
||||
|
||||
```
|
||||
바늘구멍 사진기 원리
|
||||
다리 🌉 화면(필름)
|
||||
\ │
|
||||
\ ┌──┐ │ • ← 다리가 맺힌 점
|
||||
\ 빛 │ │ 바늘구멍 │
|
||||
\─────► │ •│ ───────────────► │
|
||||
가까울수록 (구멍) │
|
||||
화면에서 큼 │
|
||||
◄────── 거리(Zc) ──────►
|
||||
```
|
||||
|
||||
수학으로는 "카메라 좌표를 **깊이(Zc)로 나누는 것**"이 전부예요. Zc(거리)가 크면(멀면) 나눈 값이 작아져서 → 화면 가운데(0.5)에 가깝게 찍혀요.
|
||||
|
||||
```ts
|
||||
return {
|
||||
pxRaw: (0.5 + params.cx0) + (cc.Xc / cc.Zc) * (f / sW), // 가로 위치 (0~1)
|
||||
pyRaw: (0.5 + params.cy0) + (cc.Yc / cc.Zc) * (f / sH), // 세로 위치 (0~1)
|
||||
};
|
||||
```
|
||||
|
||||
- `0.5` = 화면 정중앙. 결과가 0이면 화면 왼쪽 끝, 1이면 오른쪽 끝.
|
||||
- `cc.Xc / cc.Zc` = **옆으로 벌어진 정도 ÷ 거리** → 멀수록 가운데로.
|
||||
- `f / sW` = 렌즈가 얼마나 "확대/광각"인지 (초점거리 ÷ 센서폭 = 화각). 망원렌즈면 크게, 광각이면 넓게 보여요.
|
||||
|
||||
> 💡 비유: 손가락을 눈앞에 두면 크게 보이고, 멀리 뻗으면 작아 보이죠? 똑같이 "거리로 나누기" 한 거예요.
|
||||
|
||||
---
|
||||
|
||||
### 3.4 보너스 — 높이의 함정, '두 개의 바다 높이' (`geoidOffset`)
|
||||
|
||||
마지막으로 까다로운 문제 하나. **높이(고도)를 재는 자(기준)가 두 종류**예요.
|
||||
|
||||
1. **정표고(EL)** — 우리가 흔히 쓰는 "바다 높이(해발)". 측점 데이터(지도)가 쓰는 자.
|
||||
2. **타원체고** — GPS·드론이 쓰는 "수학적으로 매끈한 지구 모양" 기준의 자.
|
||||
|
||||
이 둘은 같은 장소라도 **숫자가 달라요**. 대전 근처에선 약 **25.8m** 차이가 나요. 안 맞추면 다리가 화면에서 위아래로 어긋나 보여요.
|
||||
|
||||
```
|
||||
타원체고 자 ──────────────── ← GPS/드론이 재는 0
|
||||
▲
|
||||
│ 약 25.8m (geoidOffset)
|
||||
▼
|
||||
정표고(해발) 자 ────────────── ← 지도(측점)가 재는 0
|
||||
▲
|
||||
│ 다리의 실제 높이
|
||||
▼
|
||||
▓▓▓▓▓ 땅 ▓▓▓▓▓
|
||||
```
|
||||
|
||||
그래서 지도 높이에 **25.8m를 더해** GPS 기준으로 맞춰줘요. 이 한 줄 덕분에 라벨이 다리에 정확히 붙어요.
|
||||
|
||||
```ts
|
||||
// 지도 높이(정표고) + geoidOffset = GPS 기준 높이(타원체고)
|
||||
const stEnu = geoToEnu(targetLat, targetLon, targetAlt + (params.geoidOffset ?? 0), ...);
|
||||
// DEFAULT_CAMERA_PARAMS: geoidOffset: 25.8 (대전 KNGeoid18), sensorW: 36, sensorH: 20.25 ...
|
||||
```
|
||||
|
||||
> 💡 비유: 친구는 1층을 "0층"이라 부르고 나는 "1층"이라 불러요. 같은 곳을 말해도 숫자가 달라요. 그래서 "네 숫자에 1을 더하면 내 숫자야"라고 약속을 맞춰주는 것 = geoidOffset.
|
||||
|
||||
---
|
||||
|
||||
### 📋 3단계 한 줄 요약
|
||||
|
||||
| 단계 | 하는 일 | 쉬운 말 | 함수 |
|
||||
|------|---------|---------|------|
|
||||
| 1 | 둥근 지구 → 평평한 미터좌표(E,N,U) | 지구본 스티커를 책상에 펴기 | `geoToEnu` |
|
||||
| 2 | 세상좌표 → 카메라가 보는 좌표 | 내가 보는 방향 기준으로 고개 돌리기 | `toCameraCoords` |
|
||||
| 3 | 3D → 2D 화면 점(0~1) | 거리로 나눠 사진 찍기 | `pixelFromCamera` |
|
||||
| + | 높이 기준 맞추기 | 두 개의 '0층'을 약속으로 통일 | `geoidOffset` |
|
||||
|
||||
---
|
||||
|
||||
## 4. 역투영 — 화면을 다시 세계로
|
||||
|
||||
**파일**: [client/src/utils/geoProjection.ts](client/src/utils/geoProjection.ts) (149–251행)
|
||||
|
||||
드래그 편집·세로화각 보정 기능의 수학적 기반. 화면 픽셀을 다시 월드좌표로 되돌리는 3개 함수.
|
||||
|
||||
| 함수 | 위치 | 입력→출력 | 용도 |
|
||||
|------|------|-----------|------|
|
||||
| `worldFromPixel` | 149–183 | 픽셀 + 슬랜트거리 → lat/lon/z | POI 드래그(수평+수직 동시) |
|
||||
| `solveZForPixelY` | 194–211 | 화면 세로위치 → 표고 z | "앞으로 밀려 보임" 보정 |
|
||||
| `groundPointFromPixel` | 218–251 | 픽셀 + 지면고도 → lat/lon | 지면 좌표 보정(z 유지) |
|
||||
|
||||
핵심 아이디어: 투영의 회전행렬 `b2w`를 전치(`w2c`)해 카메라 방향벡터를 월드 ENU 방향으로 되돌린 뒤, 거리(또는 평면 교차)로 스케일한다.
|
||||
|
||||
```ts
|
||||
// groundPointFromPixel: 광선과 지면(zGround)의 교차 (218–251행)
|
||||
const relUpTarget = (zGround + (params.geoidOffset ?? 0)) - camera.altitude - (params.offZ ?? 0);
|
||||
const t = relUpTarget / dir[2]; // 광선 파라미터
|
||||
if (t <= 0) return null;
|
||||
const E = drEnu[0] + (params.offX ?? 0) + t * dir[0];
|
||||
const N = drEnu[1] + (params.offY ?? 0) + t * dir[1];
|
||||
const [lon, lat] = _toTM.inverse([E, N]);
|
||||
return { lat, lon };
|
||||
```
|
||||
|
||||
```ts
|
||||
// solveZForPixelY: 표고만 역산 — u = (R·Zc0 − Yc0)/(dYc − R·dZc) (194–211행)
|
||||
const R = (pyTarget - 0.5 - (params.cy0 ?? 0)) * sH / f;
|
||||
const denom = dYc - R * dZc;
|
||||
if (Math.abs(denom) < 1e-9) return z0;
|
||||
return z0 + (R * cc0.Zc - cc0.Yc) / denom;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 측점·체이니지 계산
|
||||
|
||||
**파일**: [client/src/utils/chainage.ts](client/src/utils/chainage.ts) (신규)
|
||||
|
||||
드론 GPS를 "선로 위 측점값(km)"과 "선로 수직이격(m)"으로 환산한다. StationBar와 오버레이 HUD가 공유.
|
||||
|
||||
```ts
|
||||
export function kmFromTitle(title: string): number { // "157K970" → 157970
|
||||
const m = title.match(/(\d+)[Kk](\d+)/);
|
||||
return m ? parseInt(m[1], 10) * 1000 + parseInt(m[2], 10) : -1;
|
||||
}
|
||||
|
||||
export function buildChainLine(stations): ChainLine | null { // 측점 → 평면 폴리라인 (22–32)
|
||||
const sorted = [...sts].sort((a, b) => kmFromTitle(a.title) - kmFromTitle(b.title));
|
||||
const lat0 = sorted.reduce((s, p) => s + p.lat, 0) / sorted.length;
|
||||
const k = Math.cos((lat0 * Math.PI) / 180) * 111000; // 경도→m 환산
|
||||
return { pts: sorted.map((p) => ({ x: p.lon * k, y: p.lat * 111000, km: kmFromTitle(p.title), ... })), k };
|
||||
}
|
||||
|
||||
export function projectToChain(lat, lon, line): { km; offsetM } { // GPS → 측점값+이격 (35–50)
|
||||
// 각 선분에 점-투영 → 최근접 선분의 보간 km, 수직거리(offsetM) 반환
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 영상 오버레이 렌더링
|
||||
|
||||
**파일**: [client/src/components/overlay/StationOverlay.tsx](client/src/components/overlay/StationOverlay.tsx)
|
||||
|
||||
### 6.1 RAF 60fps 루프 (905–1198행)
|
||||
|
||||
`timeupdate`(~250ms, 부정확) 대신 `requestAnimationFrame` 루프에서 매 프레임 Canvas를 다시 그린다. CLAUDE.md의 "오버레이 성능" 규칙을 정확히 따른다.
|
||||
|
||||
```tsx
|
||||
const draw = () => {
|
||||
rafId = requestAnimationFrame(draw);
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
// 1. object-fit:cover 변환 계산
|
||||
// 2. 연속 보간 포즈(estFrame) → dronePose = poseAt(estFrame)
|
||||
// 3. 중심선·드론궤적 투영/렌더
|
||||
// 4. 측점 라벨 / 5. POI 마커(재투영 + smoothStep 평활)
|
||||
// 6. 히트박스 수집 / 7. 팝업 위치 매 프레임 추종 / 8. 편집 피드백
|
||||
};
|
||||
```
|
||||
|
||||
매 프레임 **사전계산 캐시(가시성/겹침)**는 그대로 두고, 위치만 현재 보간 포즈로 재투영한다 → 선처럼 부드럽게 이동.
|
||||
|
||||
### 6.2 object-fit:cover 정렬 (921–930행)
|
||||
|
||||
영상이 `object-fit:cover`로 크롭된 실제 표시영역을 매 프레임 계산해, 정규좌표(0~1, 영상 프레임 기준)를 화면 px로 정확히 변환한다. 이게 있어야 라벨이 영상 위 실제 지점에 정렬된다.
|
||||
|
||||
```tsx
|
||||
const s = Math.max(W / vW, H / vH); // cover: 더 큰 배율
|
||||
dispW = vW * s; dispH = vH * s;
|
||||
offX = (W - dispW) / 2; offY = (H - dispH) / 2; // 음수 = 화면 밖(크롭)
|
||||
coverRef.current = { offX, offY, dispW, dispH, W, H };
|
||||
const vx = (nx) => offX + nx * dispW; // 정규 → 화면 px
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 라벨 안정화 — 평활과 이상치 거부
|
||||
|
||||
**파일**: [client/src/components/overlay/StationOverlay.tsx](client/src/components/overlay/StationOverlay.tsx) (48–61행)
|
||||
|
||||
떨림/튐을 잡는 핵심 알고리즘. One Euro 필터 방식의 **속도 적응형 EMA + 이상치 거부**.
|
||||
|
||||
```tsx
|
||||
const REJECT_DIST = 0.12; // 1프레임 최대 점프(정규)
|
||||
const MAX_REJECT_FRAMES = 8; // 연속 거부 한계 → 초과 시 수용
|
||||
const SMOOTH_VEL_BETA = 0.25; // 속도 평활 계수
|
||||
|
||||
function smoothStep(prev, tx, ty, maxAlpha, minAlpha, speedRef): DispPos {
|
||||
if (!prev) return { x: tx, y: ty, rej: 0, vx: 0, vy: 0 };
|
||||
const dx = tx - prev.x, dy = ty - prev.y, d = Math.hypot(dx, dy);
|
||||
if (d > REJECT_DIST && prev.rej < MAX_REJECT_FRAMES) // 이상치 → 위치 유지
|
||||
return { x: prev.x, y: prev.y, rej: prev.rej + 1, vx: prev.vx, vy: prev.vy };
|
||||
const vx = prev.vx + (dx - prev.vx) * SMOOTH_VEL_BETA; // 속도 평활
|
||||
const vy = prev.vy + (dy - prev.vy) * SMOOTH_VEL_BETA;
|
||||
const speed = Math.hypot(vx, vy);
|
||||
const a = Math.min(maxAlpha, minAlpha + (maxAlpha - minAlpha) * Math.min(1, speed / Math.max(1e-4, speedRef)));
|
||||
return { x: prev.x + dx * a, y: prev.y + dy * a, rej: 0, vx, vy };
|
||||
}
|
||||
```
|
||||
|
||||
**원리**: 떨림은 방향이 매 프레임 왕복 → 평활속도≈0 → `a`가 `minAlpha`로 작아져 강하게 평활. 실제 이동은 방향이 일관 → 평활속도 큼 → `a`가 `maxAlpha`로 커져 지연 없이 추종. 비정상 점프(시크 등)는 8프레임까지 무시하다 수용.
|
||||
|
||||
---
|
||||
|
||||
## 8. POI 겹침 억제·컴팩트 팝업
|
||||
|
||||
**파일**: [client/src/components/overlay/StationOverlay.tsx](client/src/components/overlay/StationOverlay.tsx)
|
||||
|
||||
### 8.1 겹침 억제 (35–36, 770–780행)
|
||||
|
||||
화면상 가로 10%·세로 3.5% 이내 마커는 겹침으로 보고, 같은 좌표의 형제 구조물(상/하)이면 진행방향 변형을 우선 남긴다.
|
||||
|
||||
```tsx
|
||||
const POI_MERGE_X = 0.10, POI_MERGE_Y = 0.035;
|
||||
// ...
|
||||
if (Math.abs(k.x - c.x) < POI_MERGE_X && Math.abs(k.y - c.y) < POI_MERGE_Y) { overlapIdx = i; break; }
|
||||
// 형제 + c가 진행방향 변형이면 교체
|
||||
if (dirTag && baseStruct(c.title) === baseStruct(k.title) && c.title.includes(dirTag) && !k.title.includes(dirTag))
|
||||
accepted[overlapIdx] = c;
|
||||
```
|
||||
|
||||
### 8.2 컴팩트 팝업 (152–176, 1269–1292행)
|
||||
|
||||
라벨 옆에 항상 핵심 3~6필드(시설종별→구조형식→연장→폭→용도→준공연도)를 컴팩트로 보이고, 클릭하면 전체로 확장한다. **다중 팝업** 누적 가능.
|
||||
|
||||
```tsx
|
||||
const compactFieldsOf = (props) => { // 정해진 순서로 존재하는 것만 (152–166)
|
||||
pick('시설종별', k => k === '시설종별'); pick('구조형식', k => /구조형식/.test(k));
|
||||
pick('연장(m)', k => /연장/.test(k)); /* 폭/용도/준공 ... */
|
||||
};
|
||||
// 클릭: 이미 있으면 전체↔컴팩트 토글, 없으면 추가 (컴팩트필드 없으면 바로 전체 펼침) (1269–1292)
|
||||
expanded: compact.length === 0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. 위치 보정 — 드래그·DEM·세로화각
|
||||
|
||||
**파일**: [client/src/components/overlay/StationOverlay.tsx](client/src/components/overlay/StationOverlay.tsx)
|
||||
|
||||
### 9.1 드래그 편집 (1236–1254, 1348행)
|
||||
|
||||
편집 모드에서 POI를 끌면 `groundPointFromPixel`로 화면점을 지면과 교차시켜 lat/lon을 역산, geoStore에 보정으로 저장.
|
||||
|
||||
```tsx
|
||||
const ll = groundPointFromPixel(drone, pos.x, pos.y, drag.z0, p, wo);
|
||||
if (ll) setPoiOverride(drag.title, { lat: ll.lat, lon: ll.lon, z: drag.z0 });
|
||||
```
|
||||
|
||||
### 9.2 DEM 자동 표고 (1384–1415행)
|
||||
|
||||
모든 POI/구조물 좌표를 100개씩 묶어 서버 `/api/elevation`(SRTM 30m)에 질의, 실제 지형고도를 보정값으로 일괄 적용. COEP/CSP로 외부 직접호출이 막혀 서버가 중계.
|
||||
|
||||
```tsx
|
||||
const r = await fetch(`/api/elevation?lat=${lat}&lon=${lon}`); // 같은 출처 프록시
|
||||
const elev = (await r.json())?.elevation;
|
||||
chunk.forEach((p, k) => { if (typeof elev[k] === 'number') next[p.title] = { lat: p.lat, lon: p.lon, z: elev[k] }; });
|
||||
setPoiOverrides(next);
|
||||
```
|
||||
|
||||
### 9.3 세로화각 보정 (1331–1345행)
|
||||
|
||||
라벨이 상하로 어긋날 때, POI를 영상 속 실제 위치로 끌면 **세로 화각(sensorH)만** 역산해 자동 보정한다(가로 초점 f는 불변).
|
||||
|
||||
```tsx
|
||||
const b = cc.Yc / cc.Zc;
|
||||
const v = pos.y - 0.5 - (p.cy0 ?? 0);
|
||||
const sHNew = Math.max(6, Math.min(36, (b * p.focalLen) / v));
|
||||
setParam('sensorH', sHNew);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. 나침반 미니맵
|
||||
|
||||
**파일**: [client/src/components/overlay/Minimap.tsx](client/src/components/overlay/Minimap.tsx) + StationOverlay RAF(954–971행)
|
||||
|
||||
SVG 카드 전체를 `transform: rotate(var(--rot))`로 회전시키고, RAF에서 매 프레임 `--rot`을 `−yaw`로 갱신한다. 360° 누적 언랩으로 회전 점프를 막고, 회전엔 메인 포즈(±60fr 강한 평활)가 아닌 **가벼운 ±3fr 평활 yaw**를 별도 계산해 지연을 줄였다.
|
||||
|
||||
```tsx
|
||||
// Minimap.tsx: transform: 'rotate(var(--rot, 0deg))'
|
||||
// StationOverlay.tsx (954–971): 매 프레임 갱신
|
||||
const target = -(rawYaw + paramsRef.current.yawOffset);
|
||||
const delta = (((target - minimapRotRef.current) % 360) + 540) % 360 - 180; // 최단경로 언랩
|
||||
minimapRotRef.current += delta;
|
||||
minimapRef.current.style.setProperty('--rot', `${minimapRotRef.current}deg`);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. 하단 측점바 — 이동거리축
|
||||
|
||||
**파일**: [client/src/stationbar/StationBar.tsx](client/src/stationbar/StationBar.tsx)
|
||||
|
||||
### 11.1 영상별 FPS 자동 (228–231행)
|
||||
|
||||
고정 29.97 대신 `마지막 프레임 / 재생시간`으로 영상마다 산출 → 측점 배지 정확도 향상.
|
||||
|
||||
```tsx
|
||||
const videoFps = useMemo(() => {
|
||||
const last = storeFrames.length ? storeFrames[storeFrames.length - 1].frame : 0;
|
||||
return last > 0 && duration > 0 ? last / duration : VIDEO_FPS;
|
||||
}, [storeFrames, duration]);
|
||||
```
|
||||
|
||||
### 11.2 이동거리축 누적 (233–274행)
|
||||
|
||||
드론의 실제 측점값(체이니지)을 ±8프레임 평활한 뒤, 프레임 간 변화량 `|Δ|`을 누적해 "실제 이동거리" 축을 만든다. 호버(공중 정지) 구간에선 누적이 멈춰 커서가 정지 → 대기 시간이 가시화된다. 앞뒤 5% 평균(`depChain`/`arrChain`)으로 출발·도착 방향을 잡는다.
|
||||
|
||||
```tsx
|
||||
const W = 8;
|
||||
for (let i = 0; i < n; i++) { // 측점값 ±W 이동평균
|
||||
sm[i] = (pre[hi] - pre[lo]) / (hi - lo);
|
||||
if (i > 0) cum += Math.abs(sm[i] - sm[i - 1]); // |Δ| 누적 = 이동거리
|
||||
frac[i] = cum;
|
||||
}
|
||||
for (let i = 0; i < n; i++) frac[i] /= total; // 0~1 정규화
|
||||
chainRef.current = { time, frac, depChain: dep, arrChain: arr };
|
||||
```
|
||||
|
||||
### 11.3 종점역 미도착 (300–310, 574–586행)
|
||||
|
||||
영상이 종점역에 미도달하면 트랙 우측을 회색(상한 15%)으로 비우고, 종점 마커를 '속 빈 링(unreached)'으로 표시.
|
||||
|
||||
```tsx
|
||||
const endGapPx = Math.min(TRACK_WIDTH_PX * 0.15, (gapM / lenM) * TRACK_WIDTH_PX);
|
||||
const timeTrackWidth = TRACK_WIDTH_PX - endGapPx;
|
||||
// 마지막 역사 마커를 트랙 끝(미도착)으로
|
||||
if (hiIdx >= 0) marks[hiIdx] = { ...marks[hiIdx], px: TRACK_END_PX, unreached: true };
|
||||
```
|
||||
|
||||
### 11.4 Timeline 라벨 그룹핑 (Timeline.tsx 139–172행)
|
||||
|
||||
동명 구조물의 여러 통과점을 `Map<title, marks[]>`으로 묶어, 중앙에 라벨 1개 + 각 통과에 점선 드롭 + 양끝 브래킷으로 표시. 상/하 변형은 진행방향 1개만 남긴다.
|
||||
|
||||
---
|
||||
|
||||
## 12. 60fps 부드러운 커서 — smoothTimeRef
|
||||
|
||||
**파일**: [client/src/components/player/VideoPlayer.tsx](client/src/components/player/VideoPlayer.tsx) (62–117행)
|
||||
|
||||
`currentTime`은 ~250ms 간격으로 갱신돼 커서가 끊긴다. 이를 **벽시계 기준 단조 보간**으로 메워 60fps로 만든다. 정지 시엔 실제 시간에 앵커, 재생 중엔 `media + 경과×배속`으로 추정하되 0.3s 이상 벌어지면 재동기화.
|
||||
|
||||
```tsx
|
||||
let est = a.media + ((performance.now() - a.wall) / 1000) * rate;
|
||||
const real = p.currentTime() ?? 0;
|
||||
if (real - est > 0.3 || real < a.media - 0.3) { // 드리프트 보정
|
||||
est = real; anchorRef.current = { media: real, wall: performance.now() };
|
||||
}
|
||||
smoothTimeRef.current = t; // ref로 노출
|
||||
```
|
||||
|
||||
StationBar는 이 `timeRef`를 **React 리렌더 없이** 직접 읽어 CSS 변수만 갱신한다(StationBar.tsx 769–786행) → 커서/진행바가 부드럽게 흐른다.
|
||||
|
||||
```tsx
|
||||
const t = timeRef.current ?? 0;
|
||||
el.style.setProperty('--pos-px', `${pxAtTime(t)}px`);
|
||||
el.style.setProperty('--cursor-x', `${renderX(pos)}px`);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 13. 상태 관리
|
||||
|
||||
### 13.1 geoStore — 보정 분리관리
|
||||
|
||||
**파일**: [client/src/store/geoStore.ts](client/src/store/geoStore.ts) (29–110행)
|
||||
|
||||
`basePois`(파싱 원본, 불변) + `poiOverrides`(보정 맵) → `applyPoiOverrides` 결과가 `pois`. 보정 추가/삭제 시 항상 원본에서 재계산하므로 누적 오염이 없다.
|
||||
|
||||
```ts
|
||||
setPoiOverride: (title, ov) => set((s) => {
|
||||
const poiOverrides = { ...s.poiOverrides, [title]: ov };
|
||||
return { poiOverrides, pois: applyPoiOverrides(s.basePois, poiOverrides) };
|
||||
}),
|
||||
```
|
||||
|
||||
### 13.2 settingsStore — localStorage 영속
|
||||
|
||||
**파일**: [client/src/store/settingsStore.ts](client/src/store/settingsStore.ts) (46–90행)
|
||||
|
||||
Zustand `persist`로 `ghivideo.settings` 키에 저장. `merge`로 과거 저장본의 누락 키를 기본값 보충(스키마 진화 대비). `isGradeVisible`을 공유 함수로 두어 StationBar·RoutePanel·오버레이가 동일 규칙을 쓴다.
|
||||
|
||||
```ts
|
||||
{ name: 'ghivideo.settings',
|
||||
merge: (persisted, current) => ({ ...current, ...p,
|
||||
gradeFilter: { ...DEFAULT_GRADE_FILTER, ...(p.gradeFilter ?? {}) } }) }
|
||||
// isGradeVisible: 미지정/미등록 등급은 표시, 등록 등급은 체크 상태 따름
|
||||
```
|
||||
|
||||
### 13.3 playerStore — videoReady 게이트
|
||||
|
||||
**파일**: [client/src/store/playerStore.ts](client/src/store/playerStore.ts) (14–18행) + [useVideoPlayer.ts](client/src/hooks/useVideoPlayer.ts) (44–50행)
|
||||
|
||||
`loadeddata` 전엔 오버레이를 그리지 않아(깜빡임 방지), `videoWidth/Height`로 cover 정렬을 정확화.
|
||||
|
||||
```ts
|
||||
player.on('loadstart', () => store.setVideoReady(false));
|
||||
player.on('loadeddata', () => store.setVideoReady(true));
|
||||
const reportSize = () => store.setVideoSize(player.videoWidth() ?? 0, player.videoHeight() ?? 0);
|
||||
player.on('loadedmetadata', reportSize);
|
||||
player.on('loadeddata', reportSize);
|
||||
```
|
||||
|
||||
### 13.4 폴더 드롭 (VideoPlayer.tsx 18–37, 233–257행)
|
||||
|
||||
`webkitGetAsEntry()`로 디렉터리 엔트리를 얻어 `collectDropEntry`로 재귀 수집 → 영상+측점/POI 폴더를 통째로 로드.
|
||||
|
||||
```tsx
|
||||
function collectDropEntry(entry, out): Promise<void> { // 디렉터리 재귀
|
||||
if (entry.isDirectory) { /* readEntries 배치 반복 */ }
|
||||
else (entry).file((f) => { out.push(f); });
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 14. 서버 — 고도(DEM) 프록시 API
|
||||
|
||||
**파일**: [server/src/routes/elevation.ts](server/src/routes/elevation.ts) (14–67행)
|
||||
|
||||
브라우저 COEP/CSP 제약으로 클라이언트가 외부 DEM API를 직접 못 부르므로 서버가 중계한다. 배치(콤마 구분) 질의, **opentopodata SRTM 30m → open-meteo 90m** 2단 폴백.
|
||||
|
||||
```ts
|
||||
router.get('/', async (req, res) => {
|
||||
// 1) open-topodata SRTM 30m
|
||||
const locs = lats.map((la, i) => `${la.trim()},${lons[i].trim()}`).join('|');
|
||||
const r = await fetch('https://api.opentopodata.org/v1/srtm30m?locations=' + encodeURIComponent(locs));
|
||||
if (r.ok && elevation.some(v => v != null)) {
|
||||
res.json({ elevation, source: 'opentopodata-srtm30m' }); return;
|
||||
}
|
||||
// 2) open-meteo 90m 폴백
|
||||
const r2 = await fetch('https://api.open-meteo.com/v1/elevation?latitude=' + latStr + '&longitude=' + lonStr);
|
||||
res.json({ elevation: (await r2.json())?.elevation ?? [], source: 'open-meteo-90m' });
|
||||
});
|
||||
```
|
||||
|
||||
`app.ts`에 `app.use('/api/elevation', elevationRouter)`로 등록(서버 변경의 전부).
|
||||
|
||||
---
|
||||
|
||||
## 부록 — 기능 ↔ 소스 빠른 색인
|
||||
|
||||
| 기능 | 파일 | 라인 |
|
||||
|------|------|------|
|
||||
| 자동 인코딩 감지 | geoData.ts | 63–70 |
|
||||
| 파싱 헬퍼(폴백 인덱서) | geoData.ts | 83–129 |
|
||||
| 측점/방향전환점 | geoData.ts | 207–264 |
|
||||
| 구조물 파싱 | geoData.ts | 356–449 |
|
||||
| KMZ 파싱 | geoData.ts | 553–648 |
|
||||
| POI 보정 입출력 | geoData.ts | 732–767 |
|
||||
| 중심선 생성 | geoData.ts | 776–781 |
|
||||
| 카메라좌표 변환 | geoProjection.ts | 301–317 |
|
||||
| 정규픽셀 투영 | geoProjection.ts | 126–137 |
|
||||
| 역투영 3종 | geoProjection.ts | 149–251 |
|
||||
| 체이니지 계산 | chainage.ts | 10–64 |
|
||||
| RAF 렌더 루프 | StationOverlay.tsx | 905–1198 |
|
||||
| cover 정렬 | StationOverlay.tsx | 921–930 |
|
||||
| 라벨 평활/이상치거부 | StationOverlay.tsx | 48–61 |
|
||||
| POI 겹침 억제 | StationOverlay.tsx | 35–36, 770–780 |
|
||||
| 컴팩트 팝업 | StationOverlay.tsx | 152–176, 1269–1292 |
|
||||
| 드래그/DEM/세로화각 | StationOverlay.tsx | 1236–1254, 1331–1415 |
|
||||
| 나침반 미니맵 | Minimap.tsx / StationOverlay.tsx | 전체 / 954–971 |
|
||||
| 이동거리축 | StationBar.tsx | 228–310 |
|
||||
| 라벨 그룹핑 | Timeline.tsx | 101–172 |
|
||||
| smoothTimeRef | VideoPlayer.tsx / StationBar.tsx | 62–117 / 769–786 |
|
||||
| geoStore 보정 | geoStore.ts | 29–110 |
|
||||
| settingsStore | settingsStore.ts | 46–90 |
|
||||
| videoReady 게이트 | playerStore.ts / useVideoPlayer.ts | 14–18 / 44–50 |
|
||||
| 폴더 드롭 | VideoPlayer.tsx | 18–37, 233–257 |
|
||||
| 고도 API | elevation.ts | 14–67 |
|
||||
|
||||
---
|
||||
|
||||
*본 문서는 GhiVideo 소스코드를 직접 읽어 함수·라인·핵심 코드를 추출해 작성되었다. 코드 인용은 가독성을 위해 일부 축약·생략(`...`)했으며, 정확한 전체 구현은 해당 파일을 참조하라.*
|
||||
Reference in New Issue
Block a user