fix(map): 심해 등심선 복원 + 전체 depth LOD

- shallowFilter 제거: 전체 depth 범위 렌더링 복원
- bathyFillColor: -8000m, -4000m 색상 stop 복원
- DEPTHS_MEDIUM: -4000m 추가 (z7-9)
- DEPTHS_DETAIL: -4000m, -8000m 추가 (z9+)
- 줌 기반 LOD가 vertex 제어 담당 (depth 필터 불필요)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
htlee 2026-02-16 15:21:46 +09:00
부모 f50c227fd4
커밋 2095503e50

파일 보기

@ -74,11 +74,15 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
const depth = ['to-number', ['get', 'depth']] as unknown as number[];
const depthLabel = ['concat', ['to-string', ['*', depth, -1]], 'm'] as unknown as string[];
// 수심 색상: -2000m에서 절단 — 심해는 베이스 수색과 동일하게 처리
// 수심 색상: 전체 범위 (-8000m ~ 0m)
const bathyFillColor = [
'interpolate',
['linear'],
depth,
-8000,
'#010610',
-4000,
'#030c1c',
-2000,
'#041022',
-1000,
@ -99,17 +103,15 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
'#2097a6',
] as const;
// depth >= -2000 필터: -2000m보다 깊은 등심선은 GPU에 전달하지 않음
const shallowFilter = ['>=', depth, -2000] as unknown[];
// --- Depth tiers for zoom-based LOD ---
// 줌 기반 LOD로 vertex 제어 — 줌아웃에선 주요 등심선만, 줌인에서 점진적 디테일
const DEPTHS_COARSE = [-1000, -2000];
const DEPTHS_MEDIUM = [-100, -500, -1000, -2000];
const DEPTHS_DETAIL = [-50, -100, -200, -500, -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[]) =>
['all', shallowFilter, ['in', depth, ['literal', depths]]] as unknown[];
['in', depth, ['literal', depths]] as unknown[];
// === Fill (contour polygons) — 단일 레이어, shallowFilter만 적용 ===
// === Fill (contour polygons) — 전체 depth, 줌에 따라 자연스럽게 표시 ===
const bathyFill: LayerSpecification = {
id: 'bathymetry-fill',
type: 'fill',
@ -117,7 +119,6 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
'source-layer': 'contour',
minzoom: 3,
maxzoom: 24,
filter: shallowFilter as unknown as unknown[],
paint: {
'fill-color': bathyFillColor,
'fill-opacity': ['interpolate', ['linear'], ['zoom'], 0, 0.9, 5, 0.88, 8, 0.84, 10, 0.78],
@ -142,7 +143,7 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
},
} as unknown as LayerSpecification;
// z7+: 전체 shallow 등심선 경계
// z7+: 전체 등심선 경계
const bathyBorders: LayerSpecification = {
id: 'bathymetry-borders',
type: 'line',
@ -150,7 +151,6 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
'source-layer': 'contour',
minzoom: 7,
maxzoom: 24,
filter: shallowFilter as unknown as unknown[],
paint: {
'line-color': 'rgba(255,255,255,0.06)',
'line-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0.18, 12, 0.22],
@ -177,7 +177,7 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
},
} as unknown as LayerSpecification;
// z7-z9: 100, 500, 1000, 2000m
// z7-z9: 100, 500, 1000, 2000, 4000m
const bathyLinesMajor: LayerSpecification = {
id: 'bathymetry-lines-major',
type: 'line',
@ -194,7 +194,7 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
},
} as unknown as LayerSpecification;
// z9+: 50, 100, 200, 500, 1000, 2000m (풀 디테일)
// z9+: 50~8000m (풀 디테일)
const bathyLinesDetail: LayerSpecification = {
id: 'bathymetry-lines-detail',
type: 'line',
@ -238,7 +238,7 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
},
} as unknown as LayerSpecification;
// z9+: 100, 500, 1000, 2000m 라벨
// z9+: 100~4000m 라벨
const bathyLabels: LayerSpecification = {
id: 'bathymetry-labels',
type: 'symbol',