b23042/GhiVideo_v4
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

djmd 프레임 동기·오버레이 지면고정·선형-측점 정합·UI 단축키

Browse Source 
- djmd(영상 내장 텔레메트리) 프레임 동기 위치/고도: MP4 stbl 선별 파싱(djmdTrack.ts),
  CSV 시각정렬 오차(평균 3.2m) 제거 — 세그먼트별 백그라운드 정밀화(frameSynced 플래그)
- 자세 시간축 재정렬: djmd 위치 교차상관으로 CSV↔영상 오프셋 자동 추정(실측 -0.33s,
  잔차 0.24m) 후 yaw/pitch/roll 재샘플(yaw 최단각) — 옆 지물 미끄러짐 해소
- 포즈 평활 자동 제한: 프레임 동기 데이터는 ±5프레임 상한(기존 ±60=±1s) —
  회전 시 오버레이 전체가 드론에 딸려오는 지연 제거
- 선형-측점 정합: 측점 위치를 선형 정점으로 삽입(3D 이격≤0.012m) + 정점 z 를 측점
  체이니지 보간으로 재정렬, 측점 라벨 화면 EMA 제거(선과 동일한 즉시 투영) —
  선형이 측점 POI 를 픽셀 단위로 통과
- 드론높이 모드 높이 규칙 통일: 선형도 '드론고도-이격거리' 평면 적용(라벨과 동일)
- 카메라 offZ 잔재 교정: 표고 체계 정비 이전 드래그 보정값(-18.3m)이 이중 보정이 되어
  원거리 POI 가 접근할수록 밀리던 원인 — 경로 1-1 camera.json 0 으로 교정(.bak 백업)
- 로드 UX: 폴더 로드 시 정지 상태로 대기(처음부터), 데이터 교체 시 UI 초기 상태 복원
- 라벨: 측점 팝업 표고(타원체고) 행 추가, 구조물-POI 이중 라벨 제거(어음천교),
  시간동기 보정 슬라이더(timeOffsetSec)
- 측점 표기 0+000 형식 전환(생성 6곳·파서 4곳 신구 호환) + 스테이션바 양끝 100m 내
  시설물 없으면 시작/끝 스테이션 마크
