Files
Aislo/B04_PreProcess/B04_PreProcess_UI_MapLayers.ts
T
eomsangdonandClaude Opus 5.5 e0051bff72 perf(전처리 화면): 343-3 B04 다시 열기 받는 양 — 보관함 저장 실패 고침 · 점군 고정 표본 이진 · 꺼진 층은 켤 때 · 남은 층 ETag · 등고선 주소 한 벌
- b_asset_cache — 쓰기 끝 = 트랜잭션 완료(용량 초과 취소 잡음) · 실패 한 줄 경고(까닭당 한 번) · onblocked · onversionchange · 열기 실패 null 안 기억 · 지우기는 색인 열쇠 · 앞머리 범위(값 안 읽음)
- 점군 미리보기 — 전처리 때 고정 표본 이진(preview_points_{필터}.bin · 원천 지문 같으면 건너뜀) · GET point-cloud/binary(ETag) · 화면은 fetchCachedBytes(IndexedDB) + decodePointPreview(py 짝)
- B04 지도 — 켜진 층만 처음에 받음 · 꺼진 층은 켤 때 · 같은 층 겹쳐 받기 막음
- geojson(지적도 · 행정구역 · 등고선) 파일 그대로 cached_file_response(ETag) · 등고선 단순화본은 원본이 새로우면 다시 만듦
- 등고선 주소 contourAssetUrl 하나(B04 · 미리 받기) — B05 두 곳은 sub5 몫
- 시험 test_343_3_browser_cache 13건 + helper_343_3_asset_cache.cjs

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014utrjfoW831Vc5wJUd13kL
2026-10-16 11:21:51 +09:00

110 lines
4.4 KiB
TypeScript

/* =============================================================================
* 2D 지도 레이어 목록·기본값·색 (B04)
*
* 어떤 레이어를 다루는지, 처음에 무엇이 켜져 있는지, 무슨 색으로 그리는지만 모은다.
* 지도 뷰어 본체(`B04_PreProcess_UI_MapViewer.ts`)가 700줄 한계에 닿아 분리했다.
* 색 값의 정의처는 `ui_template_theme.css`(`--map-*`)이며 여기는 이름만 잇는다.
* ========================================================================== */
import { themeColor } from "@ui/ui_template_palette";
import { fetchCachedSheetLayer } from "../A00_Common/b_asset_cache";
import { fetchGisGeoJson } from "./B04_PreProcess_Api_Fetch";
import type { GeoJsonCollection } from "./B04_PreProcess_UI_MapRender";
export const BACKGROUND_LAYERS = ["white", "satellite", "hybrid"] as const;
// 유수방향은 화면에 쓰지 않기로 해 목록에서 뺐다(2026-08-01 사용자 지시).
export const GIS_LAYERS = [
"지적도",
"행정구역_시군구",
"행정구역_읍면동",
"등고선",
"도엽_등고선",
"도엽_하천중심선",
"도엽_표고점",
"도엽_성절토",
"도엽_옹벽석축",
] as const;
export type BackgroundLayer = (typeof BACKGROUND_LAYERS)[number];
export type GisLayer = (typeof GIS_LAYERS)[number];
/* ── 처음 열었을 때 켜져 있을 레이어 (2026-08-01 사용자 지정) ──────────────
* 지도가 복잡해지지 않도록 실제로 자주 보는 것만 켠 채로 시작한다.
* 나머지는 버튼으로 그때그때 켠다. */
export const BACKGROUND_DEFAULT_ON: Record<BackgroundLayer, boolean> = {
white: true,
satellite: true,
hybrid: false,
};
export const GIS_DEFAULT_ON: Record<GisLayer, boolean> = {
지적도: false,
행정구역_시군구: true,
행정구역_읍면동: true,
등고선: false,
도엽_등고선: false,
도엽_하천중심선: true,
도엽_표고점: false,
도엽_성절토: false,
도엽_옹벽석축: false,
};
/** 받는 중인 층 — 같은 층을 겹쳐 받지 않는다. */
const inFlight = new Map<string, Promise<GeoJsonCollection | null>>();
/** 레이어 하나 받기 — 도엽은 보관함(IndexedDB) · 나머지는 서버 ETag. 실패면 null.
* 꺼진 층은 켤 때 부른다(처음 열기에 도엽 등고선 37 MB 를 받지 않음). */
export function fetchGisLayer(
projectId: string,
layer: GisLayer,
): Promise<GeoJsonCollection | null> {
const key = `${projectId}|${layer}`;
const pending = inFlight.get(key) ?? downloadLayer(projectId, layer);
inFlight.set(key, pending);
void pending.finally(() => inFlight.delete(key));
return pending;
}
async function downloadLayer(
projectId: string,
layer: GisLayer,
): Promise<GeoJsonCollection | null> {
try {
return (
layer.startsWith("도엽_")
? await fetchCachedSheetLayer<GeoJsonCollection>(projectId, layer)
: await fetchGisGeoJson(projectId, layer)
) as GeoJsonCollection;
} catch {
return null;
}
}
/** 등고 라벨(계곡선 수치) 기본 표시 여부. */
export const CONTOUR_LABEL_DEFAULT_ON = false;
/** 이만큼(px) 이하로 움직였다 뗐으면 클릭으로 본다 — 손떨림으로 선택이 안 되는 일을 막는다. */
export const CLICK_SLOP_PX = 4;
/** 레이어별 색은 `ui_template_theme.css`의 `--map-*`가 정의처다. 여기는 이름만 잇는다.
* (fallback 값은 CSS가 아직 안 붙은 첫 프레임 대비용 안전값) */
const GIS_LAYER_COLOR_TOKENS: Record<GisLayer, [name: string, fallback: string]> = {
지적도: ["--map-cadastral", "#f97316"],
행정구역_시군구: ["--map-sigungu", "#7c3aed"],
행정구역_읍면동: ["--map-eupmyeondong", "#22c55e"],
등고선: ["--map-contour", "#fdba74"],
도엽_등고선: ["--map-sheet-contour", "#a5b4fc"],
도엽_하천중심선: ["--map-sheet-stream", "#2563eb"],
도엽_표고점: ["--map-sheet-elev-point", "#f9a8d4"],
도엽_성절토: ["--map-sheet-cutfill", "#f43f5e"],
도엽_옹벽석축: ["--map-sheet-wall", "#0f766e"],
};
export const gisLayerColor = (layer: GisLayer): string =>
themeColor(...GIS_LAYER_COLOR_TOKENS[layer]);
/** 등고 라벨 표기 대상 레이어와 표고 속성 키 (gpkg=CTRLN_HG, 도엽=등고수치) */
export const CONTOUR_LABEL_KEYS: Partial<Record<GisLayer, string[]>> = {
등고선: ["CTRLN_HG"],
도엽_등고선: ["등고수치"],
};