gc/gc-wing
1
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동

feature/dual-rendering #12

병합
htlee feature/dual-rendering 에서 develop 로 21 commits 를 머지했습니다 2026-02-16 16:26:11 +09:00
대화 0 커밋 21 파일 변경됨 26 +869 -721
26개의 변경된 파일과 869개의 추가작업 그리고 721개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
CLAUDE.md
파일 보기

@ -2,34 +2,22 @@
## 프로젝트 개요 ## 프로젝트 개요
- **타입**: React + TypeScript + Vite (모노레포) - **타입**: React 19 + TypeScript 5.9 + Vite 7 (모노레포)
- **Node.js**: `.node-version` 참조 (v24) - **Node.js**: `.node-version` 참조 (v24)
- **패키지 매니저**: npm (workspaces) - **패키지 매니저**: npm (workspaces)
- **구조**: apps/web (프론트엔드) + apps/api (백엔드 API) - **구조**: apps/web (프론트엔드) + apps/api (백엔드 API 프록시)
## 빌드 및 실행 ## 빌드 및 실행
```bash ```bash
# 의존성 설치 npm install # 의존성 설치
npm install npm run dev # 전체 개발 서버
npm run dev:web # 프론트엔드 (Vite)
# 전체 개발 서버 npm run dev:api # 백엔드 (Fastify + tsx watch)
npm run dev npm run build # 전체 빌드 (web + api)
npm run build:web # 프론트엔드만
# 개별 개발 서버 npm run lint # apps/web ESLint
npm run dev:web # 프론트엔드 (Vite) npm run prepare:data # 정적 데이터 준비
npm run dev:api # 백엔드 (Fastify + tsx watch)
# 빌드
npm run build # 전체 빌드 (web + api)
npm run build:web # 프론트엔드만
npm run build:api # 백엔드만
# 린트
npm run lint # apps/web ESLint
# 데이터 준비
npm run prepare:data
``` ```
## 프로젝트 구조 ## 프로젝트 구조
@ -37,19 +25,18 @@ npm run prepare:data
``` ```
gc-wing-dev/ gc-wing-dev/
├── apps/ ├── apps/
│ ├── web/ # React 19 + Vite 7 + MapLibre + Deck.gl │ ├── web/ # @wing/web - React 19 + Vite 7
│ │ └── src/ │ │ └── src/
│ │ ├── app/ # App.tsx, styles │ │ ├── app/ # App.tsx, styles.css
│ │ ├── entities/ # 도메인 모델 (vessel, zone, aisTarget, legacyVessel) │ │ ├── entities/ # 도메인 모델 (aisTarget, vessel, zone, legacyVessel, subcable)
│ │ ├── features/ # 기능 단위 (mapToggles, typeFilter, aisPolling 등) │ │ ├── features/ # 기능 모듈 (aisPolling, legacyDashboard, map3dSettings, mapSettings, mapToggles, typeFilter)
│ │ ├── pages/ # 페이지 (DashboardPage) │ │ ├── pages/ # dashboard, login, denied, pending
│ │ ├── shared/ # 공통 유틸 (lib/geo, lib/color, lib/map) │ │ ├── shared/ # auth (Google OAuth), lib (geo, color, map), hooks (usePersistedState)
│ │ └── widgets/ # UI 위젯 (map3d, vesselList, info, alarms 등) │ │ └── widgets/ # map3d, vesselList, info, alarms, relations, aisInfo, aisTargetList, topbar, speed, legend, subcableInfo
│ └── api/ # Fastify 5 + TypeScript │ └── api/ # @wing/api - Fastify 5
│ └── src/ │ └── src/index.ts # AIS 프록시 + zones 엔드포인트
│ └── index.ts
├── data/ # 정적 데이터 ├── data/ # 정적 데이터
├── scripts/ # 빌드 스크립트 (prepare-zones, prepare-legacy) ├── scripts/ # prepare-zones.mjs, prepare-legacy.mjs
└── legacy/ # 레거시 데이터 └── legacy/ # 레거시 데이터
``` ```
@ -59,6 +46,7 @@ gc-wing-dev/
|------|------| |------|------|
| 프론트엔드 | React 19, Vite 7, TypeScript 5.9 | | 프론트엔드 | React 19, Vite 7, TypeScript 5.9 |
| 지도 | MapLibre GL JS 5, Deck.gl 9 | | 지도 | MapLibre GL JS 5, Deck.gl 9 |
| 인증 | Google OAuth (AuthProvider + ProtectedRoute) |
| 백엔드 | Fastify 5, TypeScript | | 백엔드 | Fastify 5, TypeScript |
| 린트 | ESLint 9, Prettier | | 린트 | ESLint 9, Prettier |

1
apps/web/src/app/styles.css
파일 보기