- 단축키: F2 개발자 모드(dev_mode 1↔0, 세션 한정), A 선형 표시 토글
- 인프라: 54000 포트 재부팅 자동화(portproxy 직접 IP + 로그온 갱신, pm2 resurrect)
- docs/history: 작업 이력 23건

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
b23042
2026-07-14 17:59:43 +09:00
co-authored by Claude Fable 5
parent 7d51ba9945
commit c64c57b58e
36 changed files with 1248 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/overlay/RoutePanel.tsx
+3 -3
View File
@@ -23,15 +23,15 @@ const VIDEO_FPS = 30000 / 1001;
const cleanTitle = (t: string) => t.replace(/\s*\([상하]\)\s*$/, '').trim();
function stationKm(title: string): number {
const m = title.match(/(\d+)[Kk](\d+)/);
const m = title.match(/(\d+)\s*[Kk+]\s*(\d+)/);
if (!m) return -1;
return parseInt(m[1]) * 1000 + parseInt(m[2]);
}
/** 미터값 → "158k160" (10m 단위, 재생바 배지와 동일 형식). */
/** 미터값 → "158+160" (10m 단위, 재생바 배지와 동일 형식). */
function formatKm10(m: number): string {
const r = Math.round(m / 10) * 10;
return `${Math.floor(r / 1000)}k${String(r % 1000).padStart(3, '0')}`;
return `${Math.floor(r / 1000)}+${String(r % 1000).padStart(3, '0')}`;
}
const CATEGORY_EMOJI: Record<string, string> = {
client/src/components/overlay/StationOverlay.tsx
+60 -19
View File
@@ -38,6 +38,10 @@ const POI_MERGE_Y = 0.035;
type DispPos = { x: number; y: number; rej: number; vx: number; vy: number; rx?: number; ry?: number };
// djmd 프레임 동기 데이터일 때 포즈 평활 상한(±프레임). 위치·자세가 이미 매끄러워
// 긴 평활(기본 60 ≈ ±1s)은 회전 시 포즈 지연 → 오버레이 전체가 드론에 '딸려오는' 원인.
const POSE_SMOOTH_SYNCED_MAX = 5;
// 속도 적응형 평활(One Euro 방식) 상수.
// 떨림(노이즈)은 매 프레임 방향이 번갈아 → 평활속도≈0 → 강하게 평활(1배속에서 안정).
// 실제 이동은 방향이 일관 → 평활속도 큼 → alpha↑로 즉시 추종(빠른 배속에서 지연 없음).
@@ -194,7 +198,7 @@ const orderedFullFields = (
): { k: string; v: string }[] => [...compact, ...props.filter((p) => !isCompactKey(p.k))];
function stationOrder(title: string): number {
const m = title.match(/(\d+)[Kk](\d+)/);
const m = title.match(/(\d+)\s*[Kk+]\s*(\d+)/);
if (!m) return 0;
return parseInt(m[1]) * 1000 + parseInt(m[2]);
}
@@ -534,6 +538,13 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
const storePois = useGeoStore(s => s.pois);
const storeCenterline = useGeoStore(s => s.centerline);
const storeFrames = useGeoStore(s => s.frames);
const storeFrameSynced = useGeoStore(s => s.frameSynced);
const frameSyncedRef = useRef(false);
useEffect(() => { frameSyncedRef.current = storeFrameSynced; }, [storeFrameSynced]);
// 포즈 평활 유효 반폭 — 프레임 동기(djmd) 데이터는 상한 제한(회전 시 포즈 지연 제거).
const poseHalf = useCallback((): number =>
frameSyncedRef.current ? Math.min(smoothHalfRef.current, POSE_SMOOTH_SYNCED_MAX) : smoothHalfRef.current,
[]);
const storeOrigin = useGeoStore(s => s.origin);
const storeStructures = useGeoStore(s => s.structures);
const routeMeta = useGeoStore(s => s.routeMeta);
@@ -799,18 +810,23 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
// 구조물(교량/터널/구교)을 영상 오버레이에 POI처럼 표시(거리필터 적용).
// - 영상은 시설등급 무관 모두 표출(신대천교(복) 등 포함). 스테이션바엔 시설등급 필터로 별도 제어.
// lat/lon 없는 항목(측점기반 배치 등)도 제외.
// 신포맷(지장물.kml '타입') 교량/터널은 POI 로도 등록됨 — 같은 이름이 POI 에 있으면
// 영상 라벨이 이중 표출(파란 POI + 빨간 구조물, z 도 달라 위치 분리)되므로 구조물 쪽 제외.
// (스테이션바 구조물 마크는 storeStructures 직접 사용이라 영향 없음)
useEffect(() => {
const poiTitles = new Set(storePois.map(p => p.title));
allStructuresRef.current = storeStructures
.filter((s): s is RouteStructure & { lat: number; lon: number } =>
s.category != null && OVERLAY_STRUCT_CATEGORIES.has(s.category) &&
typeof s.lat === 'number' && typeof s.lon === 'number')
typeof s.lat === 'number' && typeof s.lon === 'number' &&
!poiTitles.has(s.name))
.map(s => ({
title: s.name,
category: s.category ?? '구교',
lat: s.lat, lon: s.lon, z: 0, type: 'poi' as const,
props: s.props,
}));
}, [storeStructures]);
}, [storeStructures, storePois]);
// 중심선
useEffect(() => {
@@ -935,8 +951,14 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
const sq = Math.sqrt(disc);
return [(-b - sq) / (2 * a), (-b + sq) / (2 * a)].filter((t) => t >= 0 && t <= 1);
};
// 드론높이 모드: 측점/POI 라벨과 동일한 '드론고도 − 이격거리' 평면에 투영 —
// 옵션 적용 시 라벨만 이동하고 선형이 지형 z 에 남아 서로 분리되는 것을 방지
// (측점 POI 와 빨간 선형이 항상 같은 선상에 놓이도록 높이 규칙 통일).
const planeZ = poiDroneHeightRef.current
? drone.altitude - (params.geoidOffset ?? 0) - droneHeightDropRef.current
: null;
const projCL = (lat: number, lon: number, z: number): CameraCoords =>
toCameraCoords(drone, lat, lon, z > 0 ? z : CL_Z, params, worldOrigin);
toCameraCoords(drone, lat, lon, planeZ ?? (z > 0 ? z : CL_Z), params, worldOrigin);
for (let i = 1; i < allCL.length; i++) {
const p0 = allCL[i - 1], p1 = allCL[i];
const e0 = enOf(p0), e1 = enOf(p1);
@@ -999,7 +1021,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
const i2 = lo, i1 = Math.max(0, lo - 1);
const f1 = arr[i1].frame, f2 = arr[i2].frame;
const frac = f2 > f1 ? Math.min(1, Math.max(0, (estFrame - f1) / (f2 - f1))) : 0;
const h = smoothHalfRef.current;
const h = poseHalf();
const a = smoothFrame(arr, i1, h), b = smoothFrame(arr, i2, h);
const L = (x: number, y: number) => x + (y - x) * frac;
let dy = b.yaw - a.yaw; dy = ((dy + 540) % 360) - 180; // 최단각
@@ -1010,7 +1032,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
pitch: L(a.pitch, b.pitch), roll: L(a.roll, b.roll),
yaw: a.yaw + dy * frac,
};
}, [smoothFrame]);
}, [smoothFrame, poseHalf]);
// 텍스트 사전 계산 — requestIdleCallback으로 백그라운드 실행
const startLabelPrecompute = useCallback((currentParams: CameraParams, currentSmoothHalf: number, currentMaxRange: number, currentDroneHeight: boolean, currentDroneDrop: number) => {
@@ -1056,11 +1078,14 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
});
const gzOf = new Map<string, number>();
for (const poi of allPoi) {
// 지면고도 gz: 보정값(DEM/드래그) → 최근접 선로표고(유효값) → POI 자체 z → 경로표고 앵커.
// 지면고도 gz 우선순위: 보정값(드래그) → **POI 자체 z(실측)** → 중심선 z → 경로표고 앵커.
// 종전엔 중심선 스냅이 POI z 보다 우선 — 도로에서 떨어진 지물이 도로 높이에 붙어
// 원거리에서 계속 밀리다 근거리에서만 맞는 증상의 원인. 실측 z 보유 데이터셋 기준으로 교정.
const clz = nearestCL(poi.lat, poi.lon)?.z;
gzOf.set(poi.title, overridesRef.current[poi.title]?.z
?? (poi.z > 0 ? poi.z : undefined)
?? (clz !== undefined && clz > 0 ? clz : undefined)
?? (poi.z > 0 ? poi.z : PATH_Z));
?? PATH_Z);
}
const t0 = performance.now();
@@ -1079,7 +1104,8 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
while (processed < end) {
const idx = (startIdx + processed) % total; // startIdx→끝→0→… 순환
processed++;
const drone = smoothFrame(frames, idx, SMOOTH_HALF);
const drone = smoothFrame(frames, idx,
frameSyncedRef.current ? Math.min(SMOOTH_HALF, POSE_SMOOTH_SYNCED_MAX) : SMOOTH_HALF);
const stationLabels: LabelCache['stationLabels'] = [];
for (const sp of snappedSt) {
@@ -1232,7 +1258,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
const p = paramsRef.current;
const fr = allDroneFramesRef.current;
const d = fr.length
? smoothFrame(fr, currentFrameIdxRef.current, smoothHalfRef.current)
? smoothFrame(fr, currentFrameIdxRef.current, poseHalf())
: cur;
compassRef.current = {
effectiveYaw: d.yaw + p.yawOffset,
@@ -1246,7 +1272,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
if (!currentDroneFrameRef.current) { renderCacheRef.current = null; return; }
const frames = allDroneFramesRef.current;
const drone = frames.length
? smoothFrame(frames, currentFrameIdxRef.current, smoothHalfRef.current)
? smoothFrame(frames, currentFrameIdxRef.current, poseHalf())
: currentDroneFrameRef.current;
const params = paramsRef.current;
renderCacheRef.current = {
@@ -1323,14 +1349,17 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
if (cache) {
// 부드러운 시간(timeRef, 60fps 보간) → 연속 프레임번호. 선/궤적·라벨 공통 사용.
const estTime = timeRef
// 시간동기(timeOffsetSec): 영상↔비행로그의 시각 오프셋 보정 — POI 가 진행방향으로
// 일괄 밀릴 때 조정(+ = 로그를 뒤로, − = 앞으로). camera.json 에 저장되는 보정값.
const estTime = (timeRef
? timeRef.current
: currentTimeSecRef.current + (performance.now() - timeUpdateWallRef.current) / 1000;
: currentTimeSecRef.current + (performance.now() - timeUpdateWallRef.current) / 1000)
+ (paramsRef.current.timeOffsetSec ?? 0);
const estFrame = estTime * fpsRef.current;
// 연속 보간 포즈(라인·라벨 공통) — 매 RAF 프레임 직접 투영해 부드럽게.
const dronePose = poseAt(estFrame) ?? (allDroneFramesRef.current.length
? smoothFrame(allDroneFramesRef.current, currentFrameIdxRef.current, smoothHalfRef.current)
? smoothFrame(allDroneFramesRef.current, currentFrameIdxRef.current, poseHalf())
: currentDroneFrameRef.current!);
const lines = buildLines(dronePose);
@@ -1453,7 +1482,10 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
if (cc.Zc < CLIP_Z) return;
const { pxRaw, pyRaw } = pixelFromCamera(cc, params);
const prevDst = displayedStRef.current.get(stA.title);
const d = smoothStep(prevDst, pxRaw, pyRaw, α, smoothMinAlphaRef.current, smoothSpeedRefRef.current);
// 측점 라벨은 선형 실선과 픽셀 단위로 붙어 다녀야 하므로 화면 EMA 없이 즉시 투영
// (실선도 매 프레임 즉시 투영 — djmd 프레임 동기 이후 입력이 매끄러워 평활 불필요.
// 반올림 떨림은 아래 0.75px 히스테리시스가 계속 흡수).
const d: DispPos = { x: pxRaw, y: pyRaw, rej: 0, vx: 0, vy: 0 };
seenSt.add(stA.title);
// 픽셀 히스테리시스: 0.75px 이상 움직일 때만 정수 위치 갱신 → 저속(1배속) 반올림 깜빡임 제거.
const sx0 = vx(d.x), sy0 = vy(d.y);
@@ -1636,9 +1668,9 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
// 현재 프레임의 평활 드론 자세 (역투영 기준)
const getSmoothedDrone = useCallback((): DroneFrameBasic | null => {
const frames = allDroneFramesRef.current;
if (frames.length) return smoothFrame(frames, currentFrameIdxRef.current, smoothHalfRef.current);
if (frames.length) return smoothFrame(frames, currentFrameIdxRef.current, poseHalf());
return currentDroneFrameRef.current;
}, [smoothFrame]);
}, [smoothFrame, poseHalf]);
// 화면 클릭좌표(client px) → 영상프레임 정규좌표(0~1). object-fit:cover 역변환(coverRef).
const clientToVideoNorm = useCallback((clientX: number, clientY: number): { x: number; y: number } => {
@@ -1676,7 +1708,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
if (!hit) return;
const poi = allPoisRef.current.concat(allStructuresRef.current).find(p => p.title === hit.title);
if (!poi) return;
const baseZ = nearestCL(poi.lat, poi.lon)?.z ?? poi.z;
const baseZ = (poi.z > 0 ? poi.z : nearestCL(poi.lat, poi.lon)?.z) ?? poi.z; // 실측 z 우선(가시 gz 와 동일 규칙)
const poiZ = overridesRef.current[hit.title] ? poi.z : baseZ;
setSelPoi(hit.title); setSelZ(poiZ); setSelZBase(baseZ);
dragRef.current = { title: hit.title, lat: poi.lat, lon: poi.lon, z0: poiZ, sx: nx, sy: ny };
@@ -1709,7 +1741,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
? allPoisRef.current.concat(allStructuresRef.current).find(p => p.title === hit.title)
: allGeoStationsRef.current.find(s => s.title === hit.title);
if (!obj) return;
const groundZ = overridesRef.current[hit.title]?.z ?? nearestCL(obj.lat, obj.lon)?.z ?? obj.z;
const groundZ = overridesRef.current[hit.title]?.z ?? (obj.z > 0 ? obj.z : nearestCL(obj.lat, obj.lon)?.z) ?? obj.z; // 실측 z 우선
const drone = getSmoothedDrone();
const dist = drone
? toCameraCoords(drone, obj.lat, obj.lon, groundZ, paramsRef.current, worldOriginRef.current).distH ?? null
@@ -1967,6 +1999,14 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
<span className="text-gray-500">경도</span><span>{pp.lon.toFixed(6)}</span>
</>
)}
{/* 표고(z) — KML 좌표 3번째 성분(타원체고). 속성표(SimpleData)에 없어서 별도 표기.
(지장물의 '높이' 속성은 구조물 높이라 표고와 구분. 컴팩트 팝업은 간결 유지) */}
{showFull && pp.z > 0 && (
<>
<span className="text-gray-500 whitespace-nowrap">표고</span>
<span className="break-all">{pp.z.toFixed(1)} m (타원체고)</span>
</>
)}
</div>
</div>
);
@@ -2137,6 +2177,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
>{camSaveState === 'ok' ? '저장됨 ✓' : 'PC에 저장'}</button>
</div>
<div className="space-y-2 mb-3">
<ParamRow label="시간동기" tip="영상↔비행로그 시각 오프셋(초). POI 전체가 진행방향으로 밀리면 조정 (+: 라벨을 진행방향 앞으로 / −: 뒤로). '풀 붙임' 정합의 핵심 — camera.json 에 저장됨" value={params.timeOffsetSec ?? 0} min={-2} max={2} step={0.05} unit="s" decimals={2} onChange={v => setParam('timeOffsetSec', v)} />
<ParamRow label="Yaw ±" value={params.yawOffset} min={-180} max={180} step={0.1} unit="°" decimals={1} onChange={v => setParam('yawOffset', v)} />
{/* Yaw 자동 추정(2단계 보정의 1단계) — 대략 맞춘 뒤 'Yaw 보정' 드래그 모드로 마무리 */}
<button
client/src/components/player/VideoPlayer.tsx
+33 -8
View File
@@ -129,11 +129,27 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
// dev_mode (route.json) — 0 이면 '영상제어' 버튼과 제어 UI 전체를 숨김(뷰어 모드).
// routeInfo.dev_mode 우선, 최상위 dev_mode 도 허용. 없으면 1(표시) — 기존 동작 유지.
const storeRouteMeta = useGeoStore((s) => s.routeMeta);
const devMode = (() => {
const fileDevMode = (() => {
const ri = storeRouteMeta?.routeInfo as Record<string, unknown> | undefined;
const v = ri?.dev_mode ?? (storeRouteMeta as unknown as Record<string, unknown> | null)?.dev_mode;
return v === 0 || v === '0' ? 0 : 1;
})();
// F2 → 개발자 모드(1↔0) 전환 — route.json 값을 세션 한정으로 덮어씀(파일 미변경).
// 새 폴더 로드 시 초기화되어 다시 파일 값을 따른다. 텍스트 입력 중에는 무시.
const [devModeOverride, setDevModeOverride] = useState<number | null>(null);
useEffect(() => { setDevModeOverride(null); }, [storeRouteMeta]);
const devMode = devModeOverride ?? fileDevMode;
useEffect(() => {
const onKey = (e: KeyboardEvent): void => {
if (e.code !== 'F2') return;
const t = e.target as HTMLElement;
if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable) return;
e.preventDefault();
setDevModeOverride((prev) => ((prev ?? fileDevMode) === 0 ? 1 : 0));
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [fileDevMode]);
// 분할 영상 재생목록 — 폴더 로드 시 이름 오름차순. 목록 클릭으로 세그먼트 직접 선택 재생.
const videoFiles = useGeoStore((s) => s.videoFiles);
const videoDurations = useGeoStore((s) => s.videoDurations);
@@ -148,6 +164,18 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
// 선형(중심선)·드론 궤적 영상 오버레이 토글 — StationOverlay 와 공유(설정 스토어).
const showCenterline = useSettingsStore((s) => s.showCenterline);
const setShowCenterline = useSettingsStore((s) => s.setShowCenterline);
// A → 선형(중심선+측점 라벨) 표시/숨김 토글. 텍스트 입력·수정키 조합(Ctrl+A 등)은 무시.
useEffect(() => {
const onKey = (e: KeyboardEvent): void => {
if (e.code !== 'KeyA' || e.ctrlKey || e.metaKey || e.altKey) return;
const t = e.target as HTMLElement;
if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable) return;
e.preventDefault();
setShowCenterline(!showCenterline);
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [showCenterline, setShowCenterline]);
const showDronePath = useSettingsStore((s) => s.showDronePath);
const setShowDronePath = useSettingsStore((s) => s.setShowDronePath);
const showRoutePanel = useSettingsStore((s) => s.showRoutePanel);
@@ -195,13 +223,13 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
if (usePlayerStore.getState().source?.kind !== 'local') return;
if (i === geo.videoIndex) {
playerRef.current?.currentTime(0);
const p = playerRef.current?.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
} else {
const file = await geo.loadSegment(i);
if (!file) return;
loadLocalFile(file);
loadLocalFile(file, true); // 목록 선택 — 로딩 완료 시 0초부터 자동 재생
}
const p = playerRef.current?.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
};
// 분할 영상 연속재생 — 영상이 끝나면 같은 폴더의 다음 영상(이름 오름차순)을 자동 재생.
@@ -219,10 +247,7 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
if (next >= geo.videoFiles.length) return;
const file = await geo.loadSegment(next);
if (!file) return;
loadLocalFile(file);
// ended 직후는 paused 상태라 loadLocalFile 의 이어재생 로직이 안 걸림 → 직접 재생.
const p = player.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
loadLocalFile(file, true); // 연속재생 — 로딩 완료 시 0초부터 자동 재생
})();
};
player.on('ended', onEnded);
client/src/hooks/useVideoPlayer.ts
+25 -8
View File
@@ -76,7 +76,7 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const loadLocalFile = useCallback((file: File) => {
const loadLocalFile = useCallback((file: File, autoPlay = false) => {
const player = playerRef.current;
if (!player) return;
@@ -87,19 +87,32 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
// 재생 중 폴더 교체 지원: 새 src 설정 후 이전 blob URL 을 해제한다.
// (player.src() 가 새 소스를 채택한 뒤이므로 prevUrl 은 더 이상 참조되지 않아 안전)
const prevUrl = objectUrlRef.current;
// 교체 직전 재생 중이었으면(=드롭 교체) 새 영상도 이어서 재생. 최초 로드는 prevUrl 없음 → 자동재생 안 함.
const wasPlaying = prevUrl != null && !player.paused();
const objectUrl = URL.createObjectURL(file);
objectUrlRef.current = objectUrl;
player.src({ src: objectUrl, type: file.type || 'video/mp4' });
// 로드 정책: 로딩 완료(loadedmetadata) 시점에
// - autoPlay=false(폴더 로드): '정지' 명령 실행 — pause + 0초. 애매한 일시정지 상태 방지,
// 재생 버튼/스페이스 등 사용자 조작으로만 시작
// - autoPlay=true(분할영상 연속재생·재생목록 선택): 0초부터 즉시 재생
player.one('loadedmetadata', () => {
if (player.isDisposed() || objectUrlRef.current !== objectUrl) return;
player.currentTime(0);
if (autoPlay) {
const p = player.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
} else {
player.pause();
}
});
store.setSource({ kind: 'local', file, objectUrl });
store.setHlsReady(false);
// 데이터 교체 시 UI 상태 즉시 초기화 — 이전 소스의 재생중 표시(일시정지 토글)·시간이
// 새 소스 메타데이터 로드 전까지 남아 보이는 문제 방지. (src 교체는 pause 이벤트를
// 보장하지 않아 store.playing 이 true 로 남을 수 있음)
store.setPlaying(false);
store.setCurrentTime(0);
store.setDuration(0);
if (prevUrl) URL.revokeObjectURL(prevUrl);
if (wasPlaying) {
// 드롭은 사용자 제스처라 자동재생 정책에 막히지 않음. 준비되면 재생(실패는 무시).
const p = player.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -117,6 +130,10 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
store.setSource({ kind: 'server', videoId, filename });
store.setHlsReady(false);
// 데이터 교체 시 UI 상태 즉시 초기화 (loadLocalFile 과 동일 정책)
store.setPlaying(false);
store.setCurrentTime(0);
store.setDuration(0);
const playRaw = () => player.src({ src: `/api/stream/${videoId}`, type: 'video/mp4' });
// 코덱 확인 — 브라우저가 직접 못 푸는 코덱(HEVC 등)이면 HLS로 자동 재생
client/src/stationbar/StationBar.tsx
+30 -8
View File
@@ -123,7 +123,7 @@ const clamp = (v: number, lo: number, hi: number): number =>
Math.min(hi, Math.max(lo, v));
function stationKm(title: string): number {
const m = title.match(/(\d+)[Kk](\d+)/);
const m = title.match(/(\d+)\s*[Kk+]\s*(\d+)/);
return m ? parseInt(m[1], 10) * 1000 + parseInt(m[2], 10) : -1;
}
@@ -144,26 +144,26 @@ function nearestStationKm(f: DroneFrameBasic, stations: GeoPoint[]): number {
/** station 값(숫자=미터, "158k400" 문자열) → 미터. 실패 시 -1. */
function mileageToMeters(v: number | string): number {
if (typeof v === 'number') return v;
const m = String(v).match(/(\d+)\s*[kK]\s*(\d+)/);
const m = String(v).match(/(\d+)\s*[kK+]\s*(\d+)/);
if (m) return parseInt(m[1], 10) * 1000 + parseInt(m[2], 10);
const n = parseInt(String(v).replace(/[^0-9]/g, ''), 10);
return Number.isFinite(n) ? n : -1;
}
/** 미터값 → "158k710" (10m 단위 반올림). 커서 배지용 십단위 표시. */
/** 미터값 → "158+710" (10m 단위 반올림). 커서 배지용 십단위 표시. */
function formatMileage10(m: number): string {
const r = Math.round(m / 10) * 10;
const km = Math.floor(r / 1000);
const mm = r % 1000;
return `${km}k${String(mm).padStart(3, '0')}`;
return `${km}+${String(mm).padStart(3, '0')}`;
}
/** 미터값 → "158k163" (1m 단위) — 커서 배지용. 노선밖 표기(1m)와 갱신 밀도를 맞춘다. */
/** 미터값 → "158+163" (1m 단위) — 커서 배지용. 노선밖 표기(1m)와 갱신 밀도를 맞춘다. */
function formatMileage1(m: number): string {
const r = Math.round(m);
const km = Math.floor(r / 1000);
const mm = r % 1000;
return `${km}k${String(mm).padStart(3, '0')}`;
return `${km}+${String(mm).padStart(3, '0')}`;
}
/**
@@ -659,6 +659,28 @@ export function StationBar({
return marks;
};
// 바 양끝 시작/끝 스테이션 — 각 끝 100m(체이니지) 이내에 다른 마크가 없으면
// 영상 시작·끝 지점의 측점값 마크를 추가(양끝이 비어 시작/끝 위치가 모호한 것 방지).
// 노선 밖(접근/이탈) 프레임은 체이니지가 클램프되므로 첫/마지막 '노선 위' 프레임 기준.
const appendEndpointStations = (marks: StructMark[]): StructMark[] => {
const va = viewedRef.current;
if (!va.length) return marks;
const onRoute = va.filter(v => v.offM <= OFF_ROUTE_M);
if (!onRoute.length) return marks;
const ends = [
{ v: onRoute[0], title: '시작' },
{ v: onRoute[onRoute.length - 1], title: '끝' },
];
for (const e of ends) {
const ch = e.v.chain;
if (marks.some(m => Math.abs(m.km - ch) <= 100)) continue;
const px = pxAtTime(e.v.time);
if (px === null) continue;
marks.push({ px, title: e.title, category: '측점', km: Math.round(ch), kmExists: true });
}
return marks;
};
// 구조물 후보 POI(교량/터널/역사) base 이름 → 실좌표.
const cats = new Set(['교량', '터널', '역사']);
const poiByName = new Map<string, { lat: number; lon: number; category: string }>();
@@ -741,7 +763,7 @@ export function StationBar({
out.push({ px: p.px, title: s.name, category: cat, km: stationKmVal ?? p.km, kmExists, props: s.props });
}
}
return placeUnreachedTerminal(appendStartMark(out));
return appendEndpointStations(placeUnreachedTerminal(appendStartMark(out)));
}
// 폴백: POI category 기반 (실좌표 GPS 근접, 모든 통과).
@@ -760,7 +782,7 @@ export function StationBar({
out.push({ px: p.px, title: base, category: info.category, km: stationKmVal ?? p.km, kmExists });
}
}
return placeUnreachedTerminal(appendStartMark(out));
return appendEndpointStations(placeUnreachedTerminal(appendStartMark(out)));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ready, duration, storeFrames, pois, stations, pxAtTime, routeMeta, routeDirCh, storeStructures, pxAtMileage, endGapPx, stationLine, videoFps]);
client/src/stationbar/components/Timeline/Timeline.tsx
+2 -2
View File
@@ -14,11 +14,11 @@ import { cssVars, px } from '../../utils/cssVars';
import { MileageMarker } from '../MileageMarker/MileageMarker';
import styles from './Timeline.module.scss';
/** 미터값 → "158k160" (10m 단위). 음수면 빈 문자열. */
/** 미터값 → "158+160" (10m 단위). 음수면 빈 문자열. */
function fmtKm(m: number): string {
if (m < 0) return '';
const r = Math.round(m / 10) * 10;
return `${Math.floor(r / 1000)}k${String(r % 1000).padStart(3, '0')}`;
return `${Math.floor(r / 1000)}+${String(r % 1000).padStart(3, '0')}`;
}
/**
client/src/stationbar/utils/mileage.ts
+2 -2
View File
@@ -46,12 +46,12 @@ export function pxForMileage(
return null;
}
/** 158204 → "158k200". */
/** 158204 → "158+200". */
export function formatMileage(mileage: number): string {
const rounded = Math.round(mileage / MILEAGE_ROUND_M) * MILEAGE_ROUND_M;
const km = Math.floor(rounded / METERS_PER_KM);
const m = rounded % METERS_PER_KM;
return `${km}k${String(m).padStart(3, '0')}`;
return `${km}+${String(m).padStart(3, '0')}`;
}
/** Accepts "158k200", "158200", "161800"… Returns meters or null. */
client/src/store/geoStore.ts
+37 -2
View File
@@ -26,6 +26,7 @@ import type {
DetectedCameraInfo,
} from '../types/geo';
import { loadFolderGeoData, applyPoiOverrides, parseDroneFrames } from '../utils/geoData';
import { refineFramesWithDjmd } from '../utils/djmdTrack';
interface GeoStore {
loaded: boolean;
@@ -60,6 +61,9 @@ interface GeoStore {
displayJson: Record<string, unknown> | null;
/** 드론 고도 datum 보정(m) — 타원체고 데이터셋의 정표고→타원체고 변환량. 세그먼트 전환에도 적용. */
altitudeOffsetM: number;
/** frames 가 djmd(영상 내장 텔레메트리) 프레임 동기 위치로 정밀화됐는지.
* true 면 입력이 매끄러워 오버레이 포즈 평활(smoothHalf)을 최소로 제한한다. */
frameSynced: boolean;
/**
* 폴더 선택 파일에서 지리정보를 파싱해 스토어에 적재한다.
@@ -84,6 +88,7 @@ interface GeoStore {
const EMPTY = {
loaded: false,
frames: [] as DroneFrame[],
frameSynced: false,
pois: [] as GeoPoint[],
basePois: [] as GeoPoint[],
poiOverrides: {} as PoiOverrideMap,
@@ -105,6 +110,31 @@ const EMPTY = {
altitudeOffsetM: 0,
};
/**
* djmd(영상 내장 텔레메트리) 정밀 위치 보정 — 백그라운드 적용.
* CSV 기반 프레임으로 즉시 표시한 뒤, 영상 파일에서 프레임 동기 위치/고도를 읽어 교체한다.
* (오르막/내리막·가감속에서 시간동기 오차를 원천 제거 — 자세는 CSV 유지)
*/
async function refineWithDjmd(
videoFile: File,
forIndex: number,
get: () => GeoStore,
set: (partial: Partial<GeoStore>) => void,
): Promise<void> {
try {
const s0 = get();
const refined = await refineFramesWithDjmd(videoFile, s0.frames, s0.altitudeOffsetM > 0);
if (!refined) return;
const s = get();
// 파싱 중 세그먼트/폴더가 바뀌었으면 폐기
if (s.videoIndex !== forIndex || s.videoFiles[forIndex] !== videoFile || s.frames !== s0.frames) return;
set({ frames: refined, frameSynced: true });
console.log(`[djmd] 영상 내장 텔레메트리로 위치/고도 정밀화 적용 (${refined.length}행, 프레임 동기)`);
} catch (e) {
console.warn('[djmd] 정밀 위치 적용 실패(CSV 기반 유지):', e);
}
}
export const useGeoStore = create<GeoStore>((set, get) => ({
...EMPTY,
@@ -113,6 +143,7 @@ export const useGeoStore = create<GeoStore>((set, get) => ({
set({
loaded: true,
frames: data.frames,
frameSynced: false,
basePois: data.pois,
poiOverrides: data.poiOverrides,
pois: applyPoiOverrides(data.pois, data.poiOverrides),
@@ -133,6 +164,8 @@ export const useGeoStore = create<GeoStore>((set, get) => ({
displayJson: data.displayJson,
altitudeOffsetM: data.altitudeOffsetM,
});
// 백그라운드 djmd 정밀 위치 보정 (완료 시 frames 교체 → 라벨 캐시 자동 재계산)
if (data.videoFile) void refineWithDjmd(data.videoFile, 0, get, set);
return data.videoFile;
},
@@ -152,7 +185,7 @@ export const useGeoStore = create<GeoStore>((set, get) => ({
if (!offsetKnown) {
console.warn(`[geo] 세그먼트 ${index + 1} 오프셋 계산 불가(영상 길이 측정 실패) — 드론 궤적 미표시`);
set({ frames: [], videoIndex: index });
set({ frames: [], videoIndex: index, frameSynced: false });
return file;
}
@@ -167,7 +200,9 @@ export const useGeoStore = create<GeoStore>((set, get) => ({
console.log(
`[geo] 세그먼트 ${index + 1}/${s.videoFiles.length} 전환 — 로그 ${offsetSec.toFixed(1)}s~ 정렬, ${frames.length}행`,
);
set({ frames, videoIndex: index });
set({ frames, videoIndex: index, frameSynced: false });
// 백그라운드 djmd 정밀 위치 보정 — 세그먼트 영상의 자체 텔레메트리 사용(프레임 동기)
void refineWithDjmd(file, index, get, set);
return file;
},
client/src/utils/chainage.ts
+2 -2
View File
@@ -12,10 +12,10 @@ export function kmFromTitle(title: string): number {
return m ? parseInt(m[1], 10) * 1000 + parseInt(m[2], 10) : -1;
}
/** 미터값 → "157k970" (10m 단위). */
/** 미터값 → "157+970" (10m 단위). */
export function fmtKm10(m: number): string {
const r = Math.round(m / 10) * 10;
return `${Math.floor(r / 1000)}k${String(r % 1000).padStart(3, '0')}`;
return `${Math.floor(r / 1000)}+${String(r % 1000).padStart(3, '0')}`;
}
/** 측점 POI 목록 → 평면투영 폴리라인(km 오름차순). 측점이 없으면 null. */
client/src/utils/djmdTrack.ts
+318
View File
@@ -0,0 +1,318 @@
/**
* DJI 영상 내장 텔레메트리(djmd 트랙) — 프레임 단위 정밀 위치/고도 추출
*
* DJI MP4 에는 비디오 프레임마다 djmd 데이터 샘플(protobuf)이 기록된다:
* 6.3 = 프레임 카운터, 6.4/6.5 = 위도/경도(라디안, double), 6.6 = 타원체고(mm)
* 이 위치는 해당 '영상 프레임'에 하드웨어 수준으로 동기되어 있어, 외부 비행로그(CSV,
* 10Hz + 시각 정렬 가정)의 시간 동기 오차가 원천적으로 없다 — 오르막/내리막/가감속에서
* POI 정합("풀 붙임")의 근본 해법. 자세(yaw/pitch/roll)는 djmd 에 없어 CSV 를 유지한다.
*
* 구현: MP4 박스(moov→trak→stbl)를 파싱해 djmd 트랙의 샘플 오프셋 테이블을 얻고,
* 전체 파일 스캔 없이 해당 바이트 구간만 골라 읽는다(기본 6프레임 간격 샘플링 ≈ 10Hz —
* 동기 정확도는 프레임 단위, 밀도는 CSV 동급).
*/
import type { DroneFrame } from '../types/geo';
interface DjmdSample {
frame: number;
lat: number; // deg
lon: number; // deg
altM: number; // 타원체고 (m)
}
// ── 저수준 리더 ───────────────────────────────────────────────────────
async function readAt(file: File, off: number, len: number): Promise<DataView> {
const buf = await file.slice(off, Math.min(off + len, file.size)).arrayBuffer();
return new DataView(buf);
}
function str4(dv: DataView, off: number): string {
return String.fromCharCode(dv.getUint8(off), dv.getUint8(off + 1), dv.getUint8(off + 2), dv.getUint8(off + 3));
}
/** 파일 최상위에서 type 박스 탐색 (mdat 등 대형 박스는 크기로 건너뜀). */
async function findTopBox(file: File, type: string): Promise<{ off: number; size: number; hdr: number } | null> {
let off = 0;
while (off + 8 <= file.size) {
const h = await readAt(file, off, 16);
if (h.byteLength < 8) return null;
let size = h.getUint32(0);
const t = str4(h, 4);
let hdr = 8;
if (size === 1) {
if (h.byteLength < 16) return null;
size = Number(h.getBigUint64(8));
hdr = 16;
} else if (size === 0) size = file.size - off;
if (t === type) return { off, size, hdr };
if (size < 8) return null;
off += size;
}
return null;
}
/** DataView 내 자식 박스 순회. */
function* boxes(dv: DataView, start: number, end: number): Generator<{ type: string; start: number; end: number }> {
let off = start;
while (off + 8 <= end) {
let size = dv.getUint32(off);
const type = str4(dv, off + 4);
let hdr = 8;
if (size === 1) {
size = Number(dv.getBigUint64(off + 8));
hdr = 16;
} else if (size === 0) size = end - off;
if (size < hdr) return;
yield { type, start: off + hdr, end: off + Math.min(size, end - off) };
off += size;
}
}
function findChild(dv: DataView, start: number, end: number, type: string): { start: number; end: number } | null {
for (const b of boxes(dv, start, end)) if (b.type === type) return { start: b.start, end: b.end };
return null;
}
// ── protobuf 미니 파서 (cameraMeta 와 동일 방식) ──────────────────────
function readVarint(b: Uint8Array, i: number): [number, number] | null {
let v = 0, s = 0;
while (i < b.length && (b[i] & 0x80)) {
v += (b[i] & 0x7f) * 2 ** s;
s += 7; i++;
if (s > 42) return null;
}
if (i >= b.length) return null;
v += (b[i] & 0x7f) * 2 ** s;
return [v, i + 1];
}
/** djmd 샘플에서 6.3(frame)/6.4(lat rad)/6.5(lon rad)/6.6(alt mm) 추출. */
function parseSample(b: Uint8Array): DjmdSample | null {
const dv = new DataView(b.buffer, b.byteOffset, b.byteLength);
let frame: number | undefined, lat: number | undefined, lon: number | undefined, alt: number | undefined;
const walk = (start: number, end: number, depth: number, parentTag: number): void => {
let i = start;
while (i < end) {
const kv = readVarint(b, i);
if (!kv) return;
const [key, ni] = kv;
i = ni;
const tag = key >> 3, wire = key & 7;
if (tag === 0 || tag > 60) return;
if (wire === 0) {
const r = readVarint(b, i); if (!r) return;
if (depth === 1 && parentTag === 6) {
if (tag === 3) frame = r[0];
else if (tag === 6) alt = r[0] / 1000;
}
i = r[1];
} else if (wire === 5) { i += 4; }
else if (wire === 1) {
if (i + 8 > end) return;
if (depth === 1 && parentTag === 6) {
const val = dv.getFloat64(i, true) * 180 / Math.PI;
if (tag === 4) lat = val;
else if (tag === 5) lon = val;
}
i += 8;
} else if (wire === 2) {
const r = readVarint(b, i); if (!r) return;
const [len, p] = r;
if (p + len > end) return;
if (depth === 0 && tag === 6) walk(p, p + len, 1, 6);
i = p + len;
} else return;
}
};
walk(0, b.length, 0, 0);
if (frame === undefined || lat === undefined || lon === undefined) return null;
if (!(lat > -90 && lat < 90 && lon > -180 && lon < 180)) return null;
return { frame, lat, lon, altM: alt ?? 0 };
}
// ── djmd 샘플 테이블 파싱 + 선별 읽기 ─────────────────────────────────
/**
* 영상 파일의 djmd 트랙에서 프레임별 위치 샘플을 읽는다 (step 프레임 간격).
* DJI 영상이 아니거나 트랙이 없으면 null.
*/
export async function parseDjmdPositions(file: File, step = 6): Promise<DjmdSample[] | null> {
const moov = await findTopBox(file, 'moov');
if (!moov || moov.size > 64 * 1024 * 1024) return null;
const mv = await readAt(file, moov.off + moov.hdr, moov.size - moov.hdr);
const end = mv.byteLength;
// djmd stsd 를 가진 trak 의 stbl 탐색
let stbl: { start: number; end: number } | null = null;
for (const trak of boxes(mv, 0, end)) {
if (trak.type !== 'trak') continue;
const mdia = findChild(mv, trak.start, trak.end, 'mdia');
if (!mdia) continue;
const minf = findChild(mv, mdia.start, mdia.end, 'minf');
if (!minf) continue;
const st = findChild(mv, minf.start, minf.end, 'stbl');
if (!st) continue;
const stsd = findChild(mv, st.start, st.end, 'stsd');
if (!stsd) continue;
// stsd: ver/flags(4) count(4) → entry: size(4) fourcc(4)
if (stsd.end - stsd.start >= 16 && str4(mv, stsd.start + 12) === 'djmd') { stbl = st; break; }
}
if (!stbl) return null;
const stsz = findChild(mv, stbl.start, stbl.end, 'stsz');
const stsc = findChild(mv, stbl.start, stbl.end, 'stsc');
const stco = findChild(mv, stbl.start, stbl.end, 'stco');
const co64 = findChild(mv, stbl.start, stbl.end, 'co64');
if (!stsz || !stsc || (!stco && !co64)) return null;
// stsz — 샘플 크기
const fixedSize = mv.getUint32(stsz.start + 4);
const sampleCount = mv.getUint32(stsz.start + 8);
if (!sampleCount) return null;
const sizeOf = (i: number): number => (fixedSize ? fixedSize : mv.getUint32(stsz.start + 12 + i * 4));
// stco/co64 — 청크 오프셋
const chunkCount = mv.getUint32((co64 ?? stco!).start + 4);
const chunkOff = (c: number): number =>
co64 ? Number(mv.getBigUint64(co64.start + 8 + c * 8)) : mv.getUint32(stco!.start + 8 + c * 4);
// stsc — 청크당 샘플 수 (구간 압축) 전개
const stscCount = mv.getUint32(stsc.start + 4);
const stscEntry = (i: number): [number, number] => [
mv.getUint32(stsc.start + 8 + i * 12), // first_chunk (1-base)
mv.getUint32(stsc.start + 8 + i * 12 + 4), // samples_per_chunk
];
// 샘플 인덱스 → 파일 오프셋 테이블 (step 간격 대상만)
const targets: { idx: number; off: number; size: number }[] = [];
let sampleIdx = 0, entry = 0;
for (let c = 0; c < chunkCount && sampleIdx < sampleCount; c++) {
while (entry + 1 < stscCount && stscEntry(entry + 1)[0] <= c + 1) entry++;
const spc = stscEntry(entry)[1];
let off = chunkOff(c);
for (let s = 0; s < spc && sampleIdx < sampleCount; s++, sampleIdx++) {
const sz = sizeOf(sampleIdx);
if (sampleIdx % step === 0) targets.push({ idx: sampleIdx, off, size: sz });
off += sz;
}
}
if (targets.length < 5) return null;
// 배치 읽기(동시 64) + 파싱
const out: DjmdSample[] = [];
const BATCH = 64;
for (let i = 0; i < targets.length; i += BATCH) {
const batch = targets.slice(i, i + BATCH);
const parsed = await Promise.all(batch.map(async (t) => {
const dv = await readAt(file, t.off, t.size);
return parseSample(new Uint8Array(dv.buffer));
}));
for (const p of parsed) if (p) out.push(p);
}
out.sort((a, b) => a.frame - b.frame);
return out.length >= 5 ? out : null;
}
// ── DroneFrame 정밀 위치 병합 ─────────────────────────────────────────
/**
* CSV 기반 프레임의 위치/고도를 djmd(영상 내장, 프레임 동기) 값으로 교체하고,
* **자세(yaw/pitch/roll)도 CSV↔영상 시간 오프셋을 자동 추정해 재정렬**한다.
*
* 시간 오프셋 추정: CSV 위치(시각 정렬 가정)와 djmd 위치(프레임 동기 실측)를
* 교차상관해 평균 거리가 최소가 되는 dt 를 찾는다. 이 dt 로 자세를 재샘플하면
* 옆으로 지나치는 지물(상대 방위가 빠르게 변함)의 라벨 미끄러짐이 제거된다.
*
* 고도 datum: djmd 는 타원체고 —
* - useEllipsoidal(타원체고 데이터셋): 그대로 사용
* - 정표고 데이터셋: 첫 샘플과 CSV 첫 프레임의 차(지오이드고)를 빼서 정표고로 변환
*/
export async function refineFramesWithDjmd(
videoFile: File,
frames: DroneFrame[],
useEllipsoidal: boolean,
): Promise<DroneFrame[] | null> {
if (!frames.length) return null;
const samples = await parseDjmdPositions(videoFile);
if (!samples) return null;
const FPS = 59.94; // 프레임 번호 ↔ 시간 환산 (DJI_VIRTUAL_FPS 와 동일 기준)
// 정표고 데이터셋: 지오이드고 = djmd 타원체고 − CSV 고도 (같은 프레임 부근)
let altShift = 0;
if (!useEllipsoidal) {
const s0 = samples[0];
let nearest = frames[0];
for (const f of frames) if (Math.abs(f.frame - s0.frame) < Math.abs(nearest.frame - s0.frame)) nearest = f;
altShift = s0.altM - nearest.altitude;
if (!isFinite(altShift) || Math.abs(altShift) > 80) return null; // 비정상 → 사용 안 함
}
// 프레임 번호 기준 선형 보간 (djmd 위치)
const at = (frame: number): { lat: number; lon: number; altM: number } => {
let lo = 0, hi = samples.length - 1;
if (frame <= samples[0].frame) return samples[0];
if (frame >= samples[hi].frame) return samples[hi];
while (hi - lo > 1) { const m = (lo + hi) >> 1; if (samples[m].frame <= frame) lo = m; else hi = m; }
const a = samples[lo], b = samples[hi];
const t = b.frame > a.frame ? (frame - a.frame) / (b.frame - a.frame) : 0;
return {
lat: a.lat + (b.lat - a.lat) * t,
lon: a.lon + (b.lon - a.lon) * t,
altM: a.altM + (b.altM - a.altM) * t,
};
};
// ── CSV 시각(t=frame/FPS) 기준 보간 (위치+자세) — 시간 오프셋 추정·자세 재샘플용 ──
const ct = frames.map((f) => f.frame / FPS);
const cosLat = Math.cos((frames[0].lat * Math.PI) / 180);
const csvAt = (t: number): DroneFrame => {
const n = ct.length;
if (t <= ct[0]) return frames[0];
if (t >= ct[n - 1]) return frames[n - 1];
let lo = 0, hi = n - 1;
while (hi - lo > 1) { const m = (lo + hi) >> 1; if (ct[m] <= t) lo = m; else hi = m; }
const a = frames[lo], b = frames[hi];
const r = ct[hi] > ct[lo] ? (t - ct[lo]) / (ct[hi] - ct[lo]) : 0;
let dy = b.yaw - a.yaw; dy = ((dy + 540) % 360) - 180; // 최단각
return {
...a,
lat: a.lat + (b.lat - a.lat) * r,
lon: a.lon + (b.lon - a.lon) * r,
yaw: a.yaw + dy * r,
pitch: a.pitch + (b.pitch - a.pitch) * r,
roll: a.roll + (b.roll - a.roll) * r,
};
};
// CSV↔영상 시간 오프셋(dt) 추정 — 위치 교차상관 (조밀 50포인트, 조사 ±1.5s → 0.01s 정밀)
const stride = Math.max(1, Math.floor(samples.length / 50));
const probes = samples.filter((_, i) => i % stride === 0);
const cost = (dt: number): number => {
let s = 0, n = 0;
for (const p of probes) {
const c = csvAt(p.frame / FPS + dt);
s += Math.hypot((p.lat - c.lat) * 111000, (p.lon - c.lon) * 111000 * cosLat);
n++;
}
return n ? s / n : Infinity;
};
let bestDt = 0, bestC = cost(0);
for (let dt = -1.5; dt <= 1.5001; dt += 0.05) { const c = cost(dt); if (c < bestC) { bestC = c; bestDt = dt; } }
for (let dt = bestDt - 0.05; dt <= bestDt + 0.0501; dt += 0.01) { const c = cost(dt); if (c < bestC) { bestC = c; bestDt = dt; } }
if (Math.abs(bestDt) > 0.005) {
console.log(`[djmd] CSV↔영상 시간 오프셋 ${bestDt.toFixed(2)}s 추정 (잔차 ${bestC.toFixed(1)}m) — 자세 재정렬 적용`);
}
return frames.map((f) => {
const p = at(f.frame); // 위치/고도: djmd (프레임 동기)
const a = csvAt(f.frame / FPS + bestDt); // 자세: CSV 를 추정 오프셋으로 재시각화
return {
...f,
lat: p.lat, lon: p.lon, altitude: p.altM - altShift,
yaw: a.yaw, pitch: a.pitch, roll: a.roll,
};
});
}
client/src/utils/geoData.ts
+77 -2
View File
@@ -504,7 +504,21 @@ export async function parseKmz(
prevKey = key;
pts.push({ lat: p[1], lon: p[0], z: p.length >= 3 && isFinite(p[2]) ? p[2] : 0 });
}
if (pts.length >= 2 && pts.length > centerline.length) centerline = pts;
if (pts.length >= 2 && pts.length > centerline.length) {
// z 톱니 노이즈 평활 — 원본(지형고도 샘플링)의 ±1m 양자화 잔차가 인접 정점에서
// 부호 반전 톱니를 만들고, 영상의 낮은 시야각 투영에서 선이 지그재그로 꺾여 보임.
// 도로 종단 경사는 완만하므로 ±3점 이동평균으로 톱니만 제거(경사 보존).
const zs = pts.map((p) => p.z);
for (let i = 0; i < pts.length; i++) {
if (zs[i] <= 0) continue;
let sum = 0, cnt = 0;
for (let j = Math.max(0, i - 3); j <= Math.min(pts.length - 1, i + 3); j++) {
if (zs[j] > 0) { sum += zs[j]; cnt++; }
}
if (cnt) pts[i].z = sum / cnt;
}
centerline = pts;
}
return;
}
@@ -575,7 +589,7 @@ export async function parseKmz(
? Math.round(kmProp * 1000)
: staMatch ? parseInt(staMatch[1], 10) * 1000 + parseInt(staMatch[2], 10) : NaN;
if (!isFinite(meters)) return;
const title = `${Math.floor(meters / 1000)}k${String(meters % 1000).padStart(3, '0')}`;
const title = `${Math.floor(meters / 1000)}+${String(meters % 1000).padStart(3, '0')}`;
// z: 좌표 고도(DEM 기록값) 있으면 사용 — 없으면 0(미상, 오버레이가 경로표고 앵커).
stations.push({ title, category: '측점', lat, lon, z: coordAlt ?? 0, type: 'station', props });
return;
@@ -615,6 +629,67 @@ export async function parseKmz(
if (doc.documentElement) walk(doc.documentElement, '');
}
// 선형이 측점 POI 를 정확히 통과하도록 정비 — 측점 기준.
// ① 측점 위치를 선형 폴리라인에 '정점으로 삽입' (긴 직선 현 중간의 측점도 통과 보장 —
// 라벨과 선이 같은 점(lat/lon/z)을 투영하므로 어떤 카메라 자세에서도 화면에서 일치)
// ② 나머지 원본 정점 z 는 측점 z 의 체이니지 보간으로 교체 (톱니 평활 대체, 종단 = 측점)
const staZ = stations.filter((s) => isFinite(s.z) && s.z > 0);
if (centerline.length >= 2 && staZ.length >= 2) {
const cosLat = Math.cos((centerline[0].lat * Math.PI) / 180);
const ex = (p: { lat: number; lon: number }): number => (p.lon - centerline[0].lon) * 111320 * cosLat;
const ey = (p: { lat: number; lon: number }): number => (p.lat - centerline[0].lat) * 111320;
const cum: number[] = [0];
for (let i = 1; i < centerline.length; i++) {
cum.push(cum[i - 1] + Math.hypot(ex(centerline[i]) - ex(centerline[i - 1]), ey(centerline[i]) - ey(centerline[i - 1])));
}
// 측점 → 선형 세그먼트 투영 (선형에서 50m 이상 떨어진 측점은 제외)
const anchors: { s: number; z: number; seg: number; t: number; lat: number; lon: number }[] = [];
for (const st of staZ) {
const px = ex(st), py = ey(st);
let bestS = 0, bestD = Infinity, bestSeg = 0, bestT = 0;
for (let i = 0; i < centerline.length - 1; i++) {
const ax = ex(centerline[i]), ay = ey(centerline[i]);
const dx = ex(centerline[i + 1]) - ax, dy = ey(centerline[i + 1]) - ay;
const len2 = dx * dx + dy * dy;
const t = len2 > 0 ? Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / len2)) : 0;
const d = Math.hypot(px - (ax + dx * t), py - (ay + dy * t));
if (d < bestD) { bestD = d; bestS = cum[i] + Math.sqrt(len2) * t; bestSeg = i; bestT = t; }
}
if (bestD < 50) anchors.push({ s: bestS, z: st.z, seg: bestSeg, t: bestT, lat: st.lat, lon: st.lon });
}
anchors.sort((a, b) => a.s - b.s);
if (anchors.length >= 2) {
// ② 원본 정점 z ← 측점 체이니지 보간
for (let i = 0; i < centerline.length; i++) {
const s = cum[i];
if (s <= anchors[0].s) { centerline[i].z = anchors[0].z; continue; }
if (s >= anchors[anchors.length - 1].s) { centerline[i].z = anchors[anchors.length - 1].z; continue; }
let lo = 0, hi = anchors.length - 1;
while (hi - lo > 1) { const m = (lo + hi) >> 1; if (anchors[m].s <= s) lo = m; else hi = m; }
const a = anchors[lo], b = anchors[hi];
const r = b.s > a.s ? (s - a.s) / (b.s - a.s) : 0;
centerline[i].z = a.z + (b.z - a.z) * r;
}
// ① 측점 정점 삽입 — 세그먼트별로 t 순 삽입. 기존 정점과 1m 이내면 생략(중복 방지).
const rebuilt: CenterlinePoint[] = [];
let inserted = 0;
for (let i = 0; i < centerline.length; i++) {
rebuilt.push(centerline[i]);
if (i === centerline.length - 1) break;
const onSeg = anchors.filter((a) => a.seg === i).sort((a, b) => a.t - b.t);
for (const a of onSeg) {
const near = (p: CenterlinePoint): boolean =>
Math.hypot(ex(a) - ex(p), ey(a) - ey(p)) < 1;
if (near(centerline[i]) || near(centerline[i + 1])) continue;
rebuilt.push({ lat: a.lat, lon: a.lon, z: a.z });
inserted++;
}
}
centerline = rebuilt;
console.log(`[KML] 선형-측점 정합: 측점 정점 ${inserted}개 삽입 + 정점 z 를 측점 ${anchors.length}점 기준 재정렬`);
}
}
return { pois, structures, stations, centerline };
}
client/src/utils/geoProjection.ts
+3
View File
@@ -33,6 +33,8 @@ export interface DroneFrameBasic {
* offX/offY/offZ: 드론 위치 보정 — Python off_x/y/z 동치.
*/
export interface CameraParams {
timeOffsetSec?: number; // 영상↔비행로그 시간동기 보정(초). + = 로그를 뒤로 밀어 참조.
// POI 가 진행방향으로 일괄 밀릴 때 조정 — "풀 붙임" 정합의 핵심 값.
yawOffset: number; // yaw 오프셋 (degrees, per-frame SRT yaw에 더함)
pitch: number; // pitch 오프셋 (degrees, per-frame SRT pitch에 더함, 기본 0)
roll: number; // roll 오프셋 (degrees, per-frame SRT roll에 더함, 기본 0)
@@ -51,6 +53,7 @@ export interface CameraParams {
/** Python advanced_tuner_v2.py 기본값 */
export const DEFAULT_CAMERA_PARAMS: CameraParams = {
timeOffsetSec: 0,
yawOffset: 0,
pitch: 0, // offset, Python spn_pitch 기본값 0
roll: 0, // offset, Python spn_roll 기본값 0