제주 드론 도로영상 지원: DJI 로그 어댑터·분할영상 연속재생·카메라 자동감지·오버레이 개선
- 제주 DJI 시간기반 비행로그(CSV) 파싱 어댑터: 세그먼트 창 정렬, 가상 fps 환산 - 분할 영상(이름 오름차순) 연속재생 + 좌상단 영상목록 콤보(선택 재생), 세그먼트별 드론 로그 재정렬 - KML 다중 파일 병합 파싱: STA 체이니지 측점(71개) + 지장물 신포맷(타입/이름/텍스트박스_색상) - 시설물 라벨: 지정색 배경 박스 + 흰 글자, 팝업 중앙 정렬, 호버 구간 깜빡임 수정 - 카메라 자동감지(djmd: ZenmuseP1, focal 29.9mm) + <영상명>.camera.json PC 저장/폴더 자동 적용 - Yaw 자동추정(GPS 진행방위 기반) + 라벨 드래그 Yaw 역산 모드 - 스테이션바: GPS 이동거리 진행도(호버 시 정지), 노선밖 거리 표기, 원거리 구조물 마크 제외 - 서버: /api/camera 라우트, ecosystem 포트 54000·제주 데이터 경로 - docs/history: 작업 이력 21건 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -91,11 +91,26 @@ const CATEGORY_EMOJI: Record<string, string> = {
|
||||
'역사': '🚉',
|
||||
'철도역': '🚉',
|
||||
'지장물': '🏢',
|
||||
'지장물L': '🏢',
|
||||
'측점': '📍',
|
||||
'구교': '🌉',
|
||||
'출입문': '🚪',
|
||||
'교차로': '🚦',
|
||||
'도로': '🛣️',
|
||||
'강.하천': '🌊',
|
||||
'마을': '🏘️',
|
||||
'산': '⛰️',
|
||||
};
|
||||
|
||||
/** 라벨 색 밝기 판정 — 어두운 색이면 외곽선을 밝게 반전(가독성). */
|
||||
function isDarkLabelColor(hex: string): boolean {
|
||||
const m = hex.match(/^#([0-9a-f]{6})$/i);
|
||||
if (!m) return false;
|
||||
const n = parseInt(m[1], 16);
|
||||
const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
|
||||
return 0.299 * r + 0.587 * g + 0.114 * b < 96;
|
||||
}
|
||||
|
||||
// 영상 오버레이엔 모든 선로 구조물(교량/터널/구교)을 라벨로 표출한다.
|
||||
// 시설등급(시설종별) 표시 필터는 하단 스테이션바·RoutePanel 전용 → 영상은 항상 전부 표출.
|
||||
// (역사=철도역은 type='station'이라 여기 미포함 → 스테이션바 전용 유지.)
|
||||
@@ -113,8 +128,10 @@ const DISPLAY_DEFAULTS = {
|
||||
smoothSpeedRef: 0.010, // 즉시추종 기준 속도(클수록 더 강하게 평활)
|
||||
maxPoiRange: 1000,
|
||||
// false = 지면고도 기준(POI를 지면고도 z에 고정 → gap=드론고도−지면고도 자동변동, 드론 오르내려도 지물에 붙음).
|
||||
// 표고 미상(z=0) 라벨은 '경로 표고' 평면에 앵커 → 궤적과 같은 슬라이더로 함께 보정됨.
|
||||
// true = 드론−이격거리 고정(gap 상수). 드론 고도 변동 시 부정확.
|
||||
poiDroneHeight: true,
|
||||
// 기본 false: 실측 z(회덕)는 지물에 정확히 붙고, 미상(제주)은 경로표고로 일괄 보정 가능.
|
||||
poiDroneHeight: false,
|
||||
droneHeightDrop: 24,
|
||||
};
|
||||
|
||||
@@ -123,7 +140,7 @@ const DISPLAY_DEFAULTS = {
|
||||
// 포즈(poseAt)로 직접 투영 → 라인처럼 부드럽게 이동. (precompute = 가시성/겹침 결정 전용)
|
||||
interface LabelCache {
|
||||
stationLabels: { title: string; lat: number; lon: number; z: number }[];
|
||||
poiMarkers: { title: string; label: string; category: string; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; labelRow: number; labelRowCount: number }[];
|
||||
poiMarkers: { title: string; label: string; category: string; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; labelRow: number; labelRowCount: number; color?: string }[];
|
||||
}
|
||||
|
||||
// 중심선 + 나침반 렌더 캐시 (per-frame, renderCacheRef)
|
||||
@@ -322,6 +339,9 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// FOV(초점) 보정 모드: POI 라벨을 실제 위치로 끌면 그 대응점으로 focal 을 역산.
|
||||
const [fovMode, setFovMode] = useState(false);
|
||||
const fovModeRef = useRef(false);
|
||||
// Yaw 보정 모드: POI 라벨을 실제 위치(좌우)로 끌면 필요한 Yaw± 를 역산.
|
||||
const [yawMode, setYawMode] = useState(false);
|
||||
const yawModeRef = useRef(false);
|
||||
// 라벨 속성 팝업(다중) — 항상 활성(모드 버튼 없음). 라벨 위에서만 캔버스가 입력을 받아 클릭→팝업.
|
||||
// id=`${kind}:${title}`. 위치는 RAF 가 라벨 displayed 좌표로 매 프레임 갱신(재생 중 따라 이동).
|
||||
type InfoPopup = { id: string; kind: 'poi' | 'station'; title: string; category: string; lat: number; lon: number; z: number; dist: number | null; sx: number; sy: number; props?: { k: string; v: string }[];
|
||||
@@ -392,6 +412,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
useEffect(() => { maxPoiRangeRef.current = maxPoiRange; }, [maxPoiRange]);
|
||||
useEffect(() => { editModeRef.current = editMode; }, [editMode]);
|
||||
useEffect(() => { fovModeRef.current = fovMode; }, [fovMode]);
|
||||
useEffect(() => { yawModeRef.current = yawMode; }, [yawMode]);
|
||||
|
||||
// 컴팩트 자동 팝업 동기화 — visStructRef(연속 온스크린 라벨) 마다 라벨 옆 DOM 팝업을 자동 '생성'만.
|
||||
// 제거는 RAF 가 단일 권한(onScreenLabels + 4프레임 유예)으로 담당 → add/remove 충돌(번쩍임) 제거.
|
||||
@@ -480,27 +501,35 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
useEffect(() => { overlapExcludeRef.current = poiOverlapExclude; }, [poiOverlapExclude]);
|
||||
// 좌측 노선 패널(RoutePanel) 표시 토글은 하단 재생바(VideoPlayer)로 이동.
|
||||
const storeBaseName = useGeoStore(s => s.baseName);
|
||||
const storeCameraInfo = useGeoStore(s => s.cameraInfo);
|
||||
const storeCameraJson = useGeoStore(s => s.cameraJson);
|
||||
const storePoiOverrides = useGeoStore(s => s.poiOverrides);
|
||||
const setPoiOverride = useGeoStore(s => s.setPoiOverride);
|
||||
const setPoiOverrides = useGeoStore(s => s.setPoiOverrides);
|
||||
const clearPoiOverride = useGeoStore(s => s.clearPoiOverride);
|
||||
// 경로 표고 슬라이더 상한 — 데이터(중심선) 최대 지면표고 + 여유 (없으면 60 폴백)
|
||||
// 경로 표고 슬라이더 상한 — 데이터 최대 표고 + 여유 (없으면 60 폴백).
|
||||
// 중심선이 없거나 z=0 인 데이터셋(예: 제주 DJI 로그)은 드론 고도(ASL)가 유일한 상한 근거 —
|
||||
// 지면은 드론보다 낮으므로 max(드론고도)까지 열어두면 어떤 지형이든 슬라이더로 도달 가능.
|
||||
const pathZMax = useMemo(() => {
|
||||
let m = 0;
|
||||
for (const c of storeCenterline) if (typeof c.z === 'number' && c.z > m) m = c.z;
|
||||
for (const f of storeFrames) if (typeof f.altitude === 'number' && f.altitude > m) m = f.altitude;
|
||||
return m > 0 ? Math.ceil(m + 10) : 60;
|
||||
}, [storeCenterline]);
|
||||
}, [storeCenterline, storeFrames]);
|
||||
useEffect(() => { overridesRef.current = storePoiOverrides; }, [storePoiOverrides]);
|
||||
|
||||
// ── 보정값 영속화 (baseName별 localStorage) ──────────────────────────────
|
||||
// 카메라 각도/내부표정(Yaw±/Pitch±/focal 등) + 표시설정을 데이터셋별로 저장·복원.
|
||||
// 한 번 튜닝하면 새로고침/재로드해도 유지 → "처음부터 맞게" 표시.
|
||||
const calibLoadedFor = useRef<string | null>(null);
|
||||
// 이 데이터셋에 저장된 보정값이 있었는지 — 카메라 감지값 자동 적용 여부 판단(사용자 튜닝 우선).
|
||||
const calibHadSavedRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (!storeBaseName || calibLoadedFor.current === storeBaseName) return;
|
||||
calibLoadedFor.current = storeBaseName;
|
||||
try {
|
||||
const raw = localStorage.getItem(`ghivideo:calib:${storeBaseName}`);
|
||||
calibHadSavedRef.current = !!raw;
|
||||
if (!raw) return;
|
||||
const c = JSON.parse(raw);
|
||||
if (c.params && typeof c.params === 'object') setParams(p => ({ ...p, ...c.params }));
|
||||
@@ -525,6 +554,100 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
return () => clearTimeout(t);
|
||||
}, [storeBaseName, params, maxPoiRange, smoothHalf, emaAlpha, smoothMinAlpha, smoothSpeedRef]);
|
||||
|
||||
// 영상(djmd)에서 감지한 카메라 초점거리 자동 적용.
|
||||
// 사용자가 f 를 직접 튜닝한 값(기본값 24 가 아닌 저장값)만 우선하고, 그 외(첫 로드,
|
||||
// 또는 저장은 됐지만 f 가 기본값 그대로인 경우)는 감지값을 적용한다.
|
||||
// (보정 자동저장은 폴더를 열기만 해도 기본값으로 저장되므로 '저장 존재' 만으론 튜닝 여부 판단 불가)
|
||||
const camAppliedFor = useRef<string | null>(null);
|
||||
useEffect(() => {
|
||||
if (!storeBaseName || !storeCameraInfo?.focalLen35) return;
|
||||
if (camAppliedFor.current === storeBaseName) return;
|
||||
camAppliedFor.current = storeBaseName;
|
||||
const f = storeCameraInfo.focalLen35;
|
||||
const model = storeCameraInfo.model;
|
||||
setParams(p => {
|
||||
const focalTuned = calibHadSavedRef.current &&
|
||||
Math.abs(p.focalLen - DEFAULT_CAMERA_PARAMS.focalLen) > 0.01;
|
||||
if (focalTuned) {
|
||||
console.log(`[camera] ${model} 감지 (${f}mm) — 사용자 튜닝 f=${p.focalLen}mm 유지 (패널 '적용'으로 교체 가능)`);
|
||||
return p;
|
||||
}
|
||||
console.log(`[camera] ${model} 감지 → focal ${f}mm 자동 적용`);
|
||||
return { ...p, focalLen: f };
|
||||
});
|
||||
}, [storeBaseName, storeCameraInfo]);
|
||||
|
||||
// 폴더의 <영상 base>.camera.json 카메라 파라미터 — 최우선 적용(localStorage/감지값 위에).
|
||||
// 이 effect 는 calib 복원·감지값 적용 effect 뒤에 선언되어 함수형 업데이트가 마지막에 반영된다.
|
||||
const camJsonAppliedFor = useRef<string | null>(null);
|
||||
useEffect(() => {
|
||||
if (!storeBaseName || !storeCameraJson) return;
|
||||
if (camJsonAppliedFor.current === storeBaseName) return;
|
||||
camJsonAppliedFor.current = storeBaseName;
|
||||
const cam = storeCameraJson;
|
||||
setParams(p => {
|
||||
const next = { ...p };
|
||||
for (const [k, v] of Object.entries(cam)) {
|
||||
if (k in next && typeof v === 'number' && isFinite(v)) (next as unknown as Record<string, number>)[k] = v;
|
||||
}
|
||||
return next;
|
||||
});
|
||||
console.log('[camera] <base>.camera.json 파라미터 적용(최우선):', cam);
|
||||
}, [storeBaseName, storeCameraJson]);
|
||||
|
||||
// 현재 카메라 파라미터를 사용자 PC 에 <영상 base>.camera.json 으로 다운로드 저장.
|
||||
// Yaw±(자동추정/드래그 역산 결과) 포함 전체 파라미터가 담긴다.
|
||||
// 받은 파일을 영상 폴더에 넣어두면 다음 폴더 선택 때 최우선으로 자동 적용된다.
|
||||
const [camSaveState, setCamSaveState] = useState<'idle' | 'ok'>('idle');
|
||||
const saveCameraToPc = useCallback(() => {
|
||||
const geo = useGeoStore.getState();
|
||||
const videoName = geo.videoFiles[geo.videoIndex]?.name ?? (geo.baseName ? `${geo.baseName}.mp4` : 'camera.mp4');
|
||||
const base = videoName.replace(/\.[^.]+$/, '');
|
||||
const payload = {
|
||||
camera: paramsRef.current,
|
||||
model: geo.cameraInfo?.model,
|
||||
savedAt: new Date().toISOString(),
|
||||
};
|
||||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${base}.camera.json`;
|
||||
a.click();
|
||||
setTimeout(() => URL.revokeObjectURL(url), 5000);
|
||||
setCamSaveState('ok');
|
||||
setTimeout(() => setCamSaveState('idle'), 2500);
|
||||
}, []);
|
||||
|
||||
// Yaw 자동 추정 — 전진 비행 구간에서 GPS 진행 방위(정확) vs 짐벌 헤딩(나침반 오차 포함)의
|
||||
// 차이 중앙값을 Yaw± 로 설정. 카메라가 진행방향을 보며 촬영하는 도로 추종 비행 가정(근사치).
|
||||
const autoEstimateYaw = useCallback(() => {
|
||||
const frames = allDroneFramesRef.current;
|
||||
if (!frames || frames.length < 30) { alert('드론 로그가 부족해 자동 추정할 수 없습니다.'); return; }
|
||||
const fps = fpsRef.current;
|
||||
const cosLat = Math.cos((frames[0].lat * Math.PI) / 180);
|
||||
const STEP = 10; // 진행방위 계산 창(≈1초) — GPS 지터 평활
|
||||
const diffs: number[] = [];
|
||||
for (let i = STEP; i < frames.length; i++) {
|
||||
const a = frames[i - STEP], b = frames[i];
|
||||
const dt = (b.frame - a.frame) / fps;
|
||||
if (dt <= 0) continue;
|
||||
const dx = (b.lon - a.lon) * 111000 * cosLat;
|
||||
const dy = (b.lat - a.lat) * 111000;
|
||||
if (Math.hypot(dx, dy) / dt < 2) continue; // 정지/호버 구간 제외
|
||||
const course = (Math.atan2(dx, dy) * 180) / Math.PI; // 진행 방위 (North=0, CW)
|
||||
let d = course - frames[i - (STEP >> 1)].yaw; // 진행방위 − 짐벌 헤딩
|
||||
d = ((d + 540) % 360) - 180;
|
||||
if (Math.abs(d) < 60) diffs.push(d); // 옆을 보며 찍은 구간 제외
|
||||
}
|
||||
if (diffs.length < 20) { alert('전진 촬영 구간이 부족해 자동 추정할 수 없습니다.'); return; }
|
||||
diffs.sort((x, y) => x - y);
|
||||
const med = diffs[diffs.length >> 1];
|
||||
const next = Math.round(med * 10) / 10;
|
||||
setParam('yawOffset', next);
|
||||
console.log(`[yaw] 자동 추정: 유효 샘플 ${diffs.length}개, 중앙값 ${med.toFixed(2)}° → Yaw± ${next}° 적용`);
|
||||
}, [setParam]);
|
||||
|
||||
// POI 보정(override: DEM 표고/드래그)도 baseName별 자동 저장·복원 → 새로고침해도 유지.
|
||||
const ovLoadedFor = useRef<string | null>(null);
|
||||
useEffect(() => {
|
||||
@@ -728,6 +851,9 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const CLIP_Z = 0.1;
|
||||
const SMOOTH_HALF = currentSmoothHalf;
|
||||
const MAX_RANGE = currentMaxRange; // POI 표시 범위 — 드론 수평 직선거리(m)
|
||||
// 표고 미상(z=0) 라벨의 앵커 평면 — 드론 궤적과 동일한 '경로 표고' 값.
|
||||
// 사용자가 경로표고 슬라이더로 궤적을 도로에 맞추면 측점/POI 라벨도 함께 맞는다.
|
||||
const PATH_Z = dronePathZRef.current;
|
||||
|
||||
if (!frames.length) return;
|
||||
|
||||
@@ -752,20 +878,31 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const stationLabels: LabelCache['stationLabels'] = [];
|
||||
for (const st of allSt) {
|
||||
const snap = nearestCL(st.lat, st.lon);
|
||||
const slat = snap?.lat ?? st.lat, slon = snap?.lon ?? st.lon, sz = snap?.z ?? st.z;
|
||||
const slat = snap?.lat ?? st.lat, slon = snap?.lon ?? st.lon;
|
||||
const szRaw = snap?.z ?? st.z;
|
||||
// 표고 미상(0 이하)이면 경로표고 평면에 앵커 — 공중부양/시차 밀림 방지.
|
||||
const sz = szRaw > 0 ? szRaw : PATH_Z;
|
||||
const cc = toCameraCoords(drone, slat, slon, sz, currentParams, worldOrigin);
|
||||
if (cc.Zc < CLIP_Z) continue;
|
||||
// 측점도 POI 와 동일하게 표시 범위 제한 — 원거리(수 km) 측점이 수평선에 뭉치는 것 방지.
|
||||
if ((cc.distH ?? 0) > MAX_RANGE) continue;
|
||||
const { pxRaw, pyRaw } = pixelFromCamera(cc, currentParams);
|
||||
if (pxRaw < -0.05 || pxRaw > 1.05 || pyRaw < -0.05 || pyRaw > 1.05) continue;
|
||||
// 포함 경계 ±0.15 로 넉넉히 — 경계에 걸친 라벨이 호버(정지) 중 GPS 지터로
|
||||
// 캐시 프레임마다 들락거리며 깜빡이는 것 방지. 실제 화면 밖 컬링은 드로우가 담당.
|
||||
if (pxRaw < -0.15 || pxRaw > 1.15 || pyRaw < -0.15 || pyRaw > 1.15) continue;
|
||||
// 화면좌표 대신 (스냅된)월드좌표 저장 → RAF 가 연속 포즈로 재투영.
|
||||
stationLabels.push({ title: st.title, lat: slat, lon: slon, z: sz });
|
||||
}
|
||||
|
||||
// 후보 수집 (거리 dist + 월드좌표 + 지면고도 gz) → 겹침 억제용
|
||||
const poiCand: { x: number; y: number; title: string; label: string; category: string; dist: number; lat: number; lon: number; gz: number; compact: { k: string; v: string }[] }[] = [];
|
||||
const poiCand: { x: number; y: number; title: string; label: string; category: string; dist: number; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; color?: string }[] = [];
|
||||
for (const poi of allPoi) {
|
||||
// 지면고도 gz: 보정값(DEM/드래그) 또는 최근접 선로표고. RAF 투영 기준값.
|
||||
const gz = overridesRef.current[poi.title]?.z ?? nearestCL(poi.lat, poi.lon)?.z ?? poi.z;
|
||||
// 지면고도 gz: 보정값(DEM/드래그) → 최근접 선로표고(유효값) → POI 자체 z → 경로표고 앵커.
|
||||
// 표고 미상(0)인 데이터셋(제주)은 경로표고 평면에 앵커되어 궤적과 함께 보정된다.
|
||||
const clz = nearestCL(poi.lat, poi.lon)?.z;
|
||||
const gz = overridesRef.current[poi.title]?.z
|
||||
?? (clz !== undefined && clz > 0 ? clz : undefined)
|
||||
?? (poi.z > 0 ? poi.z : PATH_Z);
|
||||
// 가시성 판정용 poiZ: 드론높이 모드면 드론−이격거리, 아니면 gz.
|
||||
const poiZ = currentDroneHeight
|
||||
? drone.altitude - (currentParams.geoidOffset ?? 0) - currentDroneDrop
|
||||
@@ -775,13 +912,18 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// 표시 범위: 드론과의 수평 직선거리(distH)가 범위 안이면 표시, 밖이면 제외.
|
||||
if ((cc.distH ?? 0) > MAX_RANGE) continue;
|
||||
const { pxRaw, pyRaw } = pixelFromCamera(cc, currentParams);
|
||||
if (pxRaw < -0.02 || pxRaw > 1.02 || pyRaw < -0.02 || pyRaw > 1.02) continue;
|
||||
poiCand.push({ x: pxRaw, y: pyRaw, title: poi.title, label: guboonOf(poi.props) ?? cleanTitle(poi.title), category: poi.category, dist: cc.distH ?? 0, lat: poi.lat, lon: poi.lon, gz, compact: compactFieldsOf(poi.props) });
|
||||
// 포함 경계 ±0.15 — 경계 걸침 라벨의 호버 중 10Hz 깜빡임 방지(화면 밖 컬링은 드로우 담당).
|
||||
if (pxRaw < -0.15 || pxRaw > 1.15 || pyRaw < -0.15 || pyRaw > 1.15) continue;
|
||||
poiCand.push({ x: pxRaw, y: pyRaw, title: poi.title, label: guboonOf(poi.props) ?? cleanTitle(poi.title), category: poi.category, dist: cc.distH ?? 0, lat: poi.lat, lon: poi.lon, gz, compact: compactFieldsOf(poi.props), ...(poi.labelColor ? { color: poi.labelColor } : {}) });
|
||||
}
|
||||
// 겹침 억제: KAKAO_RAIL(철도역/역사) 라벨을 최우선 유지 → 겹치면 일반 POI 가 숨겨진다.
|
||||
// 같은 우선순위 내에서는 가까운(dist 작은) 것 우선. 임계 이내면 뒤(낮은우선/먼) 것 숨김.
|
||||
// 거리차 1m 미만은 제목순 고정 — 호버(정지) 중 GPS 지터로 승자가 프레임마다 뒤바뀌며
|
||||
// 라벨 쌍이 교대로 깜빡이는 것 방지.
|
||||
const railRank = (cat: string): number => (cat === '철도역' || cat === '역사' ? 0 : 1);
|
||||
poiCand.sort((a, b) => railRank(a.category) - railRank(b.category) || a.dist - b.dist);
|
||||
poiCand.sort((a, b) =>
|
||||
railRank(a.category) - railRank(b.category) ||
|
||||
(Math.abs(a.dist - b.dist) > 1 ? a.dist - b.dist : (a.title < b.title ? -1 : a.title > b.title ? 1 : 0)));
|
||||
// 겹침 시 진행방향 변형 우선: 같은 base 형제(예: 회덕제1가도교 상/하)가 겹치면
|
||||
// 하행='(하)' / 상행='(상)' 쪽을 남긴다(드론이 실제 지나는 선로). 무관한 POI엔 영향 없음.
|
||||
// 진행방향 변형 태그(닫는 괄호까지) — 하행='(하)', 상행='(상)'. '(하인상)' 등은 제외.
|
||||
@@ -816,7 +958,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const ck = coordKey(c);
|
||||
const row = groupSeen.get(ck) ?? 0;
|
||||
groupSeen.set(ck, row + 1);
|
||||
return { title: c.title, label: c.label, category: c.category, lat: c.lat, lon: c.lon, gz: c.gz, compact: c.compact, labelRow: row, labelRowCount: groupCount.get(ck) ?? 1 };
|
||||
return { title: c.title, label: c.label, category: c.category, lat: c.lat, lon: c.lon, gz: c.gz, compact: c.compact, labelRow: row, labelRowCount: groupCount.get(ck) ?? 1, ...(c.color ? { color: c.color } : {}) };
|
||||
});
|
||||
|
||||
newMap.set(drone.frame, { stationLabels, poiMarkers });
|
||||
@@ -841,17 +983,20 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
}, [nearestCL]);
|
||||
|
||||
// 모든 데이터 로드 완료 시 사전 계산 시작
|
||||
// storeFrames 의존 필수: 분할 영상 세그먼트 전환(loadSegment)으로 frames 가 교체되면
|
||||
// 라벨 캐시(프레임별 가시 POI)를 새 구간 기준으로 재계산해야 함 — 없으면 이전 세그먼트
|
||||
// 캐시가 남아 두 번째 영상부터 시설물이 표출되지 않는다.
|
||||
useEffect(() => {
|
||||
if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
|
||||
startLabelPrecompute(paramsRef.current, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop);
|
||||
}, [droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, poiOverlapExclude]);
|
||||
}, [droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, poiOverlapExclude, dronePathZ, storeFrames]);
|
||||
|
||||
// params / smoothHalf / maxPoiDist 변경 시 사전 계산 재시작 (500ms debounce)
|
||||
// params / smoothHalf / maxPoiDist / 경로표고(표고 미상 라벨 앵커) 변경 시 사전 계산 재시작 (500ms debounce)
|
||||
useEffect(() => {
|
||||
if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
|
||||
const timer = setTimeout(() => startLabelPrecompute(params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop), 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, storePois, storeStructures, droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, poiOverlapExclude]);
|
||||
}, [params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, storePois, storeStructures, droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, poiOverlapExclude, dronePathZ, storeFrames]);
|
||||
|
||||
// 현재 재생 시간 → 드론 프레임 ref 갱신
|
||||
useEffect(() => {
|
||||
@@ -1131,31 +1276,32 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const py = (prevDpoi?.ry !== undefined && Math.abs(psy0 - prevDpoi.ry) <= 0.75) ? prevDpoi.ry : Math.round(psy0);
|
||||
d.rx = px; d.ry = py;
|
||||
displayedPoiRef.current.set(poiA.title, d);
|
||||
const r = 10;
|
||||
// 십자 마커
|
||||
ctx.strokeStyle = '#64c8ff'; ctx.lineWidth = 2.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(px-r, py); ctx.lineTo(px+r, py);
|
||||
ctx.moveTo(px, py-r); ctx.lineTo(px, py+r);
|
||||
ctx.stroke();
|
||||
// 이모지 + 텍스트
|
||||
const emoji = CATEGORY_EMOJI[poiA.category] ?? '📌';
|
||||
// 텍스트 박스만 표출(십자 마커/이모지 아이콘 없음):
|
||||
// 배경 = KML 텍스트박스_색상(poiA.color, 없으면 기본 하늘색), 글자 = 흰색.
|
||||
// 박스는 POI 지점(px)에 가로 중앙 정렬.
|
||||
const boxCol = poiA.color ?? '#64c8ff';
|
||||
// 라벨: 속성에 '구분'이 있으면 그 값(원문 그대로), 없으면 cleanTitle(title). poiCand에서 확정.
|
||||
const label = `${emoji} ${poiA.label}`;
|
||||
const lx = Math.max(2, px + 14);
|
||||
// 동일좌표 라벨 세로 배치: 행 중앙을 십자에 맞춰 위→아래로 안 겹치게 오프셋.
|
||||
const ROW_H = 24;
|
||||
const label = poiA.label;
|
||||
// 동일좌표 라벨 세로 배치: 행 중앙을 지점에 맞춰 위→아래로 안 겹치게 오프셋.
|
||||
const ROW_H = 28;
|
||||
const labelY = py + (poiA.labelRow - (poiA.labelRowCount - 1) / 2) * ROW_H;
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 4;
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.strokeText(label, lx, labelY);
|
||||
ctx.fillStyle = '#64c8ff';
|
||||
ctx.fillText(label, lx, labelY);
|
||||
// 히트박스(십자 마커 ~ 글자 끝) — 아이콘·글자 어디를 눌러도 선택되게. (라벨 행 위치 기준)
|
||||
const tw = ctx.measureText(label).width;
|
||||
hitBoxes.push({ kind: 'poi', title: poiA.title, x0: px - r, y0: labelY - 13, x1: lx + tw + 2, y1: labelY + 13 });
|
||||
const poiVisible = labelOnScreen(px - r, labelY - 13, lx + tw + 2, labelY + 13);
|
||||
// 박스 높이 = 글자 크기(20px) × 1.2 — 라벨 상하 여유. 행 간격(ROW_H)도 같이 벌림.
|
||||
const PAD_X = 7, BOX_H = 24;
|
||||
const bx0 = Math.max(2, px - tw / 2 - PAD_X);
|
||||
const bx1 = bx0 + tw + PAD_X * 2;
|
||||
const by0 = labelY - BOX_H / 2, by1 = labelY + BOX_H / 2;
|
||||
ctx.fillStyle = boxCol;
|
||||
ctx.beginPath();
|
||||
if (typeof ctx.roundRect === 'function') ctx.roundRect(bx0, by0, bx1 - bx0, BOX_H, 5);
|
||||
else ctx.rect(bx0, by0, bx1 - bx0, BOX_H);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(label, bx0 + PAD_X, labelY);
|
||||
// 히트박스 = 텍스트 박스 영역 (어디를 눌러도 선택)
|
||||
hitBoxes.push({ kind: 'poi', title: poiA.title, x0: bx0, y0: by0 - 2, x1: bx1 + 2, y1: by1 + 2 });
|
||||
const poiVisible = labelOnScreen(bx0, by0, bx1, by1);
|
||||
if (poiVisible) onScreenLabels.add(`poi:${poiA.title}`);
|
||||
// 연속 온스크린 프레임 수 갱신(화면 밖이면 0으로 리셋).
|
||||
const streak = poiVisible ? (poiOnScreenStreakRef.current.get(poiA.title) ?? 0) + 1 : 0;
|
||||
@@ -1179,7 +1325,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
} // end if(cache) — 중심선/드론경로/측점/POI
|
||||
|
||||
// 편집/FOV 보정 모드: 드래그 중 마커 피드백 (마우스 따라다님)
|
||||
if ((editModeRef.current || fovModeRef.current) && dragRef.current && dragPosRef.current) {
|
||||
if ((editModeRef.current || fovModeRef.current || yawModeRef.current) && dragRef.current && dragPosRef.current) {
|
||||
const dx = vx(dragPosRef.current.x), dy = vy(dragPosRef.current.y);
|
||||
ctx.strokeStyle = '#ffe14d'; ctx.lineWidth = 2;
|
||||
ctx.beginPath(); ctx.arc(dx, dy, 14, 0, Math.PI * 2); ctx.stroke();
|
||||
@@ -1224,7 +1370,10 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// 잡으면 라벨 높이만큼 먹혀 팝업이 글자에 붙는다 → 라벨 '바깥 가장자리' 기준으로 띄운다.
|
||||
const LABEL_HALF = 15; // 라벨 반높이(px) — sy 중심 ± 이 값이 글자/아이콘 영역
|
||||
const GAP = 12; // 라벨 가장자리 ~ 팝업 사이 실제 여백
|
||||
const tx = Math.min(Math.max(8, sx - 10), Math.max(8, W - pw - 4));
|
||||
// POI 라벨은 지점(sx) 기준 가로 중앙 정렬 박스 → 팝업도 박스 중앙 아래로 정렬.
|
||||
// 측점 라벨은 마커 오른쪽으로 그려지므로 기존(좌측 여유 10px) 유지.
|
||||
const txRaw = kind === 'poi' ? sx - pw / 2 : sx - 10;
|
||||
const tx = Math.min(Math.max(8, txRaw), Math.max(8, W - pw - 4));
|
||||
// 기본은 라벨 '아래'. 아래 공간이 부족하면(화면 하단 근접) 라벨 '위'로 플립.
|
||||
// ※ 히스테리시스(sticky): 경계에서 sy 가 미세하게 오르내려도 위↔아래로 왕복하지 않도록,
|
||||
// '위'로 간 뒤엔 아래에 HYST 이상 여유가 생겨야만 '아래'로 복귀. (왕복=팝업 순간이동=번쩍임 방지)
|
||||
@@ -1299,7 +1448,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const { x: nx, y: ny } = clientToVideoNorm(e.clientX, e.clientY);
|
||||
|
||||
// 편집/세로화각 보정: POI 선택 + 드래그
|
||||
if (editModeRef.current || fovModeRef.current) {
|
||||
if (editModeRef.current || fovModeRef.current || yawModeRef.current) {
|
||||
const canvas = canvasRef.current; if (!canvas) return;
|
||||
const hit = hitTestLabel(nx, ny);
|
||||
if (!hit) return;
|
||||
@@ -1366,15 +1515,15 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
// 영상이 준비되기 전(폴더 선택 화면 등)엔 입력을 받지 않음 → 하위 UI(폴더 선택/드롭) 클릭 통과.
|
||||
if (!videoReady) { canvas.style.pointerEvents = 'none'; return; }
|
||||
canvas.style.pointerEvents = 'auto';
|
||||
canvas.style.cursor = (editMode || fovMode) ? 'move' : 'default';
|
||||
if (editMode || fovMode) { setInfoPopups([]); return; }
|
||||
canvas.style.cursor = (editMode || fovMode || yawMode) ? 'move' : 'default';
|
||||
if (editMode || fovMode || yawMode) { setInfoPopups([]); return; }
|
||||
const onMove = (e: MouseEvent) => {
|
||||
const { x: nx, y: ny } = clientToVideoNorm(e.clientX, e.clientY);
|
||||
canvas.style.cursor = hitTestLabel(nx, ny) ? 'pointer' : 'default';
|
||||
};
|
||||
parent.addEventListener('mousemove', onMove);
|
||||
return () => { parent.removeEventListener('mousemove', onMove); };
|
||||
}, [videoReady, editMode, fovMode, clientToVideoNorm, hitTestLabel]);
|
||||
}, [videoReady, editMode, fovMode, yawMode, clientToVideoNorm, hitTestLabel]);
|
||||
|
||||
const onPoiPointerUp = useCallback(() => {
|
||||
const drag = dragRef.current, pos = dragPosRef.current;
|
||||
@@ -1385,6 +1534,27 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
const drone = getSmoothedDrone(); if (!drone) return;
|
||||
const p = paramsRef.current, wo = worldOriginRef.current;
|
||||
|
||||
// ── Yaw(방위 오프셋) 보정 ──
|
||||
// 드롭한 화면점의 '가로'(px)만 맞춘다. 라벨의 절대 방위는 고정이므로,
|
||||
// 현재 카메라축 기준 수평각 θ0 = atan2(Xc, Zc) 과 드롭 지점이 요구하는
|
||||
// 수평각 θ1 = atan((px* − 0.5 − cx0)·sW / f) 의 차이만큼 카메라 방위를 돌리면 됨:
|
||||
// yawOffset_new = yawOffset_old + (θ0 − θ1)
|
||||
if (yawModeRef.current) {
|
||||
const poiZ = poiDroneHeightRef.current
|
||||
? drone.altitude - (p.geoidOffset ?? 0) - droneHeightDropRef.current
|
||||
: drag.z0;
|
||||
const cc = toCameraCoords(drone, drag.lat, drag.lon, poiZ, p, wo);
|
||||
if (cc.Zc < 0.1) return;
|
||||
const th0 = Math.atan2(cc.Xc, cc.Zc);
|
||||
const th1 = Math.atan(((pos.x - 0.5 - (p.cx0 ?? 0)) * (p.sensorW ?? 36)) / p.focalLen);
|
||||
const dYaw = (th0 - th1) * 180 / Math.PI;
|
||||
if (!isFinite(dYaw) || Math.abs(dYaw) > 45) { alert('보정량이 비정상적으로 큽니다 — 올바른 지물 위치로 끌었는지 확인하세요.'); return; }
|
||||
const next = Math.max(-180, Math.min(180, (p.yawOffset ?? 0) + dYaw));
|
||||
setParam('yawOffset', Math.round(next * 10) / 10);
|
||||
console.log(`[yaw] 드래그 역산: Δ${dYaw.toFixed(2)}° → Yaw± ${next.toFixed(1)}°`);
|
||||
return;
|
||||
}
|
||||
|
||||
// ── 세로 화각(sensorH) 보정 ──
|
||||
// 드롭한 화면점의 '세로'(py)만 맞춘다. 가로(f/sW)는 이미 정확하므로 건드리지 않음
|
||||
// (f 를 바꾸면 가로까지 틀어져 스테이션선이 좌우로 벗어남).
|
||||
@@ -1632,26 +1802,32 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
{poiDroneHeight ? `■ 드론 높이와 POI 이격거리 ${droneHeightDrop}m` : '▶ 드론 높이와 POI 이격거리'}
|
||||
</button>
|
||||
{poiDroneHeight && (
|
||||
<ParamRow label="이격거리" tip={`POI를 드론보다 ${droneHeightDrop}m 아래에 배치 (값↑ = POI 아래로)`} value={droneHeightDrop} min={0} max={120} step={1} unit="m" decimals={0} onChange={v => setDroneHeightDrop(Math.round(v))} />
|
||||
<ParamRow label="이격거리" tip={`POI를 드론보다 ${droneHeightDrop}m 아래에 배치 (값↑ = POI 아래로)`} value={droneHeightDrop} min={0} max={300} step={1} unit="m" decimals={0} onChange={v => setDroneHeightDrop(Math.round(v))} />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">POI 위치 편집 (마우스)
|
||||
<InfoTip text="드래그=수평위치 이동(가까운 프레임에서). 클릭 후 표고 슬라이더=높이. DEM(SRTM 30m)으로 각 POI 지점의 지면고도 적용(구글 지면고도와 일치). 옥상으로 뜨는 건물은 드래그/슬라이더로 보정. 자동저장." />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<button onClick={() => { setEditMode(v => { const nv = !v; if (nv) setFovMode(false); return nv; }); }}
|
||||
<button onClick={() => { setEditMode(v => { const nv = !v; if (nv) { setFovMode(false); setYawMode(false); } return nv; }); }}
|
||||
className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${editMode ? 'bg-yellow-500/80 border-yellow-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
|
||||
{editMode ? '■ 편집 종료' : '✎ 편집 모드 (POI 위치/표고)'}
|
||||
</button>
|
||||
<button onClick={() => { setFovMode(v => { const nv = !v; if (nv) setEditMode(false); return nv; }); }}
|
||||
<button onClick={() => { setFovMode(v => { const nv = !v; if (nv) { setEditMode(false); setYawMode(false); } return nv; }); }}
|
||||
className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${fovMode ? 'bg-purple-500/80 border-purple-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
|
||||
{fovMode ? '■ 세로화각 보정 종료' : '🎯 세로화각 보정 — POI를 실제 위치(상하)로 드래그'}
|
||||
<InfoTip text="라벨이 멀리(위)/가까이(아래)서 상하로 어긋날 때 사용. POI 하나를 영상 속 실제 위치로 끌면 세로 화각(sensorH)만 역산해 상하 정렬. 가로(초점 f)는 안 건드려 빨간 중심선이 좌우로 안 틀어짐. 세로 중심에서 충분히 떨어진(위/아래) POI로 보정." />
|
||||
</button>
|
||||
<button onClick={() => { setYawMode(v => { const nv = !v; if (nv) { setEditMode(false); setFovMode(false); } return nv; }); }}
|
||||
className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${yawMode ? 'bg-sky-500/80 border-sky-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
|
||||
{yawMode ? '■ Yaw 보정 종료' : '🧭 Yaw 보정 — POI를 실제 위치(좌우)로 드래그'}
|
||||
<InfoTip text="라벨 전체가 좌우로 치우칠 때 사용. POI 하나를 영상 속 실제 지물 위치로 끌면 필요한 Yaw±(방위 오프셋)를 역산해 자동 설정. 자동추정(비행경로) 후 마무리 미세조정에 적합." />
|
||||
</button>
|
||||
<div className="text-[10px] text-gray-600">ℹ️ 라벨 클릭 → 속성 팝업(여러 개 누적, 재생 따라 이동). 빈 곳 클릭 → 팝업 닫기, 팝업 없으면 재생/정지.</div>
|
||||
<div className="text-[10px] text-gray-500">
|
||||
{dragTitle ? `드래그 중: ${dragTitle}`
|
||||
: fovMode ? `🎯 POI를 실제 위치로 끌면 세로화각 자동보정 (현재 senH=${(params.sensorH ?? 20.25).toFixed(2)}mm)`
|
||||
: yawMode ? `🧭 POI를 실제 위치(좌우)로 끌면 Yaw 자동보정 (현재 Yaw±=${params.yawOffset.toFixed(1)}°)`
|
||||
: `보정된 POI ${Object.keys(storePoiOverrides).length}개`}
|
||||
</div>
|
||||
{editMode && selPoi && (
|
||||
@@ -1700,6 +1876,13 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
<div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-b border-gray-700 pb-2 mb-2">자세 보정 오프셋<span className="ml-1 text-gray-600">(SRT + offset)</span></div>
|
||||
<div className="space-y-2 mb-3">
|
||||
<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
|
||||
type="button"
|
||||
onClick={autoEstimateYaw}
|
||||
className="w-full text-[10px] px-2 py-0.5 rounded border border-gray-600 bg-gray-800 hover:bg-gray-700 text-gray-300"
|
||||
title="전진 비행 구간의 GPS 진행 방위와 짐벌 헤딩 차이(중앙값)로 Yaw± 자동 설정 (근사) — 이후 'Yaw 보정' 드래그로 미세 조정"
|
||||
>Yaw 자동추정 (비행경로 기준)</button>
|
||||
<ParamRow label="Pitch ±" value={params.pitch} min={-45} max={45} step={0.1} unit="°" decimals={1} onChange={v => setParam('pitch', v)} />
|
||||
<ParamRow label="Roll ±" value={params.roll} min={-45} max={45} step={0.1} unit="°" decimals={1} onChange={v => setParam('roll', v)} />
|
||||
</div>
|
||||
@@ -1712,6 +1895,30 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
|
||||
<div className="text-[10px] text-gray-600 text-right">정표고→타원체고 (대전≈25.8)</div>
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">내부표정 (초점·주점·센서)</div>
|
||||
{/* 영상(djmd) 자동 감지 정보 + 카메라값 서버 저장('<영상 base>.camera.json' — 재로드 시 자동 적용) */}
|
||||
<div className="flex items-center justify-between gap-1 mb-1.5 text-[10px] text-gray-400">
|
||||
<span className="truncate" title="영상 메타데이터(djmd)에서 감지된 카메라 정보">
|
||||
📷 {storeCameraInfo
|
||||
? `${storeCameraInfo.model}${storeCameraInfo.focalLen35 ? ` · ${storeCameraInfo.focalLen35}mm` : ''}${storeCameraInfo.fps ? ` · ${storeCameraInfo.fps}fps` : ''}`
|
||||
: '카메라 미감지'}
|
||||
</span>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
{storeCameraInfo?.focalLen35 !== undefined && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setParams(p => ({ ...p, focalLen: storeCameraInfo!.focalLen35! }))}
|
||||
className="px-1.5 py-0.5 rounded border border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200"
|
||||
title={`감지된 초점거리 ${storeCameraInfo!.focalLen35}mm 를 f 에 적용`}
|
||||
>적용</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={saveCameraToPc}
|
||||
className={`px-1.5 py-0.5 rounded border ${camSaveState === 'ok' ? 'border-emerald-400 bg-emerald-700/60 text-emerald-100' : 'border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
|
||||
title="현재 카메라 파라미터(Yaw± 보정 포함 전체)를 <영상이름>.camera.json 으로 PC에 다운로드 — 영상 폴더에 넣어두면 폴더 선택 시 자동 적용"
|
||||
>{camSaveState === 'ok' ? '저장됨 ✓' : 'PC에 저장'}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 mb-3">
|
||||
<ParamRow label="f" value={params.focalLen} min={10} max={100} step={0.1} unit="mm" decimals={1} onChange={v => setParam('focalLen', v)} />
|
||||
<ParamRow label="cx₀" value={params.cx0} min={-0.5} max={0.5} step={0.005} unit="" decimals={3} onChange={v => setParam('cx0', v)} />
|
||||
|
||||
Reference in New Issue
Block a user