feat(map): 수심 레이블 개선 + 한글 지명 적용

- 수심 레이블: minzoom 10→7, 텍스트 크기 확대, halo 가독성 개선
- 해저 지형명: minzoom 8→6, 텍스트 크기 확대
- MapTiler 베이스맵 한글 지명 적용 (name:ko fallback)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
htlee 2026-02-16 05:47:16 +09:00
부모 f5ef24c02f
커밋 289f1bebc0

파일 보기

@ -159,22 +159,22 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
type: 'symbol',
source: oceanSourceId,
'source-layer': 'contour_line',
minzoom: 10,
minzoom: 7,
filter: bathyMajorDepthFilter as unknown as unknown[],
layout: {
'symbol-placement': 'line',
'text-field': depthLabel,
'text-font': ['Noto Sans Regular', 'Open Sans Regular'],
'text-size': ['interpolate', ['linear'], ['zoom'], 10, 12, 12, 14, 14, 15],
'text-size': ['interpolate', ['linear'], ['zoom'], 7, 10, 9, 12, 11, 14, 13, 16],
'text-allow-overlap': false,
'text-padding': 2,
'text-padding': 4,
'text-rotation-alignment': 'map',
},
paint: {
'text-color': 'rgba(226,232,240,0.72)',
'text-halo-color': 'rgba(2,6,23,0.82)',
'text-halo-width': 1.0,
'text-halo-blur': 0.6,
'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;
@ -183,21 +183,21 @@ export function injectOceanBathymetryLayers(style: StyleSpecification, maptilerK
type: 'symbol',
source: oceanSourceId,
'source-layer': 'landform',
minzoom: 8,
minzoom: 6,
filter: ['has', 'name'] as unknown as unknown[],
layout: {
'text-field': ['get', 'name'] as unknown as unknown[],
'text-font': ['Noto Sans Italic', 'Noto Sans Regular', 'Open Sans Italic', 'Open Sans Regular'],
'text-size': ['interpolate', ['linear'], ['zoom'], 8, 11, 10, 12, 12, 13],
'text-size': ['interpolate', ['linear'], ['zoom'], 6, 10, 8, 12, 10, 13, 12, 14],
'text-allow-overlap': false,
'text-anchor': 'center',
'text-offset': [0, 0.0],
},
paint: {
'text-color': 'rgba(148,163,184,0.70)',
'text-halo-color': 'rgba(2,6,23,0.85)',
'text-halo-width': 1.0,
'text-halo-blur': 0.7,
'text-color': 'rgba(148,163,184,0.75)',
'text-halo-color': 'rgba(2,6,23,0.88)',
'text-halo-width': 1.2,
'text-halo-blur': 0.6,
},
} as unknown as LayerSpecification;
@ -272,6 +272,19 @@ export function applyBathymetryZoomProfile(map: maplibregl.Map, baseMap: BaseMap
}
}
function applyKoreanLabels(style: StyleSpecification) {
if (!style.layers) return;
const koTextField = ['coalesce', ['get', 'name:ko'], ['get', 'name']];
for (const layer of style.layers as unknown as LayerSpecification[]) {
if ((layer as { type?: string }).type !== 'symbol') continue;
const layout = (layer as Record<string, unknown>).layout as
| Record<string, unknown>
| undefined;
if (!layout?.['text-field']) continue;
layout['text-field'] = koTextField;
}
}
export async function resolveInitialMapStyle(signal: AbortSignal): Promise<string | StyleSpecification> {
const key = getMapTilerKey();
if (!key) return '/map/styles/osm-seamark.json';
@ -283,6 +296,7 @@ export async function resolveInitialMapStyle(signal: AbortSignal): Promise<strin
if (!res.ok) throw new Error(`MapTiler style fetch failed: ${res.status} ${res.statusText}`);
const json = (await res.json()) as StyleSpecification;
injectOceanBathymetryLayers(json, key);
applyKoreanLabels(json);
return json;
}