@ -105,6 +105,7 @@ body {
.map-area { .map-area {
position: relative; position: relative;
background: #010610;
} }
.sb { .sb {

32
apps/web/src/entities/aisTarget/api/searchChnprmship.ts Normal file
파일 보기

@ -0,0 +1,32 @@
import type { AisTargetSearchResponse } from '../model/types';
export async function searchChnprmship(
params: { minutes: number },
signal?: AbortSignal,
): Promise<AisTargetSearchResponse> {
const base = (import.meta.env.VITE_API_URL || '/snp-api').replace(/\/$/, '');
const u = new URL(`${base}/api/ais-target/chnprmship`, window.location.origin);
u.searchParams.set('minutes', String(params.minutes));
const res = await fetch(u, { signal, headers: { accept: 'application/json' } });
const txt = await res.text();
let json: unknown = null;
try {
json = JSON.parse(txt);
} catch {
// ignore
}
if (!res.ok) {
const msg =
json && typeof json === 'object' && typeof (json as { message?: unknown }).message === 'string'
? (json as { message: string }).message
: txt.slice(0, 200) || res.statusText;
throw new Error(`chnprmship API failed: ${res.status} ${msg}`);
}
if (!json || typeof json !== 'object') throw new Error('chnprmship API returned invalid payload');
const parsed = json as AisTargetSearchResponse;
if (!parsed.success) throw new Error(parsed.message || 'chnprmship API returned success=false');
return parsed;
}

109
apps/web/src/features/aisPolling/useAisTargetPolling.ts
파일 보기

@ -1,5 +1,6 @@
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { searchAisTargets } from "../../entities/aisTarget/api/searchAisTargets"; import { searchAisTargets } from "../../entities/aisTarget/api/searchAisTargets";
import { searchChnprmship } from "../../entities/aisTarget/api/searchChnprmship";
import type { AisTarget } from "../../entities/aisTarget/model/types"; import type { AisTarget } from "../../entities/aisTarget/model/types";
export type AisPollingStatus = "idle" | "loading" | "ready" | "error"; export type AisPollingStatus = "idle" | "loading" | "ready" | "error";
@ -17,14 +18,21 @@ export type AisPollingSnapshot = {
}; };
export type AisPollingOptions = { export type AisPollingOptions = {
initialMinutes?: number; /** 초기 chnprmship API 호출 시 minutes (기본 120) */
bootstrapMinutes?: number; chnprmshipMinutes?: number;
/** 주기적 폴링 시 search API minutes (기본 2) */
incrementalMinutes?: number; incrementalMinutes?: number;
/** 폴링 주기 ms (기본 60_000) */
intervalMs?: number; intervalMs?: number;
/** 보존 기간 (기본 chnprmshipMinutes) */
retentionMinutes?: number; retentionMinutes?: number;
/** incremental 폴링 시 bbox 필터 */
bbox?: string; bbox?: string;
/** incremental 폴링 시 중심 경도 */
centerLon?: number; centerLon?: number;
/** incremental 폴링 시 중심 위도 */
centerLat?: number; centerLat?: number;
/** incremental 폴링 시 반경(m) */
radiusMeters?: number; radiusMeters?: number;
enabled?: boolean; enabled?: boolean;
}; };
@ -112,11 +120,10 @@ function pruneStore(store: Map<number, AisTarget>, retentionMinutes: number, bbo
} }
export function useAisTargetPolling(opts: AisPollingOptions = {}) { export function useAisTargetPolling(opts: AisPollingOptions = {}) {
const initialMinutes = opts.initialMinutes ?? 60; const chnprmshipMinutes = opts.chnprmshipMinutes ?? 120;
const bootstrapMinutes = opts.bootstrapMinutes ?? initialMinutes; const incrementalMinutes = opts.incrementalMinutes ?? 2;
const incrementalMinutes = opts.incrementalMinutes ?? 1;
const intervalMs = opts.intervalMs ?? 60_000; const intervalMs = opts.intervalMs ?? 60_000;
const retentionMinutes = opts.retentionMinutes ?? initialMinutes; const retentionMinutes = opts.retentionMinutes ?? chnprmshipMinutes;
const enabled = opts.enabled ?? true; const enabled = opts.enabled ?? true;
const bbox = opts.bbox; const bbox = opts.bbox;
const centerLon = opts.centerLon; const centerLon = opts.centerLon;
@ -146,50 +153,60 @@ export function useAisTargetPolling(opts: AisPollingOptions = {}) {
const controller = new AbortController(); const controller = new AbortController();
const generation = ++generationRef.current; const generation = ++generationRef.current;
async function run(minutes: number, context: "bootstrap" | "initial" | "incremental") { function applyResult(res: { data: AisTarget[]; message: string }, minutes: number) {
if (cancelled || generation !== generationRef.current) return;
const { inserted, upserted } = upsertByMmsi(storeRef.current, res.data);
const deleted = pruneStore(storeRef.current, retentionMinutes, bbox);
const total = storeRef.current.size;
setSnapshot({
status: "ready",
error: null,
lastFetchAt: new Date().toISOString(),
lastFetchMinutes: minutes,
lastMessage: res.message,
total,
lastUpserted: upserted,
lastInserted: inserted,
lastDeleted: deleted,
});
setRev((r) => r + 1);
}
async function runInitial(minutes: number) {
try { try {
setSnapshot((s) => ({ ...s, status: s.status === "idle" ? "loading" : s.status, error: null })); setSnapshot((s) => ({ ...s, status: "loading", error: null }));
const res = await searchChnprmship({ minutes }, controller.signal);
const res = await searchAisTargets( applyResult(res, minutes);
{
minutes,
bbox,
centerLon,
centerLat,
radiusMeters,
},
controller.signal,
);
if (cancelled || generation !== generationRef.current) return;
const { inserted, upserted } = upsertByMmsi(storeRef.current, res.data);
const deleted = pruneStore(storeRef.current, retentionMinutes, bbox);
const total = storeRef.current.size;
const lastFetchAt = new Date().toISOString();
setSnapshot({
status: "ready",
error: null,
lastFetchAt,
lastFetchMinutes: minutes,
lastMessage: res.message,
total,
lastUpserted: upserted,
lastInserted: inserted,
lastDeleted: deleted,
});
setRev((r) => r + 1);
} catch (e) { } catch (e) {
if (cancelled || generation !== generationRef.current) return; if (cancelled || generation !== generationRef.current) return;
setSnapshot((s) => ({ setSnapshot((s) => ({
...s, ...s,
status: context === "incremental" ? s.status : "error", status: "error",
error: e instanceof Error ? e.message : String(e), error: e instanceof Error ? e.message : String(e),
})); }));
} }
} }
// Reset store when polling config changes (bbox, retention, etc). async function runIncremental(minutes: number) {
try {
setSnapshot((s) => ({ ...s, error: null }));
const res = await searchAisTargets(
{ minutes, bbox, centerLon, centerLat, radiusMeters },
controller.signal,
);
applyResult(res, minutes);
} catch (e) {
if (cancelled || generation !== generationRef.current) return;
setSnapshot((s) => ({
...s,
error: e instanceof Error ? e.message : String(e),
}));
}
}
// Reset store when polling config changes.
storeRef.current = new Map(); storeRef.current = new Map();
setSnapshot({ setSnapshot({
status: "loading", status: "loading",
@ -204,12 +221,11 @@ export function useAisTargetPolling(opts: AisPollingOptions = {}) {
}); });
setRev((r) => r + 1); setRev((r) => r + 1);
void run(bootstrapMinutes, "bootstrap"); // 초기 로드: chnprmship API 1회 호출
if (bootstrapMinutes !== initialMinutes) { void runInitial(chnprmshipMinutes);
void run(initialMinutes, "initial");
}
const id = window.setInterval(() => void run(incrementalMinutes, "incremental"), intervalMs); // 주기적 폴링: search API로 incremental 업데이트
const id = window.setInterval(() => void runIncremental(incrementalMinutes), intervalMs);
return () => { return () => {
cancelled = true; cancelled = true;
@ -217,8 +233,7 @@ export function useAisTargetPolling(opts: AisPollingOptions = {}) {
window.clearInterval(id); window.clearInterval(id);
}; };
}, [ }, [
initialMinutes, chnprmshipMinutes,
bootstrapMinutes,
incrementalMinutes, incrementalMinutes,
intervalMs, intervalMs,
retentionMinutes, retentionMinutes,

97
apps/web/src/pages/dashboard/DashboardPage.tsx
파일 보기

@ -1,5 +1,6 @@
import { useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useAuth } from "../../shared/auth"; import { useAuth } from "../../shared/auth";
import { usePersistedState } from "../../shared/hooks";
import { useAisTargetPolling } from "../../features/aisPolling/useAisTargetPolling"; import { useAisTargetPolling } from "../../features/aisPolling/useAisTargetPolling";
import { Map3DSettingsToggles } from "../../features/map3dSettings/Map3DSettingsToggles"; import { Map3DSettingsToggles } from "../../features/map3dSettings/Map3DSettingsToggles";
import type { MapToggleState } from "../../features/mapToggles/MapToggles"; import type { MapToggleState } from "../../features/mapToggles/MapToggles";
@ -19,6 +20,7 @@ import { AisTargetList } from "../../widgets/aisTargetList/AisTargetList";
import { AlarmsPanel } from "../../widgets/alarms/AlarmsPanel"; import { AlarmsPanel } from "../../widgets/alarms/AlarmsPanel";
import { MapLegend } from "../../widgets/legend/MapLegend"; import { MapLegend } from "../../widgets/legend/MapLegend";
import { Map3D, type BaseMapId, type Map3DSettings, type MapProjectionId } from "../../widgets/map3d/Map3D"; import { Map3D, type BaseMapId, type Map3DSettings, type MapProjectionId } from "../../widgets/map3d/Map3D";
import type { MapViewState } from "../../widgets/map3d/types";
import { RelationsPanel } from "../../widgets/relations/RelationsPanel"; import { RelationsPanel } from "../../widgets/relations/RelationsPanel";
import { SpeedProfilePanel } from "../../widgets/speed/SpeedProfilePanel"; import { SpeedProfilePanel } from "../../widgets/speed/SpeedProfilePanel";
import { Topbar } from "../../widgets/topbar/Topbar"; import { Topbar } from "../../widgets/topbar/Topbar";
@ -29,6 +31,7 @@ import { MapSettingsPanel } from "../../features/mapSettings/MapSettingsPanel";
import { DepthLegend } from "../../widgets/legend/DepthLegend"; import { DepthLegend } from "../../widgets/legend/DepthLegend";
import { DEFAULT_MAP_STYLE_SETTINGS } from "../../features/mapSettings/types"; import { DEFAULT_MAP_STYLE_SETTINGS } from "../../features/mapSettings/types";
import type { MapStyleSettings } from "../../features/mapSettings/types"; import type { MapStyleSettings } from "../../features/mapSettings/types";
import { fmtDateTimeFull, fmtIsoFull } from "../../shared/lib/datetime";
import { import {
buildLegacyHitMap, buildLegacyHitMap,
computeCountsByType, computeCountsByType,
@ -48,13 +51,6 @@ const AIS_CENTER = {
radiusMeters: 2_000_000, radiusMeters: 2_000_000,
}; };
function fmtLocal(iso: string | null) {
if (!iso) return "-";
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return iso;
return d.toLocaleString("ko-KR", { hour12: false });
}
type Bbox = [number, number, number, number]; // [lonMin, latMin, lonMax, latMax] type Bbox = [number, number, number, number]; // [lonMin, latMin, lonMax, latMax]
type FleetRelationSortMode = "count" | "range"; type FleetRelationSortMode = "count" | "range";
@ -87,11 +83,10 @@ export function DashboardPage() {
const [apiBbox, setApiBbox] = useState<string | undefined>(undefined); const [apiBbox, setApiBbox] = useState<string | undefined>(undefined);
const { targets, snapshot } = useAisTargetPolling({ const { targets, snapshot } = useAisTargetPolling({
initialMinutes: 60, chnprmshipMinutes: 120,
bootstrapMinutes: 10,
incrementalMinutes: 2, incrementalMinutes: 2,
intervalMs: 60_000, intervalMs: 60_000,
retentionMinutes: 90, retentionMinutes: 120,
bbox: useApiBbox ? apiBbox : undefined, bbox: useApiBbox ? apiBbox : undefined,
centerLon: useApiBbox ? undefined : AIS_CENTER.lon, centerLon: useApiBbox ? undefined : AIS_CENTER.lon,
centerLat: useApiBbox ? undefined : AIS_CENTER.lat, centerLat: useApiBbox ? undefined : AIS_CENTER.lat,
@ -104,55 +99,54 @@ export function DashboardPage() {
const [hoveredFleetMmsiSet, setHoveredFleetMmsiSet] = useState<number[]>([]); const [hoveredFleetMmsiSet, setHoveredFleetMmsiSet] = useState<number[]>([]);
const [hoveredPairMmsiSet, setHoveredPairMmsiSet] = useState<number[]>([]); const [hoveredPairMmsiSet, setHoveredPairMmsiSet] = useState<number[]>([]);
const [hoveredFleetOwnerKey, setHoveredFleetOwnerKey] = useState<string | null>(null); const [hoveredFleetOwnerKey, setHoveredFleetOwnerKey] = useState<string | null>(null);
const [typeEnabled, setTypeEnabled] = useState<Record<VesselTypeCode, boolean>>({ const uid = null;
PT: true, const [typeEnabled, setTypeEnabled] = usePersistedState<Record<VesselTypeCode, boolean>>(
"PT-S": true, uid, 'typeEnabled', { PT: true, "PT-S": true, GN: true, OT: true, PS: true, FC: true },
GN: true, );
OT: true, const [showTargets, setShowTargets] = usePersistedState(uid, 'showTargets', true);
PS: true, const [showOthers, setShowOthers] = usePersistedState(uid, 'showOthers', false);
FC: true,
});
const [showTargets, setShowTargets] = useState(true);
const [showOthers, setShowOthers] = useState(false);
// 레거시 베이스맵 비활성 — 향후 위성/라이트 등 추가 시 재활용 // 레거시 베이스맵 비활성 — 향후 위성/라이트 등 추가 시 재활용
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const [baseMap, _setBaseMap] = useState<BaseMapId>("enhanced"); const [baseMap, _setBaseMap] = useState<BaseMapId>("enhanced");
const [projection, setProjection] = useState<MapProjectionId>("mercator"); // 항상 mercator로 시작 — 3D 전환은 globe 레이어 준비 후 사용자가 수동 전환
const [mapStyleSettings, setMapStyleSettings] = useState<MapStyleSettings>(DEFAULT_MAP_STYLE_SETTINGS); const [projection, setProjection] = useState<MapProjectionId>('mercator');
const [mapStyleSettings, setMapStyleSettings] = usePersistedState<MapStyleSettings>(uid, 'mapStyleSettings', DEFAULT_MAP_STYLE_SETTINGS);
const [overlays, setOverlays] = useState<MapToggleState>({ const [overlays, setOverlays] = usePersistedState<MapToggleState>(uid, 'overlays', {
pairLines: true, pairLines: true, pairRange: true, fcLines: true, zones: true,
pairRange: true, fleetCircles: true, predictVectors: true, shipLabels: true, subcables: false,
fcLines: true,
zones: true,
fleetCircles: true,
predictVectors: true,
shipLabels: true,
subcables: false,
}); });
const [fleetRelationSortMode, setFleetRelationSortMode] = useState<FleetRelationSortMode>("count"); const [fleetRelationSortMode, setFleetRelationSortMode] = usePersistedState<FleetRelationSortMode>(uid, 'sortMode', "count");
const [alarmKindEnabled, setAlarmKindEnabled] = useState<Record<LegacyAlarmKind, boolean>>(() => { const [alarmKindEnabled, setAlarmKindEnabled] = usePersistedState<Record<LegacyAlarmKind, boolean>>(
return Object.fromEntries(LEGACY_ALARM_KINDS.map((k) => [k, true])) as Record<LegacyAlarmKind, boolean>; uid, 'alarmKindEnabled',
}); () => Object.fromEntries(LEGACY_ALARM_KINDS.map((k) => [k, true])) as Record<LegacyAlarmKind, boolean>,
);
const [fleetFocus, setFleetFocus] = useState<{ id: string | number; center: [number, number]; zoom?: number } | undefined>(undefined); const [fleetFocus, setFleetFocus] = useState<{ id: string | number; center: [number, number]; zoom?: number } | undefined>(undefined);
const [hoveredCableId, setHoveredCableId] = useState<string | null>(null); const [hoveredCableId, setHoveredCableId] = useState<string | null>(null);
const [selectedCableId, setSelectedCableId] = useState<string | null>(null); const [selectedCableId, setSelectedCableId] = useState<string | null>(null);
const [settings, setSettings] = useState<Map3DSettings>({ const [settings, setSettings] = usePersistedState<Map3DSettings>(uid, 'map3dSettings', {
showShips: true, showShips: true, showDensity: false, showSeamark: false,
showDensity: false,
showSeamark: false,
}); });
const [mapView, setMapView] = usePersistedState<MapViewState | null>(uid, 'mapView', null);
const [isProjectionLoading, setIsProjectionLoading] = useState(false); const [isProjectionLoading, setIsProjectionLoading] = useState(false);
// 초기값 false: globe 레이어가 백그라운드에서 준비될 때까지 토글 비활성화
const [isGlobeShipsReady, setIsGlobeShipsReady] = useState(false);
const handleProjectionLoadingChange = useCallback((loading: boolean) => {
setIsProjectionLoading(loading);
}, []);
const showMapLoader = isProjectionLoading;
// globe 레이어 미준비 또는 전환 중일 때 토글 비활성화
const isProjectionToggleDisabled = !isGlobeShipsReady || isProjectionLoading;
const [clock, setClock] = useState(() => new Date().toLocaleString("ko-KR", { hour12: false })); const [clock, setClock] = useState(() => fmtDateTimeFull(new Date()));
useEffect(() => { useEffect(() => {
const id = window.setInterval(() => setClock(new Date().toLocaleString("ko-KR", { hour12: false })), 1000); const id = window.setInterval(() => setClock(fmtDateTimeFull(new Date())), 1000);
return () => window.clearInterval(id); return () => window.clearInterval(id);
}, []); }, []);
@ -367,10 +361,10 @@ export function DashboardPage() {
지도 표시 설정 지도 표시 설정
<div style={{ flex: 1 }} /> <div style={{ flex: 1 }} />
<div <div
className={`tog-btn ${projection === "globe" ? "on" : ""}`} className={`tog-btn ${projection === "globe" ? "on" : ""}${isProjectionToggleDisabled ? " disabled" : ""}`}
onClick={() => setProjection((p) => (p === "globe" ? "mercator" : "globe"))} onClick={isProjectionToggleDisabled ? undefined : () => setProjection((p) => (p === "globe" ? "mercator" : "globe"))}
title="3D 지구본 투영: 드래그로 회전, 휠로 확대/축소" title={isProjectionToggleDisabled ? "3D 모드 준비 중..." : "3D 지구본 투영: 드래그로 회전, 휠로 확대/축소"}
style={{ fontSize: 9, padding: "2px 8px" }} style={{ fontSize: 9, padding: "2px 8px", opacity: isProjectionToggleDisabled ? 0.4 : 1, cursor: isProjectionToggleDisabled ? "not-allowed" : "pointer" }}
> >
3D 3D
</div> </div>
@ -547,7 +541,7 @@ export function DashboardPage() {
</div> </div>
<div style={{ marginTop: 6, color: "var(--muted)", fontSize: 10 }}>최근 fetch</div> <div style={{ marginTop: 6, color: "var(--muted)", fontSize: 10 }}>최근 fetch</div>
<div> <div>
{fmtLocal(snapshot.lastFetchAt)}{" "} {fmtIsoFull(snapshot.lastFetchAt)}{" "}
<span style={{ color: "var(--muted)", fontSize: 10 }}> <span style={{ color: "var(--muted)", fontSize: 10 }}>
({snapshot.lastFetchMinutes ?? "-"}m, inserted {snapshot.lastInserted}, upserted {snapshot.lastUpserted}) ({snapshot.lastFetchMinutes ?? "-"}m, inserted {snapshot.lastInserted}, upserted {snapshot.lastUpserted})
</span> </span>
@ -571,7 +565,7 @@ export function DashboardPage() {
<span style={{ color: "var(--muted)", fontSize: 10 }}>/ {targetsInScope.length}</span> <span style={{ color: "var(--muted)", fontSize: 10 }}>/ {targetsInScope.length}</span>
</div> </div>
<div style={{ marginTop: 6, color: "var(--muted)", fontSize: 10 }}>생성시각</div> <div style={{ marginTop: 6, color: "var(--muted)", fontSize: 10 }}>생성시각</div>
<div style={{ fontSize: 10, color: "var(--text)" }}>{legacyData?.generatedAt ? fmtLocal(legacyData.generatedAt) : "loading..."}</div> <div style={{ fontSize: 10, color: "var(--text)" }}>{legacyData?.generatedAt ? fmtIsoFull(legacyData.generatedAt) : "loading..."}</div>
</div> </div>
)} )}
</div> </div>
@ -682,7 +676,7 @@ export function DashboardPage() {
</div> </div>
<div className="map-area"> <div className="map-area">
{isProjectionLoading ? ( {showMapLoader ? (
<div className="map-loader-overlay" role="status" aria-live="polite"> <div className="map-loader-overlay" role="status" aria-live="polite">
<div className="map-loader-overlay__panel"> <div className="map-loader-overlay__panel">
<div className="map-loader-overlay__spinner" /> <div className="map-loader-overlay__spinner" />
@ -714,7 +708,8 @@ export function DashboardPage() {
fcLinks={fcLinksForMap} fcLinks={fcLinksForMap}
fleetCircles={fleetCirclesForMap} fleetCircles={fleetCirclesForMap}
fleetFocus={fleetFocus} fleetFocus={fleetFocus}
onProjectionLoadingChange={setIsProjectionLoading} onProjectionLoadingChange={handleProjectionLoadingChange}
onGlobeShipsReady={setIsGlobeShipsReady}
onHoverMmsi={(mmsis) => setHoveredMmsiSet(setUniqueSorted(mmsis))} onHoverMmsi={(mmsis) => setHoveredMmsiSet(setUniqueSorted(mmsis))}
onClearMmsiHover={() => setHoveredMmsiSet((prev) => (prev.length === 0 ? prev : []))} onClearMmsiHover={() => setHoveredMmsiSet((prev) => (prev.length === 0 ? prev : []))}
onHoverPair={(pairMmsis) => setHoveredPairMmsiSet(setUniqueSorted(pairMmsis))} onHoverPair={(pairMmsis) => setHoveredPairMmsiSet(setUniqueSorted(pairMmsis))}
@ -732,6 +727,8 @@ export function DashboardPage() {
onHoverCable={setHoveredCableId} onHoverCable={setHoveredCableId}
onClickCable={(id) => setSelectedCableId((prev) => (prev === id ? null : id))} onClickCable={(id) => setSelectedCableId((prev) => (prev === id ? null : id))}
mapStyleSettings={mapStyleSettings} mapStyleSettings={mapStyleSettings}
initialView={mapView}
onViewStateChange={setMapView}
/> />
<MapSettingsPanel value={mapStyleSettings} onChange={setMapStyleSettings} /> <MapSettingsPanel value={mapStyleSettings} onChange={setMapStyleSettings} />
<DepthLegend depthStops={mapStyleSettings.depthStops} /> <DepthLegend depthStops={mapStyleSettings.depthStops} />

1
apps/web/src/shared/hooks/index.ts Normal file
파일 보기

@ -0,0 +1 @@
export { usePersistedState } from './usePersistedState';

103
apps/web/src/shared/hooks/usePersistedState.ts Normal file
파일 보기

@ -0,0 +1,103 @@
import { useState, useEffect, useRef, type Dispatch, type SetStateAction } from 'react';
const PREFIX = 'wing';
function buildKey(userId: number, name: string): string {
return `${PREFIX}:${userId}:${name}`;
}
function readStorage<T>(key: string, fallback: T): T {
try {
const raw = localStorage.getItem(key);
if (raw === null) return fallback;
return JSON.parse(raw) as T;
} catch {
return fallback;
}
}
function writeStorage<T>(key: string, value: T): void {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch {
// quota exceeded or unavailable — silent
}
}
function resolveDefault<T>(d: T | (() => T)): T {
return typeof d === 'function' ? (d as () => T)() : d;
}
/**
* useState와 동일한 API, localStorage 자동 동기화.
*
* @param userId null이면 일반 useState처럼 동작 (비영속)
* @param name 설정 이름 (e.g. 'typeEnabled')
* @param defaultValue 초기값 또는 lazy initializer
* @param debounceMs localStorage 쓰기 디바운스 (기본 300ms)
*/
export function usePersistedState<T>(
userId: number | null,
name: string,
defaultValue: T | (() => T),
debounceMs = 300,
): [T, Dispatch<SetStateAction<T>>] {
const resolved = resolveDefault(defaultValue);
const [state, setState] = useState<T>(() => {
if (userId == null) return resolved;
return readStorage(buildKey(userId, name), resolved);
});
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const stateRef = useRef(state);
const userIdRef = useRef(userId);
const nameRef = useRef(name);
stateRef.current = state;
userIdRef.current = userId;
nameRef.current = name;
// userId 변경 시 해당 사용자의 저장값 재로드
useEffect(() => {
if (userId == null) return;
const stored = readStorage(buildKey(userId, name), resolved);
setState(stored);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userId]);
// debounced write
useEffect(() => {
if (userId == null) return;
const key = buildKey(userId, name);
if (timerRef.current != null) clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => {
writeStorage(key, state);
timerRef.current = null;
}, debounceMs);
return () => {
if (timerRef.current != null) {
clearTimeout(timerRef.current);
timerRef.current = null;
}
};
}, [state, userId, name, debounceMs]);
// unmount 시 pending write flush
useEffect(() => {
return () => {
if (timerRef.current != null) {
clearTimeout(timerRef.current);
timerRef.current = null;
}
if (userIdRef.current != null) {
writeStorage(buildKey(userIdRef.current, nameRef.current), stateRef.current);
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return [state, setState];
}

50
apps/web/src/shared/lib/datetime.ts Normal file
파일 보기

@ -0,0 +1,50 @@
/**
* 타임존 & 날짜 포맷 유틸리티
*
* 현재 KST 고정. 추후 토글 필요 시 DISPLAY_TZ 상수만 변경.
*/
/** 표시용 타임존. 'UTC' | 'Asia/Seoul' 등 IANA tz 문자열. */
export const DISPLAY_TZ = 'Asia/Seoul' as const;
/** 표시 레이블 (예: "KST") */
export const DISPLAY_TZ_LABEL = 'KST' as const;
/* ── 포맷 함수 ─────────────────────────────────────────────── */
const pad2 = (n: number) => String(n).padStart(2, '0');
/** DISPLAY_TZ 기준으로 Date → "YYYY년 MM월 DD일 HH시 mm분 ss초" */
export function fmtDateTimeFull(date: Date): string {
const parts = new Intl.DateTimeFormat('ko-KR', {
timeZone: DISPLAY_TZ,
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).formatToParts(date);
const p: Record<string, string> = {};
for (const { type, value } of parts) p[type] = value;
return `${p.year}년 ${p.month}월 ${p.day}일 ${p.hour}시 ${pad2(Number(p.minute))}분 ${pad2(Number(p.second))}초`;
}
/** ISO 문자열 → "YYYY년 MM월 DD일 HH시 mm분 ss초" (파싱 실패 시 fallback) */
export function fmtIsoFull(iso: string | null | undefined): string {
if (!iso) return '-';
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return String(iso);
return fmtDateTimeFull(d);
}
/** ISO 문자열 → "HH:mm:ss" (시간만) */
export function fmtIsoTime(iso: string | null | undefined): string {
if (!iso) return '';
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return String(iso);
return d.toLocaleTimeString('ko-KR', { timeZone: DISPLAY_TZ, hour12: false });
}

5
apps/web/src/widgets/aisInfo/AisInfoPanel.tsx
파일 보기

@ -1,5 +1,6 @@
import type { AisTarget } from "../../entities/aisTarget/model/types"; import type { AisTarget } from "../../entities/aisTarget/model/types";
import type { LegacyVesselInfo } from "../../entities/legacyVessel/model/types"; import type { LegacyVesselInfo } from "../../entities/legacyVessel/model/types";
import { fmtIsoFull } from "../../shared/lib/datetime";
type Props = { type Props = {
target: AisTarget; target: AisTarget;
@ -85,11 +86,11 @@ export function AisInfoPanel({ target: t, legacy, onClose }: Props) {
</div> </div>
<div className="ir"> <div className="ir">
<span className="il">Msg TS</span> <span className="il">Msg TS</span>
<span className="iv">{t.messageTimestamp || "-"}</span> <span className="iv">{fmtIsoFull(t.messageTimestamp)}</span>
</div> </div>
<div className="ir"> <div className="ir">
<span className="il">Received</span> <span className="il">Received</span>
<span className="iv">{t.receivedDate || "-"}</span> <span className="iv">{fmtIsoFull(t.receivedDate)}</span>
</div> </div>
</div> </div>
); );

10
apps/web/src/widgets/aisTargetList/AisTargetList.tsx
파일 보기

@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
import type { AisTarget } from "../../entities/aisTarget/model/types"; import type { AisTarget } from "../../entities/aisTarget/model/types";
import type { LegacyVesselIndex } from "../../entities/legacyVessel/lib"; import type { LegacyVesselIndex } from "../../entities/legacyVessel/lib";
import { matchLegacyVessel } from "../../entities/legacyVessel/lib"; import { matchLegacyVessel } from "../../entities/legacyVessel/lib";
import { fmtIsoTime } from "../../shared/lib/datetime";
type SortMode = "recent" | "speed"; type SortMode = "recent" | "speed";
@ -23,13 +24,6 @@ function getSpeedColor(sog: unknown) {
return "#64748B"; return "#64748B";
} }
function fmtLocalTime(iso: string | null | undefined) {
if (!iso) return "";
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return String(iso);
return d.toLocaleTimeString("ko-KR", { hour12: false });
}
export function AisTargetList({ targets, selectedMmsi, onSelectMmsi, legacyIndex }: Props) { export function AisTargetList({ targets, selectedMmsi, onSelectMmsi, legacyIndex }: Props) {
const [q, setQ] = useState(""); const [q, setQ] = useState("");
const [mode, setMode] = useState<SortMode>("recent"); const [mode, setMode] = useState<SortMode>("recent");
@ -96,7 +90,7 @@ export function AisTargetList({ targets, selectedMmsi, onSelectMmsi, legacyIndex
const sel = selectedMmsi && t.mmsi === selectedMmsi; const sel = selectedMmsi && t.mmsi === selectedMmsi;
const sp = isFiniteNumber(t.sog) ? t.sog.toFixed(1) : "?"; const sp = isFiniteNumber(t.sog) ? t.sog.toFixed(1) : "?";
const sc = getSpeedColor(t.sog); const sc = getSpeedColor(t.sog);
const ts = fmtLocalTime(t.messageTimestamp); const ts = fmtIsoTime(t.messageTimestamp);
const legacy = legacyIndex ? matchLegacyVessel(t, legacyIndex) : null; const legacy = legacyIndex ? matchLegacyVessel(t, legacyIndex) : null;
const legacyCode = legacy?.shipCode || ""; const legacyCode = legacy?.shipCode || "";

3
apps/web/src/widgets/info/VesselInfoPanel.tsx
파일 보기

@ -1,6 +1,7 @@
import { ZONE_META } from "../../entities/zone/model/meta"; import { ZONE_META } from "../../entities/zone/model/meta";
import { SPEED_MAX, VESSEL_TYPES } from "../../entities/vessel/model/meta"; import { SPEED_MAX, VESSEL_TYPES } from "../../entities/vessel/model/meta";
import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types"; import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types";
import { fmtIsoFull } from "../../shared/lib/datetime";
import { haversineNm } from "../../shared/lib/geo/haversineNm"; import { haversineNm } from "../../shared/lib/geo/haversineNm";
import { OVERLAY_RGB, rgbToHex } from "../../shared/lib/map/palette"; import { OVERLAY_RGB, rgbToHex } from "../../shared/lib/map/palette";
@ -75,7 +76,7 @@ export function VesselInfoPanel({ vessel: v, allVessels, onClose, onSelectMmsi }
</div> </div>
<div className="ir"> <div className="ir">
<span className="il">Msg TS</span> <span className="il">Msg TS</span>
<span className="iv">{v.messageTimestamp || "-"}</span> <span className="iv">{fmtIsoFull(v.messageTimestamp)}</span>
</div> </div>
<div className="ir"> <div className="ir">
<span className="il">소유주</span> <span className="il">소유주</span>

10
apps/web/src/widgets/map3d/Map3D.tsx
파일 보기

@ -66,6 +66,9 @@ export function Map3D({
onHoverCable, onHoverCable,
onClickCable, onClickCable,
mapStyleSettings, mapStyleSettings,
initialView,
onViewStateChange,
onGlobeShipsReady,
}: Props) { }: Props) {
void onHoverFleet; void onHoverFleet;
void onClearFleetHover; void onClearFleetHover;
@ -434,15 +437,15 @@ export function Map3D({
}, [fleetCircles, hoveredFleetOwnerKeys, isHighlightedFleet, overlays.fleetCircles, highlightedMmsiSetCombined]); }, [fleetCircles, hoveredFleetOwnerKeys, isHighlightedFleet, overlays.fleetCircles, highlightedMmsiSetCombined]);
// ── Hook orchestration ─────────────────────────────────────────────── // ── Hook orchestration ───────────────────────────────────────────────
const { ensureMercatorOverlay, clearGlobeNativeLayers, pulseMapSync } = useMapInit( const { ensureMercatorOverlay, pulseMapSync } = useMapInit(
containerRef, mapRef, overlayRef, overlayInteractionRef, globeDeckLayerRef, containerRef, mapRef, overlayRef, overlayInteractionRef, globeDeckLayerRef,
baseMapRef, projectionRef, baseMapRef, projectionRef,
{ baseMap, projection, showSeamark: settings.showSeamark, onViewBboxChange, setMapSyncEpoch }, { baseMap, projection, showSeamark: settings.showSeamark, onViewBboxChange, setMapSyncEpoch, initialView, onViewStateChange },
); );
const reorderGlobeFeatureLayers = useProjectionToggle( const reorderGlobeFeatureLayers = useProjectionToggle(
mapRef, overlayRef, overlayInteractionRef, globeDeckLayerRef, projectionBusyRef, mapRef, overlayRef, overlayInteractionRef, globeDeckLayerRef, projectionBusyRef,
{ projection, clearGlobeNativeLayers, ensureMercatorOverlay, onProjectionLoadingChange, pulseMapSync, setMapSyncEpoch }, { projection, ensureMercatorOverlay, onProjectionLoadingChange, pulseMapSync, setMapSyncEpoch },
); );
useBaseMapToggle( useBaseMapToggle(
@ -472,6 +475,7 @@ export function Map3D({
shipOverlayLayerData, shipLayerData, shipByMmsi, mapSyncEpoch, shipOverlayLayerData, shipLayerData, shipByMmsi, mapSyncEpoch,
onSelectMmsi, onToggleHighlightMmsi, targets, overlays, onSelectMmsi, onToggleHighlightMmsi, targets, overlays,
legacyHits, selectedMmsi, isBaseHighlightedMmsi, hasAuxiliarySelectModifier, legacyHits, selectedMmsi, isBaseHighlightedMmsi, hasAuxiliarySelectModifier,
onGlobeShipsReady,
}, },
); );

2
apps/web/src/widgets/map3d/hooks/useBaseMapToggle.ts
파일 보기

@ -110,7 +110,7 @@ export function useBaseMapToggle(
if (!map) return; if (!map) return;
if (showSeamark) { if (showSeamark) {
try { try {
ensureSeamarkOverlay(map, 'bathymetry-lines'); ensureSeamarkOverlay(map, 'bathymetry-lines-coarse');
map.setPaintProperty('seamark', 'raster-opacity', 0.85); map.setPaintProperty('seamark', 'raster-opacity', 0.85);
} catch { } catch {
// ignore until style is ready // ignore until style is ready

16
apps/web/src/widgets/map3d/hooks/useDeckLayers.ts
파일 보기

@ -51,6 +51,12 @@ import {
} from '../lib/tooltips'; } from '../lib/tooltips';
import { sanitizeDeckLayerList } from '../lib/mapCore'; import { sanitizeDeckLayerList } from '../lib/mapCore';
// NOTE:
// Globe mode now relies on MapLibre native overlays (useGlobeOverlays/useGlobeShips).
// Keep Deck custom-layer rendering disabled in globe to avoid projection-space artifacts.
const ENABLE_GLOBE_DECK_OVERLAYS = false;
export function useDeckLayers( export function useDeckLayers(
mapRef: MutableRefObject<import('maplibre-gl').Map | null>, mapRef: MutableRefObject<import('maplibre-gl').Map | null>,
overlayRef: MutableRefObject<MapboxOverlay | null>, overlayRef: MutableRefObject<MapboxOverlay | null>,
@ -595,6 +601,16 @@ export function useDeckLayers(
const deckTarget = globeDeckLayerRef.current; const deckTarget = globeDeckLayerRef.current;
if (!deckTarget) return; if (!deckTarget) return;
if (!ENABLE_GLOBE_DECK_OVERLAYS) {
try {
deckTarget.setProps({ layers: [], getTooltip: undefined, onClick: undefined } as never);
} catch {
// ignore
}
return;
}
const overlayParams = GLOBE_OVERLAY_PARAMS; const overlayParams = GLOBE_OVERLAY_PARAMS;
const globeLayers: unknown[] = []; const globeLayers: unknown[] = [];

8
apps/web/src/widgets/map3d/hooks/useGlobeInteraction.ts
파일 보기

@ -118,7 +118,7 @@ export function useGlobeInteraction(
}); });
} }
if (layerId === 'fleet-circles-ml' || layerId === 'fleet-circles-ml-fill') { if (layerId === 'fleet-circles-ml') {
return getFleetCircleTooltipHtml({ return getFleetCircleTooltipHtml({
ownerKey: String(props.ownerKey ?? ''), ownerKey: String(props.ownerKey ?? ''),
ownerLabel: String(props.ownerLabel ?? props.ownerKey ?? ''), ownerLabel: String(props.ownerLabel ?? props.ownerKey ?? ''),
@ -186,7 +186,7 @@ export function useGlobeInteraction(
candidateLayerIds = [ candidateLayerIds = [
'ships-globe', 'ships-globe-halo', 'ships-globe-outline', 'ships-globe', 'ships-globe-halo', 'ships-globe-outline',
'pair-lines-ml', 'fc-lines-ml', 'pair-lines-ml', 'fc-lines-ml',
'fleet-circles-ml', 'fleet-circles-ml-fill', 'fleet-circles-ml',
'pair-range-ml', 'pair-range-ml',
'zones-fill', 'zones-line', 'zones-label', 'zones-fill', 'zones-line', 'zones-label',
].filter((id) => map.getLayer(id)); ].filter((id) => map.getLayer(id));
@ -213,7 +213,7 @@ export function useGlobeInteraction(
const priority = [ const priority = [
'ships-globe', 'ships-globe-halo', 'ships-globe-outline', 'ships-globe', 'ships-globe-halo', 'ships-globe-outline',
'pair-lines-ml', 'fc-lines-ml', 'pair-range-ml', 'pair-lines-ml', 'fc-lines-ml', 'pair-range-ml',
'fleet-circles-ml-fill', 'fleet-circles-ml', 'fleet-circles-ml',
'zones-fill', 'zones-line', 'zones-label', 'zones-fill', 'zones-line', 'zones-label',
]; ];
@ -232,7 +232,7 @@ export function useGlobeInteraction(
const isShipLayer = layerId === 'ships-globe' || layerId === 'ships-globe-halo' || layerId === 'ships-globe-outline'; const isShipLayer = layerId === 'ships-globe' || layerId === 'ships-globe-halo' || layerId === 'ships-globe-outline';
const isPairLayer = layerId === 'pair-lines-ml' || layerId === 'pair-range-ml'; const isPairLayer = layerId === 'pair-lines-ml' || layerId === 'pair-range-ml';
const isFcLayer = layerId === 'fc-lines-ml'; const isFcLayer = layerId === 'fc-lines-ml';
const isFleetLayer = layerId === 'fleet-circles-ml' || layerId === 'fleet-circles-ml-fill'; const isFleetLayer = layerId === 'fleet-circles-ml';
const isZoneLayer = layerId === 'zones-fill' || layerId === 'zones-line' || layerId === 'zones-label'; const isZoneLayer = layerId === 'zones-fill' || layerId === 'zones-line' || layerId === 'zones-label';
if (isShipLayer) { if (isShipLayer) {

120
apps/web/src/widgets/map3d/hooks/useGlobeOverlays.ts
파일 보기

@ -11,7 +11,6 @@ import {
PAIR_RANGE_NORMAL_ML_HL, PAIR_RANGE_WARN_ML_HL, PAIR_RANGE_NORMAL_ML_HL, PAIR_RANGE_WARN_ML_HL,
FC_LINE_NORMAL_ML, FC_LINE_SUSPICIOUS_ML, FC_LINE_NORMAL_ML, FC_LINE_SUSPICIOUS_ML,
FC_LINE_NORMAL_ML_HL, FC_LINE_SUSPICIOUS_ML_HL, FC_LINE_NORMAL_ML_HL, FC_LINE_SUSPICIOUS_ML_HL,
FLEET_FILL_ML, FLEET_FILL_ML_HL,
FLEET_LINE_ML, FLEET_LINE_ML_HL, FLEET_LINE_ML, FLEET_LINE_ML_HL,
} from '../constants'; } from '../constants';
import { makeUniqueSorted } from '../lib/setUtils'; import { makeUniqueSorted } from '../lib/setUtils';
@ -28,6 +27,7 @@ import {
} from '../lib/mlExpressions'; } from '../lib/mlExpressions';
import { kickRepaint, onMapStyleReady } from '../lib/mapCore'; import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
import { circleRingLngLat } from '../lib/geometry'; import { circleRingLngLat } from '../lib/geometry';
import { guardedSetVisibility } from '../lib/layerHelpers';
import { dashifyLine } from '../lib/dashifyLine'; import { dashifyLine } from '../lib/dashifyLine';
export function useGlobeOverlays( export function useGlobeOverlays(
@ -60,11 +60,7 @@ export function useGlobeOverlays(
const layerId = 'pair-lines-ml'; const layerId = 'pair-lines-ml';
const remove = () => { const remove = () => {
try { guardedSetVisibility(map, layerId, 'none');
if (map.getLayer(layerId)) map.setLayoutProperty(layerId, 'visibility', 'none');
} catch {
// ignore
}
}; };
const ensure = () => { const ensure = () => {
@ -132,11 +128,7 @@ export function useGlobeOverlays(
console.warn('Pair lines layer add failed:', e); console.warn('Pair lines layer add failed:', e);
} }
} else { } else {
try { guardedSetVisibility(map, layerId, 'visible');
map.setLayoutProperty(layerId, 'visibility', 'visible');
} catch {
// ignore
}
} }
reorderGlobeFeatureLayers(); reorderGlobeFeatureLayers();
@ -159,11 +151,7 @@ export function useGlobeOverlays(
const layerId = 'fc-lines-ml'; const layerId = 'fc-lines-ml';
const remove = () => { const remove = () => {
try { guardedSetVisibility(map, layerId, 'none');
if (map.getLayer(layerId)) map.setLayoutProperty(layerId, 'visibility', 'none');
} catch {
// ignore
}
}; };
const ensure = () => { const ensure = () => {
@ -235,11 +223,7 @@ export function useGlobeOverlays(
console.warn('FC lines layer add failed:', e); console.warn('FC lines layer add failed:', e);
} }
} else { } else {
try { guardedSetVisibility(map, layerId, 'visible');
map.setLayoutProperty(layerId, 'visibility', 'visible');
} catch {
// ignore
}
} }
reorderGlobeFeatureLayers(); reorderGlobeFeatureLayers();
@ -259,21 +243,13 @@ export function useGlobeOverlays(
if (!map) return; if (!map) return;
const srcId = 'fleet-circles-ml-src'; const srcId = 'fleet-circles-ml-src';
const fillSrcId = 'fleet-circles-ml-fill-src';
const layerId = 'fleet-circles-ml'; const layerId = 'fleet-circles-ml';
const fillLayerId = 'fleet-circles-ml-fill';
// fill layer 제거됨 — globe tessellation에서 vertex 65535 초과 경고 원인
// 라인만으로 fleet circle 시각화 충분
const remove = () => { const remove = () => {
try { guardedSetVisibility(map, layerId, 'none');
if (map.getLayer(fillLayerId)) map.setLayoutProperty(fillLayerId, 'visibility', 'none');
} catch {
// ignore
}
try {
if (map.getLayer(layerId)) map.setLayoutProperty(layerId, 'visibility', 'none');
} catch {
// ignore
}
}; };
const ensure = () => { const ensure = () => {
@ -304,26 +280,6 @@ export function useGlobeOverlays(
}), }),
}; };
const fcFill: GeoJSON.FeatureCollection<GeoJSON.Polygon> = {
type: 'FeatureCollection',
features: (fleetCircles || []).map((c) => {
const ring = circleRingLngLat(c.center, c.radiusNm * 1852);
return {
type: 'Feature',
id: `${makeFleetCircleFeatureId(c.ownerKey)}-fill`,
geometry: { type: 'Polygon', coordinates: [ring] },
properties: {
type: 'fleet-fill',
ownerKey: c.ownerKey,
ownerLabel: c.ownerLabel,
count: c.count,
vesselMmsis: c.vesselMmsis,
highlighted: 0,
},
};
}),
};
try { try {
const existing = map.getSource(srcId) as GeoJSONSource | undefined; const existing = map.getSource(srcId) as GeoJSONSource | undefined;
if (existing) existing.setData(fcLine); if (existing) existing.setData(fcLine);
@ -333,41 +289,6 @@ export function useGlobeOverlays(
return; return;
} }
try {
const existingFill = map.getSource(fillSrcId) as GeoJSONSource | undefined;
if (existingFill) existingFill.setData(fcFill);
else map.addSource(fillSrcId, { type: 'geojson', data: fcFill } as GeoJSONSourceSpecification);
} catch (e) {
console.warn('Fleet circles source setup failed:', e);
return;
}
if (!map.getLayer(fillLayerId)) {
try {
map.addLayer(
{
id: fillLayerId,
type: 'fill',
source: fillSrcId,
layout: { visibility: 'visible' },
paint: {
'fill-color': ['case', ['==', ['get', 'highlighted'], 1], FLEET_FILL_ML_HL, FLEET_FILL_ML] as never,
'fill-opacity': ['case', ['==', ['get', 'highlighted'], 1], 0.7, 0.36] as never,
},
} as unknown as LayerSpecification,
undefined,
);
} catch (e) {
console.warn('Fleet circles fill layer add failed:', e);
}
} else {
try {
map.setLayoutProperty(fillLayerId, 'visibility', 'visible');
} catch {
// ignore
}
}
if (!map.getLayer(layerId)) { if (!map.getLayer(layerId)) {
try { try {
map.addLayer( map.addLayer(
@ -388,11 +309,7 @@ export function useGlobeOverlays(
console.warn('Fleet circles layer add failed:', e); console.warn('Fleet circles layer add failed:', e);
} }
} else { } else {
try { guardedSetVisibility(map, layerId, 'visible');
map.setLayoutProperty(layerId, 'visibility', 'visible');
} catch {
// ignore
}
} }
reorderGlobeFeatureLayers(); reorderGlobeFeatureLayers();
@ -415,11 +332,7 @@ export function useGlobeOverlays(
const layerId = 'pair-range-ml'; const layerId = 'pair-range-ml';
const remove = () => { const remove = () => {
try { guardedSetVisibility(map, layerId, 'none');
if (map.getLayer(layerId)) map.setLayoutProperty(layerId, 'visibility', 'none');
} catch {
// ignore
}
}; };
const ensure = () => { const ensure = () => {
@ -503,11 +416,7 @@ export function useGlobeOverlays(
console.warn('Pair range layer add failed:', e); console.warn('Pair range layer add failed:', e);
} }
} else { } else {
try { guardedSetVisibility(map, layerId, 'visible');
map.setLayoutProperty(layerId, 'visibility', 'visible');
} catch {
// ignore
}
} }
kickRepaint(map); kickRepaint(map);
@ -593,10 +502,7 @@ export function useGlobeOverlays(
} }
try { try {
if (map.getLayer('fleet-circles-ml-fill')) { // fleet-circles-ml-fill 제거됨 (vertex 65535 경고 원인)
map.setPaintProperty('fleet-circles-ml-fill', 'fill-color', ['case', fleetHighlightExpr, FLEET_FILL_ML_HL, FLEET_FILL_ML] as never);
map.setPaintProperty('fleet-circles-ml-fill', 'fill-opacity', ['case', fleetHighlightExpr, 0.7, 0.28] as never);
}
if (map.getLayer('fleet-circles-ml')) { if (map.getLayer('fleet-circles-ml')) {
map.setPaintProperty('fleet-circles-ml', 'line-color', ['case', fleetHighlightExpr, FLEET_LINE_ML_HL, FLEET_LINE_ML] as never); map.setPaintProperty('fleet-circles-ml', 'line-color', ['case', fleetHighlightExpr, FLEET_LINE_ML_HL, FLEET_LINE_ML] as never);
map.setPaintProperty('fleet-circles-ml', 'line-width', ['case', fleetHighlightExpr, 2, 1.1] as never); map.setPaintProperty('fleet-circles-ml', 'line-width', ['case', fleetHighlightExpr, 2, 1.1] as never);

378
apps/web/src/widgets/map3d/hooks/useGlobeShips.ts
파일 보기

@ -1,4 +1,4 @@
import { useEffect, useRef, type MutableRefObject } from 'react'; import { useEffect, useMemo, useRef, type MutableRefObject } from 'react';
import type maplibregl from 'maplibre-gl'; import type maplibregl from 'maplibre-gl';
import type { GeoJSONSource, GeoJSONSourceSpecification, LayerSpecification } from 'maplibre-gl'; import type { GeoJSONSource, GeoJSONSourceSpecification, LayerSpecification } from 'maplibre-gl';
import type { AisTarget } from '../../../entities/aisTarget/model/types'; import type { AisTarget } from '../../../entities/aisTarget/model/types';
@ -25,6 +25,7 @@ import {
ensureFallbackShipImage, ensureFallbackShipImage,
} from '../lib/globeShipIcon'; } from '../lib/globeShipIcon';
import { clampNumber } from '../lib/geometry'; import { clampNumber } from '../lib/geometry';
import { guardedSetVisibility } from '../lib/layerHelpers';
export function useGlobeShips( export function useGlobeShips(
mapRef: MutableRefObject<maplibregl.Map | null>, mapRef: MutableRefObject<maplibregl.Map | null>,
@ -48,18 +49,81 @@ export function useGlobeShips(
selectedMmsi: number | null; selectedMmsi: number | null;
isBaseHighlightedMmsi: (mmsi: number) => boolean; isBaseHighlightedMmsi: (mmsi: number) => boolean;
hasAuxiliarySelectModifier: (ev?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean } | null) => boolean; hasAuxiliarySelectModifier: (ev?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean } | null) => boolean;
onGlobeShipsReady?: (ready: boolean) => void;
}, },
) { ) {
const { const {
projection, settings, shipData, shipHighlightSet, shipHoverOverlaySet, projection, settings, shipData, shipHighlightSet, shipHoverOverlaySet,
shipLayerData, mapSyncEpoch, onSelectMmsi, onToggleHighlightMmsi, targets, shipLayerData, mapSyncEpoch, onSelectMmsi, onToggleHighlightMmsi, targets,
overlays, legacyHits, selectedMmsi, isBaseHighlightedMmsi, hasAuxiliarySelectModifier, overlays, legacyHits, selectedMmsi, isBaseHighlightedMmsi, hasAuxiliarySelectModifier,
onGlobeShipsReady,
} = opts; } = opts;
const globeShipsEpochRef = useRef(-1); const globeShipsEpochRef = useRef(-1);
const globeShipIconLoadingRef = useRef(false);
const globeHoverShipSignatureRef = useRef(''); const globeHoverShipSignatureRef = useRef('');
// Globe GeoJSON을 projection과 무관하게 항상 사전 계산
// Globe 전환 시 즉시 사용 가능하도록 useMemo로 캐싱
const globeShipGeoJson = useMemo((): GeoJSON.FeatureCollection<GeoJSON.Point> => {
return {
type: 'FeatureCollection',
features: shipData.map((t) => {
const legacy = legacyHits?.get(t.mmsi) ?? null;
const labelName = legacy?.shipNameCn || legacy?.shipNameRoman || t.name || '';
const heading = getDisplayHeading({
cog: t.cog,
heading: t.heading,
offset: GLOBE_ICON_HEADING_OFFSET_DEG,
});
const isAnchored = isAnchoredShip({ sog: t.sog, cog: t.cog, heading: t.heading });
const shipHeading = isAnchored ? 0 : heading;
const hull = clampNumber(
(isFiniteNumber(t.length) ? t.length : 0) + (isFiniteNumber(t.width) ? t.width : 0) * 3,
50, 420,
);
const sizeScale = clampNumber(0.85 + (hull - 50) / 420, 0.82, 1.85);
const selected = t.mmsi === selectedMmsi;
const highlighted = isBaseHighlightedMmsi(t.mmsi);
const selectedScale = selected ? 1.08 : 1;
const highlightScale = highlighted ? 1.06 : 1;
const iconScale = selected ? selectedScale : highlightScale;
const iconSize3 = clampNumber(0.35 * sizeScale * selectedScale, 0.25, 1.3);
const iconSize7 = clampNumber(0.45 * sizeScale * selectedScale, 0.3, 1.45);
const iconSize10 = clampNumber(0.58 * sizeScale * selectedScale, 0.35, 1.8);
const iconSize14 = clampNumber(0.85 * sizeScale * selectedScale, 0.45, 2.6);
const iconSize18 = clampNumber(2.5 * sizeScale * selectedScale, 1.0, 6.0);
return {
type: 'Feature' as const,
...(isFiniteNumber(t.mmsi) ? { id: Math.trunc(t.mmsi) } : {}),
geometry: { type: 'Point' as const, coordinates: [t.lon, t.lat] },
properties: {
mmsi: t.mmsi,
name: t.name || '',
labelName,
cog: shipHeading,
heading: shipHeading,
sog: isFiniteNumber(t.sog) ? t.sog : 0,
isAnchored: isAnchored ? 1 : 0,
shipColor: getGlobeBaseShipColor({
legacy: legacy?.shipCode || null,
sog: isFiniteNumber(t.sog) ? t.sog : null,
}),
iconSize3: iconSize3 * iconScale,
iconSize7: iconSize7 * iconScale,
iconSize10: iconSize10 * iconScale,
iconSize14: iconSize14 * iconScale,
iconSize18: iconSize18 * iconScale,
sizeScale,
selected: selected ? 1 : 0,
highlighted: highlighted ? 1 : 0,
permitted: legacy ? 1 : 0,
code: legacy?.shipCode || '',
},
};
}),
};
}, [shipData, legacyHits, selectedMmsi, isBaseHighlightedMmsi]);
// Ship name labels in mercator // Ship name labels in mercator
useEffect(() => { useEffect(() => {
const map = mapRef.current; const map = mapRef.current;
@ -209,110 +273,52 @@ export function useGlobeShips(
const symbolId = 'ships-globe'; const symbolId = 'ships-globe';
const labelId = 'ships-globe-label'; const labelId = 'ships-globe-label';
const remove = () => { // 레이어를 제거하지 않고 visibility만 'none'으로 설정
// guardedSetVisibility로 현재 값과 동일하면 호출 생략 (style._changed 방지)
const hide = () => {
for (const id of [labelId, symbolId, outlineId, haloId]) { for (const id of [labelId, symbolId, outlineId, haloId]) {
try { guardedSetVisibility(map, id, 'none');
if (map.getLayer(id)) map.removeLayer(id);
} catch {
// ignore
}
} }
try {
if (map.getSource(srcId)) map.removeSource(srcId);
} catch {
// ignore
}
globeHoverShipSignatureRef.current = '';
reorderGlobeFeatureLayers();
kickRepaint(map);
}; };
const ensureImage = () => { const ensureImage = () => {
ensureFallbackShipImage(map, imgId); ensureFallbackShipImage(map, imgId);
ensureFallbackShipImage(map, anchoredImgId, buildFallbackGlobeAnchoredShipIcon); ensureFallbackShipImage(map, anchoredImgId, buildFallbackGlobeAnchoredShipIcon);
if (globeShipIconLoadingRef.current) return;
if (map.hasImage(imgId) && map.hasImage(anchoredImgId)) return; if (map.hasImage(imgId) && map.hasImage(anchoredImgId)) return;
kickRepaint(map);
const addFallbackImage = () => {
ensureFallbackShipImage(map, imgId);
ensureFallbackShipImage(map, anchoredImgId, buildFallbackGlobeAnchoredShipIcon);
kickRepaint(map);
};
let fallbackTimer: ReturnType<typeof window.setTimeout> | null = null;
try {
globeShipIconLoadingRef.current = true;
fallbackTimer = window.setTimeout(() => {
addFallbackImage();
}, 80);
void map
.loadImage('/assets/ship.svg')
.then((response) => {
globeShipIconLoadingRef.current = false;
if (fallbackTimer != null) {
clearTimeout(fallbackTimer);
fallbackTimer = null;
}
const loadedImage = (response as { data?: HTMLImageElement | ImageBitmap } | undefined)?.data;
if (!loadedImage) {
addFallbackImage();
return;
}
try {
if (map.hasImage(imgId)) {
try {
map.removeImage(imgId);
} catch {
// ignore
}
}
if (map.hasImage(anchoredImgId)) {
try {
map.removeImage(anchoredImgId);
} catch {
// ignore
}
}
map.addImage(imgId, loadedImage, { pixelRatio: 2, sdf: true });
map.addImage(anchoredImgId, loadedImage, { pixelRatio: 2, sdf: true });
kickRepaint(map);
} catch (e) {
console.warn('Ship icon image add failed:', e);
}
})
.catch(() => {
globeShipIconLoadingRef.current = false;
if (fallbackTimer != null) {
clearTimeout(fallbackTimer);
fallbackTimer = null;
}
addFallbackImage();
});
} catch (e) {
globeShipIconLoadingRef.current = false;
if (fallbackTimer != null) {
clearTimeout(fallbackTimer);
fallbackTimer = null;
}
try {
addFallbackImage();
} catch (fallbackError) {
console.warn('Ship icon image setup failed:', e, fallbackError);
}
}
}; };
const ensure = () => { const ensure = () => {
if (projectionBusyRef.current) return; if (!settings.showShips) {
if (!map.isStyleLoaded()) return; hide();
onGlobeShipsReady?.(false);
if (projection !== 'globe' || !settings.showShips) {
remove();
return; return;
} }
// 빠른 visibility 토글 — projectionBusy 중에도 실행
// guardedSetVisibility로 값이 실제로 바뀔 때만 setLayoutProperty 호출
// → style._changed 방지 → 불필요한 symbol placement 재계산 방지 → 라벨 사라짐 방지
const visibility: 'visible' | 'none' = projection === 'globe' ? 'visible' : 'none';
const labelVisibility: 'visible' | 'none' = projection === 'globe' && overlays.shipLabels ? 'visible' : 'none';
if (map.getLayer(symbolId)) {
const changed = map.getLayoutProperty(symbolId, 'visibility') !== visibility;
if (changed) {
for (const id of [haloId, outlineId, symbolId]) {
guardedSetVisibility(map, id, visibility);
}
if (projection === 'globe') kickRepaint(map);
}
guardedSetVisibility(map, labelId, labelVisibility);
}
// 데이터 업데이트는 projectionBusy 중에는 차단
if (projectionBusyRef.current) {
// 레이어가 이미 존재하면 ready 상태 유지
if (map.getLayer(symbolId)) onGlobeShipsReady?.(true);
return;
}
if (!map.isStyleLoaded()) return;
if (globeShipsEpochRef.current !== mapSyncEpoch) { if (globeShipsEpochRef.current !== mapSyncEpoch) {
globeShipsEpochRef.current = mapSyncEpoch; globeShipsEpochRef.current = mapSyncEpoch;
} }
@ -323,69 +329,8 @@ export function useGlobeShips(
console.warn('Ship icon image setup failed:', e); console.warn('Ship icon image setup failed:', e);
} }
const globeShipData = shipData; // 사전 계산된 GeoJSON 사용 (useMemo에서 projection과 무관하게 항상 준비됨)
const geojson: GeoJSON.FeatureCollection<GeoJSON.Point> = { const geojson = globeShipGeoJson;
type: 'FeatureCollection',
features: globeShipData.map((t) => {
const legacy = legacyHits?.get(t.mmsi) ?? null;
const labelName =
legacy?.shipNameCn ||
legacy?.shipNameRoman ||
t.name ||
'';
const heading = getDisplayHeading({
cog: t.cog,
heading: t.heading,
offset: GLOBE_ICON_HEADING_OFFSET_DEG,
});
const isAnchored = isAnchoredShip({
sog: t.sog,
cog: t.cog,
heading: t.heading,
});
const shipHeading = isAnchored ? 0 : heading;
const hull = clampNumber((isFiniteNumber(t.length) ? t.length : 0) + (isFiniteNumber(t.width) ? t.width : 0) * 3, 50, 420);
const sizeScale = clampNumber(0.85 + (hull - 50) / 420, 0.82, 1.85);
const selected = t.mmsi === selectedMmsi;
const highlighted = isBaseHighlightedMmsi(t.mmsi);
const selectedScale = selected ? 1.08 : 1;
const highlightScale = highlighted ? 1.06 : 1;
const iconScale = selected ? selectedScale : highlightScale;
const iconSize3 = clampNumber(0.35 * sizeScale * selectedScale, 0.25, 1.3);
const iconSize7 = clampNumber(0.45 * sizeScale * selectedScale, 0.3, 1.45);
const iconSize10 = clampNumber(0.58 * sizeScale * selectedScale, 0.35, 1.8);
const iconSize14 = clampNumber(0.85 * sizeScale * selectedScale, 0.45, 2.6);
const iconSize18 = clampNumber(2.5 * sizeScale * selectedScale, 1.0, 6.0);
return {
type: 'Feature',
...(isFiniteNumber(t.mmsi) ? { id: Math.trunc(t.mmsi) } : {}),
geometry: { type: 'Point', coordinates: [t.lon, t.lat] },
properties: {
mmsi: t.mmsi,
name: t.name || '',
labelName,
cog: shipHeading,
heading: shipHeading,
sog: isFiniteNumber(t.sog) ? t.sog : 0,
isAnchored: isAnchored ? 1 : 0,
shipColor: getGlobeBaseShipColor({
legacy: legacy?.shipCode || null,
sog: isFiniteNumber(t.sog) ? t.sog : null,
}),
iconSize3: iconSize3 * iconScale,
iconSize7: iconSize7 * iconScale,
iconSize10: iconSize10 * iconScale,
iconSize14: iconSize14 * iconScale,
iconSize18: iconSize18 * iconScale,
sizeScale,
selected: selected ? 1 : 0,
highlighted: highlighted ? 1 : 0,
permitted: legacy ? 1 : 0,
code: legacy?.shipCode || '',
},
};
}),
};
try { try {
const existing = map.getSource(srcId) as GeoJSONSource | undefined; const existing = map.getSource(srcId) as GeoJSONSource | undefined;
@ -396,7 +341,6 @@ export function useGlobeShips(
return; return;
} }
const visibility = settings.showShips ? 'visible' : 'none';
const before = undefined; const before = undefined;
if (!map.getLayer(haloId)) { if (!map.getLayer(haloId)) {
@ -434,35 +378,8 @@ export function useGlobeShips(
} catch (e) { } catch (e) {
console.warn('Ship halo layer add failed:', e); console.warn('Ship halo layer add failed:', e);
} }
} else {
try {
map.setLayoutProperty(haloId, 'visibility', visibility);
map.setLayoutProperty(haloId, 'circle-sort-key', [
'case',
['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'permitted'], 1]], 120,
['all', ['==', ['get', 'highlighted'], 1], ['==', ['get', 'permitted'], 1]], 115,
['==', ['get', 'permitted'], 1], 110,
['==', ['get', 'selected'], 1], 60,
['==', ['get', 'highlighted'], 1], 55,
20,
] as never);
map.setPaintProperty(haloId, 'circle-color', [
'case',
['==', ['get', 'selected'], 1], 'rgba(14,234,255,1)',
['==', ['get', 'highlighted'], 1], 'rgba(245,158,11,1)',
['coalesce', ['get', 'shipColor'], '#64748b'],
] as never);
map.setPaintProperty(haloId, 'circle-opacity', [
'case',
['==', ['get', 'selected'], 1], 0.38,
['==', ['get', 'highlighted'], 1], 0.34,
0.16,
] as never);
map.setPaintProperty(haloId, 'circle-radius', GLOBE_SHIP_CIRCLE_RADIUS_EXPR);
} catch {
// ignore
}
} }
// halo: data-driven expressions are static — visibility handled by fast toggle above
if (!map.getLayer(outlineId)) { if (!map.getLayer(outlineId)) {
try { try {
@ -508,36 +425,8 @@ export function useGlobeShips(
} catch (e) { } catch (e) {
console.warn('Ship outline layer add failed:', e); console.warn('Ship outline layer add failed:', e);
} }
} else {
try {
map.setLayoutProperty(outlineId, 'visibility', visibility);
map.setLayoutProperty(outlineId, 'circle-sort-key', [
'case',
['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'permitted'], 1]], 130,
['all', ['==', ['get', 'highlighted'], 1], ['==', ['get', 'permitted'], 1]], 125,
['==', ['get', 'permitted'], 1], 120,
['==', ['get', 'selected'], 1], 70,
['==', ['get', 'highlighted'], 1], 65,
30,
] as never);
map.setPaintProperty(outlineId, 'circle-stroke-color', [
'case',
['==', ['get', 'selected'], 1], 'rgba(14,234,255,0.95)',
['==', ['get', 'highlighted'], 1], 'rgba(245,158,11,0.95)',
['==', ['get', 'permitted'], 1], GLOBE_OUTLINE_PERMITTED,
GLOBE_OUTLINE_OTHER,
] as never);
map.setPaintProperty(outlineId, 'circle-stroke-width', [
'case',
['==', ['get', 'selected'], 1], 3.4,
['==', ['get', 'highlighted'], 1], 2.7,
['==', ['get', 'permitted'], 1], 1.8,
0.7,
] as never);
} catch {
// ignore
}
} }
// outline: data-driven expressions are static — visibility handled by fast toggle
if (!map.getLayer(symbolId)) { if (!map.getLayer(symbolId)) {
try { try {
@ -598,31 +487,9 @@ export function useGlobeShips(
} catch (e) { } catch (e) {
console.warn('Ship symbol layer add failed:', e); console.warn('Ship symbol layer add failed:', e);
} }
} else {
try {
map.setLayoutProperty(symbolId, 'visibility', visibility);
map.setLayoutProperty(symbolId, 'symbol-sort-key', [
'case',
['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'permitted'], 1]], 140,
['all', ['==', ['get', 'highlighted'], 1], ['==', ['get', 'permitted'], 1]], 135,
['==', ['get', 'permitted'], 1], 130,
['==', ['get', 'selected'], 1], 80,
['==', ['get', 'highlighted'], 1], 75,
45,
] as never);
map.setPaintProperty(symbolId, 'icon-opacity', [
'case',
['==', ['get', 'permitted'], 1], 1,
['==', ['get', 'selected'], 1], 0.86,
['==', ['get', 'highlighted'], 1], 0.82,
0.66,
] as never);
} catch {
// ignore
}
} }
// symbol: data-driven expressions are static — visibility handled by fast toggle
const labelVisibility = overlays.shipLabels ? 'visible' : 'none';
const labelFilter = [ const labelFilter = [
'all', 'all',
['!=', ['to-string', ['coalesce', ['get', 'labelName'], '']], ''], ['!=', ['to-string', ['coalesce', ['get', 'labelName'], '']], ''],
@ -672,17 +539,14 @@ export function useGlobeShips(
} catch (e) { } catch (e) {
console.warn('Ship label layer add failed:', e); console.warn('Ship label layer add failed:', e);
} }
} else {
try {
map.setLayoutProperty(labelId, 'visibility', labelVisibility);
map.setFilter(labelId, labelFilter as never);
map.setLayoutProperty(labelId, 'text-field', ['get', 'labelName'] as never);
} catch {
// ignore
}
} }
// label: filter/text-field are static — visibility handled by fast toggle
reorderGlobeFeatureLayers(); // 레이어가 준비되었음을 알림 (projection과 무관 — 토글 버튼 활성화용)
onGlobeShipsReady?.(true);
if (projection === 'globe') {
reorderGlobeFeatureLayers();
}
kickRepaint(map); kickRepaint(map);
}; };
@ -694,12 +558,12 @@ export function useGlobeShips(
projection, projection,
settings.showShips, settings.showShips,
overlays.shipLabels, overlays.shipLabels,
shipData, globeShipGeoJson,
legacyHits,
selectedMmsi, selectedMmsi,
isBaseHighlightedMmsi, isBaseHighlightedMmsi,
mapSyncEpoch, mapSyncEpoch,
reorderGlobeFeatureLayers, reorderGlobeFeatureLayers,
onGlobeShipsReady,
]); ]);
// Globe hover overlay ships // Globe hover overlay ships
@ -713,22 +577,10 @@ export function useGlobeShips(
const outlineId = 'ships-globe-hover-outline'; const outlineId = 'ships-globe-hover-outline';
const symbolId = 'ships-globe-hover'; const symbolId = 'ships-globe-hover';
const remove = () => { const hideHover = () => {
for (const id of [symbolId, outlineId, haloId]) { for (const id of [symbolId, outlineId, haloId]) {
try { guardedSetVisibility(map, id, 'none');
if (map.getLayer(id)) map.removeLayer(id);
} catch {
// ignore
}
} }
try {
if (map.getSource(srcId)) map.removeSource(srcId);
} catch {
// ignore
}
globeHoverShipSignatureRef.current = '';
reorderGlobeFeatureLayers();
kickRepaint(map);
}; };
const ensure = () => { const ensure = () => {
@ -736,7 +588,7 @@ export function useGlobeShips(
if (!map.isStyleLoaded()) return; if (!map.isStyleLoaded()) return;
if (projection !== 'globe' || !settings.showShips || shipHoverOverlaySet.size === 0) { if (projection !== 'globe' || !settings.showShips || shipHoverOverlaySet.size === 0) {
remove(); hideHover();
return; return;
} }
@ -751,7 +603,7 @@ export function useGlobeShips(
const hovered = shipLayerData.filter((t) => shipHoverOverlaySet.has(t.mmsi) && !!legacyHits?.has(t.mmsi)); const hovered = shipLayerData.filter((t) => shipHoverOverlaySet.has(t.mmsi) && !!legacyHits?.has(t.mmsi));
if (hovered.length === 0) { if (hovered.length === 0) {
remove(); hideHover();
return; return;
} }
const hoverSignature = hovered const hoverSignature = hovered

147
apps/web/src/widgets/map3d/hooks/useMapInit.ts
파일 보기

@ -2,12 +2,11 @@ import { useCallback, useEffect, useRef, type MutableRefObject, type Dispatch, t
import maplibregl, { type StyleSpecification } from 'maplibre-gl'; import maplibregl, { type StyleSpecification } from 'maplibre-gl';
import { MapboxOverlay } from '@deck.gl/mapbox'; import { MapboxOverlay } from '@deck.gl/mapbox';
import { MaplibreDeckCustomLayer } from '../MaplibreDeckCustomLayer'; import { MaplibreDeckCustomLayer } from '../MaplibreDeckCustomLayer';
import type { BaseMapId, MapProjectionId } from '../types'; import type { BaseMapId, MapProjectionId, MapViewState } from '../types';
import { DECK_VIEW_ID } from '../constants'; import { DECK_VIEW_ID, ANCHORED_SHIP_ICON_ID } from '../constants';
import { kickRepaint, onMapStyleReady } from '../lib/mapCore'; import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
import { ensureSeamarkOverlay } from '../layers/seamark'; import { ensureSeamarkOverlay } from '../layers/seamark';
import { resolveMapStyle } from '../layers/bathymetry'; import { resolveMapStyle } from '../layers/bathymetry';
import { clearGlobeNativeLayers } from '../lib/layerHelpers';
export function useMapInit( export function useMapInit(
containerRef: MutableRefObject<HTMLDivElement | null>, containerRef: MutableRefObject<HTMLDivElement | null>,
@ -23,10 +22,14 @@ export function useMapInit(
showSeamark: boolean; showSeamark: boolean;
onViewBboxChange?: (bbox: [number, number, number, number]) => void; onViewBboxChange?: (bbox: [number, number, number, number]) => void;
setMapSyncEpoch: Dispatch<SetStateAction<number>>; setMapSyncEpoch: Dispatch<SetStateAction<number>>;
initialView?: MapViewState | null;
onViewStateChange?: (view: MapViewState) => void;
}, },
) { ) {
const { onViewBboxChange, setMapSyncEpoch, showSeamark } = opts; const { onViewBboxChange, setMapSyncEpoch, showSeamark } = opts;
const showSeamarkRef = useRef(showSeamark); const showSeamarkRef = useRef(showSeamark);
const onViewStateChangeRef = useRef(opts.onViewStateChange);
useEffect(() => { onViewStateChangeRef.current = opts.onViewStateChange; }, [opts.onViewStateChange]);
useEffect(() => { useEffect(() => {
showSeamarkRef.current = showSeamark; showSeamarkRef.current = showSeamark;
}, [showSeamark]); }, [showSeamark]);
@ -46,12 +49,6 @@ export function useMapInit(
} }
}, []); }, []);
const clearGlobeNativeLayersCb = useCallback(() => {
const map = mapRef.current;
if (!map) return;
clearGlobeNativeLayers(map);
}, []);
const pulseMapSync = useCallback(() => { const pulseMapSync = useCallback(() => {
setMapSyncEpoch((prev) => prev + 1); setMapSyncEpoch((prev) => prev + 1);
requestAnimationFrame(() => { requestAnimationFrame(() => {
@ -65,6 +62,7 @@ export function useMapInit(
let map: maplibregl.Map | null = null; let map: maplibregl.Map | null = null;
let cancelled = false; let cancelled = false;
let viewSaveTimer: ReturnType<typeof setInterval> | null = null;
const controller = new AbortController(); const controller = new AbortController();
(async () => { (async () => {
@ -77,13 +75,14 @@ export function useMapInit(
} }
if (cancelled || !containerRef.current) return; if (cancelled || !containerRef.current) return;
const iv = opts.initialView;
map = new maplibregl.Map({ map = new maplibregl.Map({
container: containerRef.current, container: containerRef.current,
style, style,
center: [126.5, 34.2], center: iv?.center ?? [126.5, 34.2],
zoom: 7, zoom: iv?.zoom ?? 7,
pitch: 45, pitch: iv?.pitch ?? 45,
bearing: 0, bearing: iv?.bearing ?? 0,
maxPitch: 85, maxPitch: 85,
dragRotate: true, dragRotate: true,
pitchWithRotate: true, pitchWithRotate: true,
@ -94,19 +93,72 @@ export function useMapInit(
map.addControl(new maplibregl.NavigationControl({ showZoom: true, showCompass: true }), 'top-left'); map.addControl(new maplibregl.NavigationControl({ showZoom: true, showCompass: true }), 'top-left');
map.addControl(new maplibregl.ScaleControl({ maxWidth: 120, unit: 'metric' }), 'bottom-left'); map.addControl(new maplibregl.ScaleControl({ maxWidth: 120, unit: 'metric' }), 'bottom-left');
// MapLibre 내부 placement TypeError 방어 + globe easing 경고 억제
// symbol layer 추가/제거와 render cycle 간 타이밍 이슈로 발생하는 에러 억제
// globe projection에서 scrollZoom이 easeTo(around)를 호출하면 경고 발생 → 구조적 한계로 억제
{
const origRender = (map as unknown as { _render: (arg?: number) => void })._render;
const origWarn = console.warn;
(map as unknown as { _render: (arg?: number) => void })._render = function (arg?: number) {
// globe 모드에서 scrollZoom의 easeTo around 경고 억제
// eslint-disable-next-line no-console
console.warn = function (...args: unknown[]) {
if (typeof args[0] === 'string') {
const msg = args[0] as string;
if (msg.includes('Easing around a point')) return;
// vertex 경고는 디버그용으로 1회만 출력 후 억제
if (msg.includes('Max vertices per segment')) {
origWarn.apply(console, args as [unknown, ...unknown[]]);
return;
}
}
origWarn.apply(console, args as [unknown, ...unknown[]]);
};
try {
origRender.call(this, arg);
} catch (e) {
if (e instanceof TypeError && (e.message?.includes("reading 'get'") || e.message?.includes('placement'))) {
return;
}
throw e;
} finally {
// eslint-disable-next-line no-console
console.warn = origWarn;
}
};
}
// Globe 모드 전환 시 지연을 제거하기 위해 ship.svg를 미리 로드
{
const SHIP_IMG_ID = 'ship-globe-icon';
const localMap = map;
void localMap
.loadImage('/assets/ship.svg')
.then((response) => {
if (cancelled || !localMap) return;
const img = (response as { data?: HTMLImageElement | ImageBitmap } | undefined)?.data;
if (!img) return;
try {
if (!localMap.hasImage(SHIP_IMG_ID)) localMap.addImage(SHIP_IMG_ID, img, { pixelRatio: 2, sdf: true });
if (!localMap.hasImage(ANCHORED_SHIP_ICON_ID)) localMap.addImage(ANCHORED_SHIP_ICON_ID, img, { pixelRatio: 2, sdf: true });
} catch {
// ignore — fallback canvas icon이 useGlobeShips에서 사용됨
}
})
.catch(() => {
// ignore — useGlobeShips에서 fallback 처리
});
}
mapRef.current = map; mapRef.current = map;
if (projectionRef.current === 'mercator') { // 양쪽 overlay를 모두 초기화 — projection 전환 시 재생성 비용 제거
const overlay = ensureMercatorOverlay(); ensureMercatorOverlay();
if (!overlay) return; globeDeckLayerRef.current = new MaplibreDeckCustomLayer({
overlayRef.current = overlay; id: 'deck-globe',
} else { viewId: DECK_VIEW_ID,
globeDeckLayerRef.current = new MaplibreDeckCustomLayer({ deckProps: { layers: [] },
id: 'deck-globe', });
viewId: DECK_VIEW_ID,
deckProps: { layers: [] },
});
}
function applyProjection() { function applyProjection() {
if (!map) return; if (!map) return;
@ -122,8 +174,9 @@ export function useMapInit(
onMapStyleReady(map, () => { onMapStyleReady(map, () => {
applyProjection(); applyProjection();
// deck-globe를 항상 추가 (projection과 무관)
const deckLayer = globeDeckLayerRef.current; const deckLayer = globeDeckLayerRef.current;
if (projectionRef.current === 'globe' && deckLayer && !map!.getLayer(deckLayer.id)) { if (deckLayer && !map!.getLayer(deckLayer.id)) {
try { try {
map!.addLayer(deckLayer); map!.addLayer(deckLayer);
} catch { } catch {
@ -132,7 +185,7 @@ export function useMapInit(
} }
if (!showSeamarkRef.current) return; if (!showSeamarkRef.current) return;
try { try {
ensureSeamarkOverlay(map!, 'bathymetry-lines'); ensureSeamarkOverlay(map!, 'bathymetry-lines-coarse');
} catch { } catch {
// ignore // ignore
} }
@ -147,10 +200,38 @@ export function useMapInit(
map.on('load', emitBbox); map.on('load', emitBbox);
map.on('moveend', emitBbox); map.on('moveend', emitBbox);
// 60초 인터벌로 뷰 상태 저장 (mercator일 때만)
viewSaveTimer = setInterval(() => {
const cb = onViewStateChangeRef.current;
if (!cb || !map || projectionRef.current !== 'mercator') return;
const c = map.getCenter();
cb({ center: [c.lng, c.lat], zoom: map.getZoom(), bearing: map.getBearing(), pitch: map.getPitch() });
}, 60_000);
map.once('load', () => { map.once('load', () => {
// Globe 배경(타일 밖)을 심해 색상과 맞춰 타일 경계 seam을 비가시화
try {
map!.setSky({
'sky-color': '#010610',
'horizon-color': '#010610',
'fog-color': '#010610',
'fog-ground-blend': 1,
'sky-horizon-blend': 0,
'atmosphere-blend': 0,
});
} catch {
// ignore
}
// 캔버스 배경도 심해색으로 통일
try {
map!.getCanvas().style.background = '#010610';
} catch {
// ignore
}
if (showSeamarkRef.current) { if (showSeamarkRef.current) {
try { try {
ensureSeamarkOverlay(map!, 'bathymetry-lines'); ensureSeamarkOverlay(map!, 'bathymetry-lines-coarse');
} catch { } catch {
// ignore // ignore
} }
@ -161,12 +242,22 @@ export function useMapInit(
// ignore // ignore
} }
} }
// 종속 hook들(useMapStyleSettings 등)이 저장된 설정을 적용하도록 트리거
setMapSyncEpoch((prev) => prev + 1);
}); });
})(); })();
return () => { return () => {
cancelled = true; cancelled = true;
controller.abort(); controller.abort();
if (viewSaveTimer) clearInterval(viewSaveTimer);
// 최종 뷰 상태 저장 (mercator일 때만 — globe 위치는 영속화하지 않음)
const cb = onViewStateChangeRef.current;
if (cb && map && projectionRef.current === 'mercator') {
const c = map.getCenter();
cb({ center: [c.lng, c.lat], zoom: map.getZoom(), bearing: map.getBearing(), pitch: map.getPitch() });
}
try { try {
globeDeckLayerRef.current?.requestFinalize(); globeDeckLayerRef.current?.requestFinalize();
@ -192,5 +283,5 @@ export function useMapInit(
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
return { ensureMercatorOverlay, clearGlobeNativeLayers: clearGlobeNativeLayersCb, pulseMapSync }; return { ensureMercatorOverlay, pulseMapSync };
} }

16
apps/web/src/widgets/map3d/hooks/useMapStyleSettings.ts
파일 보기

@ -35,7 +35,7 @@ function applyLabelLanguage(map: maplibregl.Map, lang: MapLabelLanguage) {
if (layer.type !== 'symbol') continue; if (layer.type !== 'symbol') continue;
const layout = (layer as { layout?: Record<string, unknown> }).layout; const layout = (layer as { layout?: Record<string, unknown> }).layout;
if (!layout?.['text-field']) continue; if (!layout?.['text-field']) continue;
if (layer.id === 'bathymetry-labels') continue; if (layer.id.startsWith('bathymetry-labels')) continue;
const textField = const textField =
lang === 'local' lang === 'local'
? ['get', 'name'] ? ['get', 'name']
@ -102,17 +102,19 @@ function applyWaterBaseColor(map: maplibregl.Map, fillColor: string) {
} }
function applyDepthGradient(map: maplibregl.Map, stops: DepthColorStop[]) { function applyDepthGradient(map: maplibregl.Map, stops: DepthColorStop[]) {
if (!map.getLayer('bathymetry-fill')) return;
const depth = ['to-number', ['get', 'depth']]; const depth = ['to-number', ['get', 'depth']];
const sorted = [...stops].sort((a, b) => a.depth - b.depth); const sorted = [...stops].sort((a, b) => a.depth - b.depth);
if (sorted.length === 0) return;
const expr: unknown[] = ['interpolate', ['linear'], depth]; const expr: unknown[] = ['interpolate', ['linear'], depth];
const deepest = sorted[0];
if (deepest) expr.push(-11000, darkenHex(deepest.color, 0.5));
for (const s of sorted) { for (const s of sorted) {
expr.push(s.depth, s.color); expr.push(s.depth, s.color);
} }
// 0m까지 확장 (최천층 stop이 0보다 깊으면)
const shallowest = sorted[sorted.length - 1]; const shallowest = sorted[sorted.length - 1];
if (shallowest) expr.push(0, lightenHex(shallowest.color, 1.8)); if (shallowest.depth < 0) {
expr.push(0, lightenHex(shallowest.color, 1.8));
}
if (!map.getLayer('bathymetry-fill')) return;
try { try {
map.setPaintProperty('bathymetry-fill', 'fill-color', expr as never); map.setPaintProperty('bathymetry-fill', 'fill-color', expr as never);
} catch { } catch {
@ -122,7 +124,7 @@ function applyDepthGradient(map: maplibregl.Map, stops: DepthColorStop[]) {
function applyDepthFontSize(map: maplibregl.Map, size: DepthFontSize) { function applyDepthFontSize(map: maplibregl.Map, size: DepthFontSize) {
const expr = DEPTH_FONT_SIZE_MAP[size]; const expr = DEPTH_FONT_SIZE_MAP[size];
for (const layerId of ['bathymetry-labels', 'bathymetry-landforms']) { for (const layerId of ['bathymetry-labels', 'bathymetry-labels-coarse', 'bathymetry-landforms']) {
if (!map.getLayer(layerId)) continue; if (!map.getLayer(layerId)) continue;
try { try {
map.setLayoutProperty(layerId, 'text-size', expr); map.setLayoutProperty(layerId, 'text-size', expr);
@ -133,7 +135,7 @@ function applyDepthFontSize(map: maplibregl.Map, size: DepthFontSize) {
} }
function applyDepthFontColor(map: maplibregl.Map, color: string) { function applyDepthFontColor(map: maplibregl.Map, color: string) {
for (const layerId of ['bathymetry-labels', 'bathymetry-landforms']) { for (const layerId of ['bathymetry-labels', 'bathymetry-labels-coarse', 'bathymetry-landforms']) {
if (!map.getLayer(layerId)) continue; if (!map.getLayer(layerId)) continue;
try { try {
map.setPaintProperty(layerId, 'text-color', color); map.setPaintProperty(layerId, 'text-color', color);

88
apps/web/src/widgets/map3d/hooks/useProjectionToggle.ts
파일 보기

@ -3,9 +3,7 @@ import type maplibregl from 'maplibre-gl';
import { MapboxOverlay } from '@deck.gl/mapbox'; import { MapboxOverlay } from '@deck.gl/mapbox';
import { MaplibreDeckCustomLayer } from '../MaplibreDeckCustomLayer'; import { MaplibreDeckCustomLayer } from '../MaplibreDeckCustomLayer';
import type { MapProjectionId } from '../types'; import type { MapProjectionId } from '../types';
import { DECK_VIEW_ID } from '../constants';
import { kickRepaint, onMapStyleReady, extractProjectionType } from '../lib/mapCore'; import { kickRepaint, onMapStyleReady, extractProjectionType } from '../lib/mapCore';
import { removeLayerIfExists } from '../lib/layerHelpers';
export function useProjectionToggle( export function useProjectionToggle(
mapRef: MutableRefObject<maplibregl.Map | null>, mapRef: MutableRefObject<maplibregl.Map | null>,
@ -15,14 +13,13 @@ export function useProjectionToggle(
projectionBusyRef: MutableRefObject<boolean>, projectionBusyRef: MutableRefObject<boolean>,
opts: { opts: {
projection: MapProjectionId; projection: MapProjectionId;
clearGlobeNativeLayers: () => void;
ensureMercatorOverlay: () => MapboxOverlay | null; ensureMercatorOverlay: () => MapboxOverlay | null;
onProjectionLoadingChange?: (loading: boolean) => void; onProjectionLoadingChange?: (loading: boolean) => void;
pulseMapSync: () => void; pulseMapSync: () => void;
setMapSyncEpoch: (updater: (prev: number) => number) => void; setMapSyncEpoch: (updater: (prev: number) => number) => void;
}, },
): () => void { ): () => void {
const { projection, clearGlobeNativeLayers, ensureMercatorOverlay, onProjectionLoadingChange, pulseMapSync, setMapSyncEpoch } = opts; const { projection, ensureMercatorOverlay, onProjectionLoadingChange, pulseMapSync, setMapSyncEpoch } = opts;
const projectionBusyTokenRef = useRef(0); const projectionBusyTokenRef = useRef(0);
const projectionBusyTimerRef = useRef<ReturnType<typeof window.setTimeout> | null>(null); const projectionBusyTimerRef = useRef<ReturnType<typeof window.setTimeout> | null>(null);
@ -71,7 +68,7 @@ export function useProjectionToggle(
if (!projectionBusyRef.current || projectionBusyTokenRef.current !== token) return; if (!projectionBusyRef.current || projectionBusyTokenRef.current !== token) return;
console.debug('Projection loading fallback timeout reached.'); console.debug('Projection loading fallback timeout reached.');
endProjectionLoading(); endProjectionLoading();
}, 4000); }, 2000);
}, },
[clearProjectionBusyTimer, endProjectionLoading, onProjectionLoadingChange], [clearProjectionBusyTimer, endProjectionLoading, onProjectionLoadingChange],
); );
@ -114,7 +111,6 @@ export function useProjectionToggle(
'pair-lines-ml', 'pair-lines-ml',
'fc-lines-ml', 'fc-lines-ml',
'pair-range-ml', 'pair-range-ml',
'fleet-circles-ml-fill',
'fleet-circles-ml', 'fleet-circles-ml',
]; ];
@ -176,45 +172,14 @@ export function useProjectionToggle(
if (isTransition) setProjectionLoading(true); if (isTransition) setProjectionLoading(true);
const disposeMercatorOverlays = () => { // 파괴하지 않고 레이어만 비움 — 양쪽 파이프라인 항상 유지
const disposeOne = (target: MapboxOverlay | null, toNull: 'base' | 'interaction') => { const quietMercatorOverlays = () => {
if (!target) return; try { overlayRef.current?.setProps({ layers: [] } as never); } catch { /* ignore */ }
try { try { overlayInteractionRef.current?.setProps({ layers: [] } as never); } catch { /* ignore */ }
target.setProps({ layers: [] } as never);
} catch {
// ignore
}
try {
map.removeControl(target as never);
} catch {
// ignore
}
try {
target.finalize();
} catch {
// ignore
}
if (toNull === 'base') {
overlayRef.current = null;
} else {
overlayInteractionRef.current = null;
}
};
disposeOne(overlayRef.current, 'base');
disposeOne(overlayInteractionRef.current, 'interaction');
}; };
const disposeGlobeDeckLayer = () => { const quietGlobeDeckLayer = () => {
const current = globeDeckLayerRef.current; try { globeDeckLayerRef.current?.setProps({ layers: [] } as never); } catch { /* ignore */ }
if (!current) return;
removeLayerIfExists(map, current.id);
try {
current.requestFinalize();
} catch {
// ignore
}
globeDeckLayerRef.current = null;
}; };
const syncProjectionAndDeck = () => { const syncProjectionAndDeck = () => {
@ -236,11 +201,9 @@ export function useProjectionToggle(
const shouldSwitchProjection = currentProjection !== next; const shouldSwitchProjection = currentProjection !== next;
if (projection === 'globe') { if (projection === 'globe') {
disposeMercatorOverlays(); quietMercatorOverlays();
clearGlobeNativeLayers();
} else { } else {
disposeGlobeDeckLayer(); quietGlobeDeckLayer();
clearGlobeNativeLayers();
} }
try { try {
@ -248,6 +211,17 @@ export function useProjectionToggle(
map.setProjection({ type: next }); map.setProjection({ type: next });
} }
map.setRenderWorldCopies(next !== 'globe'); map.setRenderWorldCopies(next !== 'globe');
// Globe에서는 easeTo around 미지원 → scrollZoom 동작 전환
try {
map.scrollZoom.disable();
if (next === 'globe') {
map.scrollZoom.enable();
} else {
map.scrollZoom.enable({ around: 'center' });
}
} catch { /* ignore */ }
if (shouldSwitchProjection && currentProjection !== next && !cancelled && retries < maxRetries) { if (shouldSwitchProjection && currentProjection !== next && !cancelled && retries < maxRetries) {
retries += 1; retries += 1;
window.requestAnimationFrame(() => syncProjectionAndDeck()); window.requestAnimationFrame(() => syncProjectionAndDeck());
@ -263,17 +237,9 @@ export function useProjectionToggle(
console.warn('Projection switch failed:', e); console.warn('Projection switch failed:', e);
} }
// 양쪽 overlay가 항상 존재하므로 재생성 불필요
// deck-globe가 map에서 빠져있을 경우에만 재추가
if (projection === 'globe') { if (projection === 'globe') {
disposeGlobeDeckLayer();
if (!globeDeckLayerRef.current) {
globeDeckLayerRef.current = new MaplibreDeckCustomLayer({
id: 'deck-globe',
viewId: DECK_VIEW_ID,
deckProps: { layers: [] },
});
}
const layer = globeDeckLayerRef.current; const layer = globeDeckLayerRef.current;
const layerId = layer?.id; const layerId = layer?.id;
if (layer && layerId && map.isStyleLoaded() && !map.getLayer(layerId)) { if (layer && layerId && map.isStyleLoaded() && !map.getLayer(layerId)) {
@ -282,14 +248,8 @@ export function useProjectionToggle(
} catch { } catch {
// ignore // ignore
} }
if (!map.getLayer(layerId) && !cancelled && retries < maxRetries) {
retries += 1;
window.requestAnimationFrame(() => syncProjectionAndDeck());
return;
}
} }
} else { } else {
disposeGlobeDeckLayer();
ensureMercatorOverlay(); ensureMercatorOverlay();
} }
@ -324,7 +284,7 @@ export function useProjectionToggle(
if (settleCleanup) settleCleanup(); if (settleCleanup) settleCleanup();
if (isTransition) setProjectionLoading(false); if (isTransition) setProjectionLoading(false);
}; };
}, [projection, clearGlobeNativeLayers, ensureMercatorOverlay, reorderGlobeFeatureLayers, setProjectionLoading]); }, [projection, ensureMercatorOverlay, reorderGlobeFeatureLayers, setProjectionLoading]);
return reorderGlobeFeatureLayers; return reorderGlobeFeatureLayers;
} }

78
apps/web/src/widgets/map3d/hooks/useZonesLayer.ts
파일 보기

@ -1,4 +1,4 @@
import { useEffect, type MutableRefObject } from 'react'; import { useEffect, useMemo, type MutableRefObject } from 'react';
import maplibregl, { import maplibregl, {
type GeoJSONSource, type GeoJSONSource,
type GeoJSONSourceSpecification, type GeoJSONSourceSpecification,
@ -10,6 +10,34 @@ import type { ZonesGeoJson } from '../../../entities/zone/api/useZones';
import type { MapToggleState } from '../../../features/mapToggles/MapToggles'; import type { MapToggleState } from '../../../features/mapToggles/MapToggles';
import type { BaseMapId, MapProjectionId } from '../types'; import type { BaseMapId, MapProjectionId } from '../types';
import { kickRepaint, onMapStyleReady } from '../lib/mapCore'; import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
import { guardedSetVisibility } from '../lib/layerHelpers';
/** Globe tessellation에서 vertex 65535 초과를 방지하기 위해 좌표 수를 줄임.
* 수역 폴리곤(해안선 디테일 2100+ vertex)이 globe에서 70,000+로 폭증하므로
* ring당 최대 maxPts개로 서브샘플링. 라벨 centroid에는 영향 없음. */
function simplifyZonesForGlobe(zones: ZonesGeoJson): ZonesGeoJson {
const MAX_PTS = 60;
const subsample = (ring: GeoJSON.Position[]): GeoJSON.Position[] => {
if (ring.length <= MAX_PTS) return ring;
const step = Math.ceil(ring.length / MAX_PTS);
const out: GeoJSON.Position[] = [ring[0]];
for (let i = step; i < ring.length - 1; i += step) out.push(ring[i]);
out.push(ring[0]); // close ring
return out;
};
return {
...zones,
features: zones.features.map((f) => ({
...f,
geometry: {
...f.geometry,
coordinates: f.geometry.coordinates.map((polygon) =>
polygon.map((ring) => subsample(ring)),
),
},
})),
};
}
export function useZonesLayer( export function useZonesLayer(
mapRef: MutableRefObject<maplibregl.Map | null>, mapRef: MutableRefObject<maplibregl.Map | null>,
@ -26,6 +54,12 @@ export function useZonesLayer(
) { ) {
const { zones, overlays, projection, baseMap, hoveredZoneId, mapSyncEpoch } = opts; const { zones, overlays, projection, baseMap, hoveredZoneId, mapSyncEpoch } = opts;
// globe용 간소화 데이터를 미리 캐싱 — ensure() 내 매번 재계산 방지
const simplifiedZones = useMemo(
() => (zones ? simplifyZonesForGlobe(zones) : null),
[zones],
);
useEffect(() => { useEffect(() => {
const map = mapRef.current; const map = mapRef.current;
if (!map) return; if (!map) return;
@ -47,33 +81,31 @@ export function useZonesLayer(
zoneLabelExpr.push(['coalesce', ['get', 'zoneName'], ['get', 'zoneLabel'], ['get', 'NAME'], '수역']); zoneLabelExpr.push(['coalesce', ['get', 'zoneName'], ['get', 'zoneLabel'], ['get', 'NAME'], '수역']);
const ensure = () => { const ensure = () => {
if (projectionBusyRef.current) return; // 소스 데이터 간소화 — projectionBusy 중에도 실행해야 함
const visibility = overlays.zones ? 'visible' : 'none'; // globe 전환 시 projectionBusy 가드 뒤에서만 실행하면 MapLibre가
try { // 원본(2100+ vertex) 데이터로 globe tessellation → 73,000+ vertex → 노란 막대
if (map.getLayer(fillId)) map.setLayoutProperty(fillId, 'visibility', visibility); const sourceData = projection === 'globe' ? simplifiedZones : zones;
} catch { if (sourceData) {
// ignore try {
} const existing = map.getSource(srcId) as GeoJSONSource | undefined;
try { if (existing) existing.setData(sourceData);
if (map.getLayer(lineId)) map.setLayoutProperty(lineId, 'visibility', visibility); } catch { /* ignore — source may not exist yet */ }
} catch {
// ignore
}
try {
if (map.getLayer(labelId)) map.setLayoutProperty(labelId, 'visibility', visibility);
} catch {
// ignore
} }
const visibility: 'visible' | 'none' = overlays.zones ? 'visible' : 'none';
guardedSetVisibility(map, fillId, visibility);
guardedSetVisibility(map, lineId, visibility);
guardedSetVisibility(map, labelId, visibility);
if (projectionBusyRef.current) return;
if (!zones) return; if (!zones) return;
if (!map.isStyleLoaded()) return; if (!map.isStyleLoaded()) return;
try { try {
const existing = map.getSource(srcId) as GeoJSONSource | undefined; // 소스가 아직 없으면 생성 (setData는 위에서 이미 처리됨)
if (existing) { if (!map.getSource(srcId)) {
existing.setData(zones); const data = projection === 'globe' ? simplifiedZones ?? zones : zones;
} else { map.addSource(srcId, { type: 'geojson', data: data! } as GeoJSONSourceSpecification);
map.addSource(srcId, { type: 'geojson', data: zones } as GeoJSONSourceSpecification);
} }
const style = map.getStyle(); const style = map.getStyle();
@ -226,5 +258,5 @@ export function useZonesLayer(
return () => { return () => {
stop(); stop();
}; };
}, [zones, overlays.zones, projection, baseMap, hoveredZoneId, mapSyncEpoch, reorderGlobeFeatureLayers]); }, [zones, simplifiedZones, overlays.zones, projection, baseMap, hoveredZoneId, mapSyncEpoch, reorderGlobeFeatureLayers]);
} }

202
apps/web/src/widgets/map3d/layers/bathymetry.ts
파일 보기

@ -11,10 +11,53 @@ export const SHALLOW_WATER_LINE_DEFAULT = '#114f5c';
const BATHY_ZOOM_RANGES: BathyZoomRange[] = [ const BATHY_ZOOM_RANGES: BathyZoomRange[] = [
{ id: 'bathymetry-fill', mercator: [3, 24], globe: [3, 24] }, { id: 'bathymetry-fill', mercator: [3, 24], globe: [3, 24] },
{ id: 'bathymetry-borders', mercator: [5, 24], globe: [5, 24] }, { id: 'bathymetry-borders-major', mercator: [3, 7], globe: [3, 7] },
{ id: 'bathymetry-borders-major', mercator: [3, 24], globe: [3, 24] }, { id: 'bathymetry-borders', mercator: [7, 24], globe: [7, 24] },
{ id: 'bathymetry-lines-coarse', mercator: [5, 7], globe: [5, 7] },
{ id: 'bathymetry-lines-major', mercator: [7, 9], globe: [7, 9] },
{ id: 'bathymetry-lines-detail', mercator: [9, 24], globe: [9, 24] },
{ id: 'bathymetry-labels-coarse', mercator: [6, 9], globe: [6, 9] },
{ id: 'bathymetry-labels', mercator: [9, 24], globe: [9, 24] },
]; ];
/**
* 줌 기반 LOD — 줌아웃 시 vertex가 폭증하는 육지 레이어의 minzoom을 올려
* 광역 뷰에서는 생략하고, 줌인 시 자연스럽게 디테일이 나타나도록 함.
* 해양 서비스 특성상 육지 디테일은 연안 확대 시에만 필요.
*/
function applyLandLayerLOD(style: StyleSpecification): void {
if (!style.layers || !Array.isArray(style.layers)) return;
// source-layer → 렌더링을 시작할 최소 줌 레벨
// globe 모드 줌아웃 시 vertex 65535 초과로 GPU 렌더링 아티팩트(노란 막대) 방지
const LOD_MINZOOM: Record<string, number> = {
'landcover': 9,
'globallandcover': 9,
'landuse': 11,
'boundary': 5,
'transportation': 8,
'transportation_name': 10,
'building': 14,
'housenumber': 16,
'aeroway': 11,
'park': 10,
'mountain_peak': 11,
};
for (const layer of style.layers as unknown as LayerSpecification[]) {
const spec = layer as Record<string, unknown>;
const sourceLayer = spec['source-layer'] as string | undefined;
if (!sourceLayer) continue;
const lodMin = LOD_MINZOOM[sourceLayer];
if (lodMin === undefined) continue;
// 기존 minzoom보다 높을 때만 덮어씀
const current = (spec.minzoom as number) ?? 0;
if (lodMin > current) {
spec.minzoom = lodMin;
}
}
}
export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerKey: string) { export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerKey: string) {
const oceanSourceId = 'maptiler-ocean'; const oceanSourceId = 'maptiler-ocean';
@ -31,17 +74,13 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
const depth = ['to-number', ['get', 'depth']] as unknown as number[]; const depth = ['to-number', ['get', 'depth']] as unknown as number[];
const depthLabel = ['concat', ['to-string', ['*', depth, -1]], 'm'] as unknown as string[]; const depthLabel = ['concat', ['to-string', ['*', depth, -1]], 'm'] as unknown as string[];
// Bug #3 fix: shallow depths now use brighter teal tones to distinguish from deep ocean // 수심 색상: 전체 범위 (-8000m ~ 0m)
const bathyFillColor = [ const bathyFillColor = [
'interpolate', 'interpolate',
['linear'], ['linear'],
depth, depth,
-11000,
'#00040b',
-8000, -8000,
'#010610', '#010610',
-6000,
'#020816',
-4000, -4000,
'#030c1c', '#030c1c',
-2000, -2000,
@ -64,6 +103,15 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
'#2097a6', '#2097a6',
] as const; ] as const;
// --- Depth tiers for zoom-based LOD ---
// 줌 기반 LOD로 vertex 제어 — 줌아웃에선 주요 등심선만, 줌인에서 점진적 디테일
const DEPTHS_COARSE = [-1000, -2000];
const DEPTHS_MEDIUM = [-100, -500, -1000, -2000, -4000];
const DEPTHS_DETAIL = [-50, -100, -200, -500, -1000, -2000, -4000, -8000];
const depthIn = (depths: number[]) =>
['in', depth, ['literal', depths]] as unknown[];
// === Fill (contour polygons) — 단일 레이어, 전체 depth ===
const bathyFill: LayerSpecification = { const bathyFill: LayerSpecification = {
id: 'bathymetry-fill', id: 'bathymetry-fill',
type: 'fill', type: 'fill',
@ -77,98 +125,132 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
}, },
} as unknown as LayerSpecification; } as unknown as LayerSpecification;
const bathyBandBorders: LayerSpecification = { // === Borders (contour polygon edges) — 2-tier LOD ===
// z3-z7: 1000m, 2000m 경계만
const bathyBordersMajor: LayerSpecification = {
id: 'bathymetry-borders-major',
type: 'line',
source: oceanSourceId,
'source-layer': 'contour',
minzoom: 3,
maxzoom: 7,
filter: depthIn(DEPTHS_COARSE) as unknown as unknown[],
paint: {
'line-color': 'rgba(255,255,255,0.14)',
'line-opacity': ['interpolate', ['linear'], ['zoom'], 3, 0.10, 6, 0.16],
'line-blur': ['interpolate', ['linear'], ['zoom'], 3, 0.5, 6, 0.35],
'line-width': ['interpolate', ['linear'], ['zoom'], 3, 0.25, 6, 0.4],
},
} as unknown as LayerSpecification;
// z7+: 전체 등심선 경계
const bathyBorders: LayerSpecification = {
id: 'bathymetry-borders', id: 'bathymetry-borders',
type: 'line', type: 'line',
source: oceanSourceId, source: oceanSourceId,
'source-layer': 'contour', 'source-layer': 'contour',
minzoom: 5, // fill은 3부터, borders는 5부터 minzoom: 7,
maxzoom: 24, maxzoom: 24,
paint: { paint: {
'line-color': 'rgba(255,255,255,0.06)', 'line-color': 'rgba(255,255,255,0.06)',
'line-opacity': ['interpolate', ['linear'], ['zoom'], 4, 0.12, 8, 0.18, 12, 0.22], 'line-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0.18, 12, 0.22],
'line-blur': ['interpolate', ['linear'], ['zoom'], 4, 0.8, 10, 0.2], 'line-blur': ['interpolate', ['linear'], ['zoom'], 7, 0.3, 10, 0.2],
'line-width': ['interpolate', ['linear'], ['zoom'], 4, 0.2, 8, 0.35, 12, 0.6], 'line-width': ['interpolate', ['linear'], ['zoom'], 7, 0.35, 12, 0.6],
}, },
} as unknown as LayerSpecification; } as unknown as LayerSpecification;
const bathyLinesMinor: LayerSpecification = { // === Contour lines (contour_line) — 3-tier LOD ===
id: 'bathymetry-lines', // z5-z7: 1000m, 2000m만
const bathyLinesCoarse: LayerSpecification = {
id: 'bathymetry-lines-coarse',
type: 'line', type: 'line',
source: oceanSourceId, source: oceanSourceId,
'source-layer': 'contour_line', 'source-layer': 'contour_line',
minzoom: 7, minzoom: 5,
maxzoom: 7,
filter: depthIn(DEPTHS_COARSE) as unknown as unknown[],
paint: { paint: {
'line-color': [ 'line-color': 'rgba(255,255,255,0.12)',
'interpolate', 'line-opacity': ['interpolate', ['linear'], ['zoom'], 5, 0.15, 7, 0.22],
['linear'], 'line-blur': 0.5,
depth, 'line-width': ['interpolate', ['linear'], ['zoom'], 5, 0.4, 7, 0.6],
-11000,
'rgba(255,255,255,0.04)',
-6000,
'rgba(255,255,255,0.05)',
-2000,
'rgba(255,255,255,0.07)',
0,
'rgba(255,255,255,0.10)',
],
'line-opacity': ['interpolate', ['linear'], ['zoom'], 8, 0.18, 10, 0.22, 12, 0.28],
'line-blur': ['interpolate', ['linear'], ['zoom'], 8, 0.8, 11, 0.3],
'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0.35, 10, 0.55, 12, 0.85],
}, },
} as unknown as LayerSpecification; } as unknown as LayerSpecification;
const majorDepths = [-50, -100, -200, -500, -1000, -2000, -4000, -6000, -8000, -9500]; // z7-z9: 100, 500, 1000, 2000, 4000m
const bathyMajorDepthFilter: unknown[] = [
'in',
['to-number', ['get', 'depth']],
['literal', majorDepths],
] as unknown[];
const bathyLinesMajor: LayerSpecification = { const bathyLinesMajor: LayerSpecification = {
id: 'bathymetry-lines-major', id: 'bathymetry-lines-major',
type: 'line', type: 'line',
source: oceanSourceId, source: oceanSourceId,
'source-layer': 'contour_line', 'source-layer': 'contour_line',
minzoom: 7, minzoom: 7,
maxzoom: 24, maxzoom: 9,
filter: bathyMajorDepthFilter as unknown as unknown[], filter: depthIn(DEPTHS_MEDIUM) as unknown as unknown[],
paint: { paint: {
'line-color': 'rgba(255,255,255,0.16)', 'line-color': 'rgba(255,255,255,0.16)',
'line-opacity': ['interpolate', ['linear'], ['zoom'], 8, 0.22, 10, 0.28, 12, 0.34], 'line-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0.22, 9, 0.28],
'line-blur': ['interpolate', ['linear'], ['zoom'], 8, 0.4, 11, 0.2], 'line-blur': ['interpolate', ['linear'], ['zoom'], 7, 0.4, 9, 0.2],
'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0.6, 10, 0.95, 12, 1.3], 'line-width': ['interpolate', ['linear'], ['zoom'], 7, 0.6, 9, 0.95],
}, },
} as unknown as LayerSpecification; } as unknown as LayerSpecification;
const bathyBandBordersMajor: LayerSpecification = { // z9+: 50~8000m (풀 디테일)
id: 'bathymetry-borders-major', const bathyLinesDetail: LayerSpecification = {
id: 'bathymetry-lines-detail',
type: 'line', type: 'line',
source: oceanSourceId, source: oceanSourceId,
'source-layer': 'contour', 'source-layer': 'contour_line',
minzoom: 3, minzoom: 9,
maxzoom: 24, maxzoom: 24,
filter: bathyMajorDepthFilter as unknown as unknown[], filter: depthIn(DEPTHS_DETAIL) as unknown as unknown[],
paint: { paint: {
'line-color': 'rgba(255,255,255,0.14)', 'line-color': 'rgba(255,255,255,0.16)',
'line-opacity': ['interpolate', ['linear'], ['zoom'], 3, 0.10, 6, 0.16, 8, 0.2, 12, 0.26], 'line-opacity': ['interpolate', ['linear'], ['zoom'], 9, 0.28, 12, 0.34],
'line-blur': ['interpolate', ['linear'], ['zoom'], 3, 0.5, 6, 0.35, 10, 0.15], 'line-blur': ['interpolate', ['linear'], ['zoom'], 9, 0.2, 11, 0.15],
'line-width': ['interpolate', ['linear'], ['zoom'], 3, 0.25, 6, 0.4, 8, 0.55, 12, 0.85], 'line-width': ['interpolate', ['linear'], ['zoom'], 9, 0.95, 12, 1.3],
}, },
} as unknown as LayerSpecification; } as unknown as LayerSpecification;
// === Labels — 2-tier LOD ===
// z6-z9: 1000m, 2000m 라벨만
const bathyLabelsCoarse: LayerSpecification = {
id: 'bathymetry-labels-coarse',
type: 'symbol',
source: oceanSourceId,
'source-layer': 'contour_line',
minzoom: 6,
maxzoom: 9,
filter: depthIn(DEPTHS_COARSE) as unknown as unknown[],
layout: {
'symbol-placement': 'line',
'text-field': depthLabel,
'text-font': ['Noto Sans Regular', 'Open Sans Regular'],
'text-size': ['interpolate', ['linear'], ['zoom'], 6, 10, 9, 12],
'text-allow-overlap': false,
'text-padding': 4,
'text-rotation-alignment': 'map',
},
paint: {
'text-color': 'rgba(226,232,240,0.78)',
'text-halo-color': 'rgba(2,6,23,0.88)',
'text-halo-width': 1.2,
'text-halo-blur': 0.5,
},
} as unknown as LayerSpecification;
// z9+: 100~4000m 라벨
const bathyLabels: LayerSpecification = { const bathyLabels: LayerSpecification = {
id: 'bathymetry-labels', id: 'bathymetry-labels',
type: 'symbol', type: 'symbol',
source: oceanSourceId, source: oceanSourceId,
'source-layer': 'contour_line', 'source-layer': 'contour_line',
minzoom: 7, minzoom: 9,
filter: bathyMajorDepthFilter as unknown as unknown[], filter: depthIn(DEPTHS_MEDIUM) as unknown as unknown[],
layout: { layout: {
'symbol-placement': 'line', 'symbol-placement': 'line',
'text-field': depthLabel, 'text-field': depthLabel,
'text-font': ['Noto Sans Regular', 'Open Sans Regular'], 'text-font': ['Noto Sans Regular', 'Open Sans Regular'],
'text-size': ['interpolate', ['linear'], ['zoom'], 7, 10, 9, 12, 11, 14, 13, 16], 'text-size': ['interpolate', ['linear'], ['zoom'], 9, 12, 11, 14, 13, 16],
'text-allow-overlap': false, 'text-allow-overlap': false,
'text-padding': 4, 'text-padding': 4,
'text-rotation-alignment': 'map', 'text-rotation-alignment': 'map',
@ -244,10 +326,12 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
const toInsert = [ const toInsert = [
bathyFill, bathyFill,
bathyBandBorders, bathyBordersMajor,
bathyBandBordersMajor, bathyBorders,
bathyLinesMinor, bathyLinesCoarse,
bathyLinesMajor, bathyLinesMajor,
bathyLinesDetail,
bathyLabelsCoarse,
bathyLabels, bathyLabels,
landformLabels, landformLabels,
].filter((l) => !existingIds.has(l.id)); ].filter((l) => !existingIds.has(l.id));
@ -273,6 +357,7 @@ export function applyBathymetryZoomProfile(map: maplibregl.Map, baseMap: BaseMap
// ignore // ignore
} }
} }
} }
function applyKoreanLabels(style: StyleSpecification) { function applyKoreanLabels(style: StyleSpecification) {
@ -298,6 +383,7 @@ export async function resolveInitialMapStyle(signal: AbortSignal): Promise<strin
const res = await fetch(styleUrl, { signal, headers: { accept: 'application/json' } }); const res = await fetch(styleUrl, { signal, headers: { accept: 'application/json' } });
if (!res.ok) throw new Error(`MapTiler style fetch failed: ${res.status} ${res.statusText}`); if (!res.ok) throw new Error(`MapTiler style fetch failed: ${res.status} ${res.statusText}`);
const json = (await res.json()) as StyleSpecification; const json = (await res.json()) as StyleSpecification;
applyLandLayerLOD(json);
applyKoreanLabels(json); applyKoreanLabels(json);
injectOceanBathymetryLayers(json, key); injectOceanBathymetryLayers(json, key);
return json; return json;

19
apps/web/src/widgets/map3d/lib/geometry.ts
파일 보기

@ -38,20 +38,19 @@ export function destinationPointLngLat(
return [outLon, outLat]; return [outLon, outLat];
} }
export function circleRingLngLat(center: [number, number], radiusMeters: number, steps = 72): [number, number][] { export function circleRingLngLat(center: [number, number], radiusMeters: number, steps = 36): [number, number][] {
const [lon0, lat0] = center; // 반경이 지구 둘레의 1/4 (≈10,000km)을 넘으면 클램핑
const latRad = lat0 * DEG2RAD; const r = clampNumber(radiusMeters, 0, EARTH_RADIUS_M * Math.PI * 0.5);
const cosLat = Math.max(1e-6, Math.cos(latRad));
const r = Math.max(0, radiusMeters);
const ring: [number, number][] = []; const ring: [number, number][] = [];
for (let i = 0; i <= steps; i++) { for (let i = 0; i <= steps; i++) {
const a = (i / steps) * Math.PI * 2; const a = (i / steps) * Math.PI * 2;
const dy = r * Math.sin(a); const pt = destinationPointLngLat(center, a * RAD2DEG, r);
const dx = r * Math.cos(a); ring.push(pt);
const dLat = (dy / EARTH_RADIUS_M) / DEG2RAD; }
const dLon = (dx / (EARTH_RADIUS_M * cosLat)) / DEG2RAD; // 고리 닫기 보정
ring.push([lon0 + dLon, lat0 + dLat]); if (ring.length > 1) {
ring[ring.length - 1] = ring[0];
} }
return ring; return ring;
} }

28
apps/web/src/widgets/map3d/lib/layerHelpers.ts
파일 보기

@ -24,17 +24,10 @@ export function removeSourceIfExists(map: maplibregl.Map, sourceId: string) {
} }
} }
// Ship 레이어/소스는 useGlobeShips에서 visibility 토글로 관리 (재생성 비용 회피)
const GLOBE_NATIVE_LAYER_IDS = [ const GLOBE_NATIVE_LAYER_IDS = [
'ships-globe-halo',
'ships-globe-outline',
'ships-globe',
'ships-globe-label',
'ships-globe-hover-halo',
'ships-globe-hover-outline',
'ships-globe-hover',
'pair-lines-ml', 'pair-lines-ml',
'fc-lines-ml', 'fc-lines-ml',
'fleet-circles-ml-fill',
'fleet-circles-ml', 'fleet-circles-ml',
'pair-range-ml', 'pair-range-ml',
'subcables-hitarea', 'subcables-hitarea',
@ -47,12 +40,9 @@ const GLOBE_NATIVE_LAYER_IDS = [
]; ];
const GLOBE_NATIVE_SOURCE_IDS = [ const GLOBE_NATIVE_SOURCE_IDS = [
'ships-globe-src',
'ships-globe-hover-src',
'pair-lines-ml-src', 'pair-lines-ml-src',
'fc-lines-ml-src', 'fc-lines-ml-src',
'fleet-circles-ml-src', 'fleet-circles-ml-src',
'fleet-circles-ml-fill-src',
'pair-range-ml-src', 'pair-range-ml-src',
'subcables-src', 'subcables-src',
'subcables-pts-src', 'subcables-pts-src',
@ -104,6 +94,22 @@ export function setLayerVisibility(map: maplibregl.Map, layerId: string, visible
} }
} }
/**
* setLayoutProperty('visibility') wrapper — 현재 값과 동일하면 호출 생략.
* MapLibre는 setLayoutProperty 호출 시 항상 style._changed = true를 설정하여
* 모든 symbol layer의 placement를 재계산시킴. text-allow-overlap:false 라벨이
* 충돌 검사에 의해 사라지는 문제를 방지하기 위해, 값이 실제로 바뀔 때만 호출.
*/
export function guardedSetVisibility(map: maplibregl.Map, layerId: string, target: 'visible' | 'none') {
if (!map.getLayer(layerId)) return;
try {
if (map.getLayoutProperty(layerId, 'visibility') === target) return;
map.setLayoutProperty(layerId, 'visibility', target);
} catch {
// ignore
}
}
export function cleanupLayers( export function cleanupLayers(
map: maplibregl.Map, map: maplibregl.Map,
layerIds: string[], layerIds: string[],

3
apps/web/src/widgets/map3d/lib/tooltips.ts
파일 보기

@ -1,5 +1,6 @@
import type { AisTarget } from '../../../entities/aisTarget/model/types'; import type { AisTarget } from '../../../entities/aisTarget/model/types';
import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types'; import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types';
import { fmtIsoFull } from '../../../shared/lib/datetime';
import { isFiniteNumber, toSafeNumber } from './setUtils'; import { isFiniteNumber, toSafeNumber } from './setUtils';
export function formatNm(value: number | null | undefined) { export function formatNm(value: number | null | undefined) {
@ -54,7 +55,7 @@ export function getShipTooltipHtml({
<div style="font-weight: 700; margin-bottom: 4px;">${name}</div> <div style="font-weight: 700; margin-bottom: 4px;">${name}</div>
<div>MMSI: <b>${mmsi}</b>${vesselType ? ` · ${vesselType}` : ''}</div> <div>MMSI: <b>${mmsi}</b>${vesselType ? ` · ${vesselType}` : ''}</div>
<div>SOG: <b>${sog ?? '?'}</b> kt · COG: <b>${cog ?? '?'}</b>°</div> <div>SOG: <b>${sog ?? '?'}</b> kt · COG: <b>${cog ?? '?'}</b>°</div>
${msg ? `<div style="opacity:.7; font-size: 11px; margin-top: 4px;">${msg}</div>` : ''} ${msg ? `<div style="opacity:.7; font-size: 11px; margin-top: 4px;">${fmtIsoFull(msg)}</div>` : ''}
${legacyHtml} ${legacyHtml}
</div>`, </div>`,
}; };

10
apps/web/src/widgets/map3d/types.ts
파일 보기

@ -15,6 +15,13 @@ export type Map3DSettings = {
export type BaseMapId = 'enhanced' | 'legacy'; export type BaseMapId = 'enhanced' | 'legacy';
export type MapProjectionId = 'mercator' | 'globe'; export type MapProjectionId = 'mercator' | 'globe';
export interface MapViewState {
center: [number, number]; // [lon, lat]
zoom: number;
bearing: number;
pitch: number;
}
export interface Map3DProps { export interface Map3DProps {
targets: AisTarget[]; targets: AisTarget[];
zones: ZonesGeoJson | null; zones: ZonesGeoJson | null;
@ -52,6 +59,9 @@ export interface Map3DProps {
onHoverCable?: (cableId: string | null) => void; onHoverCable?: (cableId: string | null) => void;
onClickCable?: (cableId: string | null) => void; onClickCable?: (cableId: string | null) => void;
mapStyleSettings?: MapStyleSettings; mapStyleSettings?: MapStyleSettings;
initialView?: MapViewState | null;
onViewStateChange?: (view: MapViewState) => void;
onGlobeShipsReady?: (ready: boolean) => void;
} }
export type DashSeg = { export type DashSeg = {