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