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:
부모
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',
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user