## ENC 베이스맵 (features/encMap/) - gcnautical 타일 서버 연동 (nautical.json 49개 레이어, 73개 S-52 스프라이트) - 설정 패널: 12개 레이어 토글, 영역 색상 3종, 수심 색상 5단계 - 배경색 밝기 기반 선박 라벨 색상 자동 전환 (labelColor.ts) - useMapStyleSettings에 ENC 가드 추가 (스타일 간섭 방지) - useBaseMapToggle 초기 로드 스킵 (useMapInit과 중복 setStyle 방지) ## 선박 표시 개선 - Globe 원형 halo/outline 제거 — 아이콘 본체만 표시 - Globe 아이콘 스케일 1.3배, 줌아웃 최소 크기 보장 (minzoom 2) - SDF icon-halo로 테두리 적용 (성능 영향 없음) - 기타 AIS 투명도 상향 (0.28→0.6 ~ 1.0) - 선박명 영문 우선 표시 (shipNameRoman > shipNameCn) ## 오버레이 제어 수정 - 연결선/범위/선단 토글 off 시 인터랙티브 오버레이도 비활성 - Globe pair/fc/fleet 레이어: || active 제거 → 토글 우선 - 강조 링/알람 링: shipData→shipLayerData (클러스터링 연동) ## 기본값 변경 - 경고 필터 5개: 초기 false - 연결선/범위/선단: 초기 false - 사진 파란 원 아이콘: Globe+Mercator 모두 제거 ## 폰트 정리 - Open Sans 폴백 전면 제거 → Noto Sans 단독 - ENC 스타일 fetch 시 text-font 패치 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import type maplibregl from 'maplibre-gl';
|
|
import type { EncMapSettings } from '../model/types';
|
|
import { ENC_LAYER_CATEGORIES, ENC_COLOR_TARGETS, ENC_DEPTH_COLOR_TARGETS } from '../model/types';
|
|
|
|
/**
|
|
* Apply symbol category visibility toggles at runtime.
|
|
*/
|
|
export function applyEncVisibility(map: maplibregl.Map, settings: EncMapSettings): void {
|
|
for (const [key, layerIds] of Object.entries(ENC_LAYER_CATEGORIES)) {
|
|
const visible = settings[key as keyof EncMapSettings] as boolean;
|
|
const vis = visible ? 'visible' : 'none';
|
|
for (const layerId of layerIds) {
|
|
try {
|
|
if (map.getLayer(layerId)) {
|
|
map.setLayoutProperty(layerId, 'visibility', vis);
|
|
}
|
|
} catch {
|
|
// layer may not exist
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Apply runtime color changes to area/line layers.
|
|
*/
|
|
export function applyEncColors(map: maplibregl.Map, settings: EncMapSettings): void {
|
|
// 육지/해안선
|
|
for (const [layerId, prop, key] of ENC_COLOR_TARGETS) {
|
|
try {
|
|
if (map.getLayer(layerId)) {
|
|
map.setPaintProperty(layerId, prop, settings[key] as string);
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
// 배경색
|
|
try {
|
|
if (map.getLayer('background')) {
|
|
map.setPaintProperty('background', 'background-color', settings.backgroundColor);
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
|
|
// 수심별 색상
|
|
for (const { key, layerIds } of ENC_DEPTH_COLOR_TARGETS) {
|
|
const color = settings[key] as string;
|
|
for (const layerId of layerIds) {
|
|
try {
|
|
if (map.getLayer(layerId)) {
|
|
map.setPaintProperty(layerId, 'fill-color', color);
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
}
|
|
}
|