eomsangdonandClaude Opus 5.5
8ce7ef6cbe
- 서버: 새 common_util_contour_tiles — 조각(z8~15) = 전국 등고선 상자 읽기 · 줌 간격 거름 · 단순화 · 3857 · MVT(겹 contour · h · k) · 창고 storage/_shared/contour_tiles/v1_<지문>/z/x/y.pbf · 잠금 · .part 바꿈 · 빈 조각 저장
- 줌 간격: z8 1000 · z9 500(화면 꼭짓점 z13 이하 실측) · z10 200 · z11 100 · z12 50 · z13 25 · z14 10(+25) · z15 5 m
- 길: GET /api/projects/{id}/plan/contour/{z}/{x}/{y}.pbf
- 화면: contourTileSource(위성처럼 고정 · minzoom 8 · maxzoom 15) · 등고 겹 셋 = 벡터 조각 · 받는 동안 서클 · GL 이면 606 등고 도엽 조각 안 받음(옛 캔버스는 그대로) · 주곡선 간격 셈 걷음
- 시험: test_615_contour_tiles
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
407 lines
14 KiB
TypeScript
407 lines
14 KiB
TypeScript
/* =============================================================================
|
|
* D03_PlanAnalysis_UI_MapGl.ts
|
|
* D03 GL 바탕(PLAN 586-1 · 586-2 · 요구 445 B · 448) — 바탕 겹 스물을 MapLibre(WebGL · BSD-3)로:
|
|
* 위성 조각(서버 대리 · 서버 기억 z6~19) · 그림 겹(음영 · 급경사 · 산사태위험 = image) ·
|
|
* 면 겹(산림입지 · 보호구역 · 띠 · 물 면 · 건물 = fill) · 선 겹(지적 · 등고선 · 도로 · 임도 짐작 · 올린 임도망도 ·
|
|
* 세류 · 단층 · 지질구조선 · 0차곡 · 산사태취약 필지 = line · 점선 포함) · 점(산사태취약 · 지명 = circle) ·
|
|
* 글(등고 수치 · 지명 = symbol · 겹치면 뺌 · 글꼴 = 화면 Noto Sans KR(OFL · 자체 보관)을 그 자리에서 그림 —
|
|
* 꼴에 글꼴 주소가 없으면 MapLibre 가 모든 글자를 화면 글꼴로 그림 · 글꼴 조각 파일 없음).
|
|
* 그은 선 · 재기 · 고르기 · 누름 = 위 캔버스 그대로(위에 겹침).
|
|
* 카메라 주인 = D03 화면(`ViewState` · 돌림) 하나 — 여기는 따라가기만 · 조작은 안 받음.
|
|
* 자료 = 지금 받는 GeoJSON 그대로(조각내기는 MapLibre 일꾼 스레드) · 색 = 받는 쪽이 지물에 붙인 `_color`.
|
|
* 등고선 = 줌별 벡터 조각(615 · 위성처럼 고정 소스 · 가는 선 = 모두 · 굵은 선 · 글 = `k` 1) · 받는 동안 서클.
|
|
* 그래픽 카드 · WebGL 이 없거나 잃으면 `onFail` — 부르는 쪽이 옛 캔버스로.
|
|
* 지도 세우기 · 자료 올리기 · 카메라 = 공용 부품 `ui_template_gl_map`(589-2) · 여기는 겹 꼴만.
|
|
* ========================================================================== */
|
|
|
|
import type { ExpressionSpecification, FilterSpecification, Map as MapLibreMap } from "maplibre-gl";
|
|
import {
|
|
contourTileSource,
|
|
createGlMap,
|
|
GL_FONT,
|
|
satelliteTileSource,
|
|
type GlImage,
|
|
type GlSpec as GlMapSpec,
|
|
} from "@ui/ui_template_gl_map";
|
|
import { themeColor } from "@ui/ui_template_palette";
|
|
import type { GeoJsonCollection } from "../B04_PreProcess/B04_PreProcess_UI_MapRender";
|
|
import type { PlanLayerKey, RoadPick } from "./D03_PlanAnalysis_UI_LayerDefs";
|
|
import { SAT_LIGHT_DEFAULT } from "./D03_PlanAnalysis_UI_SatLight";
|
|
|
|
export { GL_FONT, type GlImage };
|
|
|
|
/** 자료 소스(임도 짐작 = 도로 소스를 거름 · 위성 = 조각). */
|
|
export type GlSource = Exclude<PlanLayerKey, "satellite" | "forestRoad">;
|
|
|
|
const GL_FONT_BOLD = [`${GL_FONT} SemiBold`, GL_FONT];
|
|
|
|
export interface GlBase {
|
|
/** 자료 담기(지도 없어도 · 켤 때 올림) — null = 비움. */
|
|
setData: (source: GlSource, data: GeoJsonCollection | GlImage | null) => void;
|
|
setVisible: (key: PlanLayerKey, on: boolean) => void;
|
|
/** 올린 임도망 고름(605-2) — 그 묶음 · 선만 굵게 강조 · null = 없앰. */
|
|
setRoadPick: (pick: RoadPick | null) => void;
|
|
/** 위성 밝기 상한(0~1) — 바로 반영 · 지도를 다시 세워도 유지. */
|
|
setSatelliteLight: (level: number) => void;
|
|
/** 켬 = 지도를 `parent` 맨 앞에 만듦(참 = 섬 · 거짓 = WebGL 못 씀) · null = 버림. */
|
|
enable: (parent: HTMLElement | null) => boolean;
|
|
map: () => MapLibreMap | null;
|
|
/** 화면을 따라감(경위도 가운데 · 줌 · 돌림 도) — 같은 화면에 바로 그림. */
|
|
camera: (center: [number, number], zoom: number, bearingDeg: number) => void;
|
|
resize: () => void;
|
|
}
|
|
|
|
type GlSpec = GlMapSpec<PlanLayerKey>;
|
|
|
|
const HALO = "rgba(0, 0, 0, 0.55)";
|
|
const ROUND = { "line-join": "round", "line-cap": "round" } as const;
|
|
const COLOR: ExpressionSpecification = ["get", "_color"];
|
|
/** 등고 조각 굵은 선(서버가 줌마다 정함) — 가는 선은 모두라 굵은 선은 두 번 겹쳐 짙음(캔버스처럼). */
|
|
const BOLD = ["==", ["get", "k"], 1] as unknown as FilterSpecification;
|
|
/** 캔버스 점선(px) → MapLibre 점선(선 굵기 배수). */
|
|
const dash = (px: number[], width: number): number[] => px.map((v) => v / width);
|
|
|
|
/** 선 겹 — 검은 테두리 + 선(점선이면 둘 다 같은 px 무늬). */
|
|
function haloLine(
|
|
key: PlanLayerKey,
|
|
source: GlSource,
|
|
color: string,
|
|
width: number,
|
|
pattern: number[] = [],
|
|
halo = { color: HALO, width: width + 1.6 },
|
|
filter?: FilterSpecification,
|
|
): GlSpec[] {
|
|
const line = (id: string, paint: Record<string, unknown>, w: number): GlSpec =>
|
|
({
|
|
key,
|
|
id,
|
|
type: "line",
|
|
source,
|
|
...(filter ? { filter } : {}),
|
|
layout: ROUND,
|
|
paint: {
|
|
...paint,
|
|
"line-width": w,
|
|
...(pattern.length ? { "line-dasharray": dash(pattern, w) } : {}),
|
|
},
|
|
}) as GlSpec;
|
|
return [
|
|
line(`${key}-halo`, { "line-color": halo.color }, halo.width),
|
|
line(key, { "line-color": color }, width),
|
|
];
|
|
}
|
|
|
|
/** 면 겹 — 채움 + 테두리(캔버스 `fillLayer` 처럼 테두리 투명도 0.9). */
|
|
function fillEdge(
|
|
key: PlanLayerKey,
|
|
source: GlSource,
|
|
fill: string | ExpressionSpecification,
|
|
opacity: number | ExpressionSpecification,
|
|
edge: { color: string | ExpressionSpecification; width: number; dash?: number[] },
|
|
): GlSpec[] {
|
|
return [
|
|
{
|
|
key,
|
|
id: key,
|
|
type: "fill",
|
|
source,
|
|
paint: { "fill-color": fill, "fill-opacity": opacity },
|
|
} as GlSpec,
|
|
{
|
|
key,
|
|
id: `${key}-edge`,
|
|
type: "line",
|
|
source,
|
|
layout: ROUND,
|
|
paint: {
|
|
"line-color": edge.color,
|
|
"line-width": edge.width,
|
|
"line-opacity": 0.9,
|
|
...(edge.dash ? { "line-dasharray": dash(edge.dash, edge.width) } : {}),
|
|
},
|
|
} as GlSpec,
|
|
];
|
|
}
|
|
|
|
/** 겹 차례(아래 → 위)와 꼴 — 캔버스 `D03_PlanAnalysis_UI_Layers` 의 색 · 굵기 · 투명도 · 차례 그대로. */
|
|
function layerSpecs(light: number, pick: RoadPick | null): GlSpec[] {
|
|
const contour = themeColor("--draw-map-contour", "#ffd68c");
|
|
const place = themeColor("--draw-map-place", "#f8fafc");
|
|
const landslideZone = themeColor("--draw-map-landslide-zone", "#e11d48");
|
|
const raster = (
|
|
key: GlSource | "satellite",
|
|
opacity: number,
|
|
extra: Record<string, number> = {},
|
|
): GlSpec =>
|
|
({
|
|
key,
|
|
id: key,
|
|
type: "raster",
|
|
source: key,
|
|
paint: { "raster-opacity": opacity, "raster-fade-duration": 0, ...extra },
|
|
}) as GlSpec;
|
|
const lineKind = (key: "faults" | "lineaments" | "zeroOrder", width: number, pattern: number[]) =>
|
|
haloLine(key, key, themeColor(LINE_COLOR[key], "#f43f5e"), width, pattern);
|
|
return [
|
|
// 위성 = 조금 어둡고 연하게(요구 475 · 노선 선 대비) — 밝기 상한은 사용자 조절
|
|
raster("satellite", 1, { "raster-brightness-max": light, "raster-saturation": SAT_SATURATION }),
|
|
raster("hillshade", 1), // 위성 위 = 「곱하기」와 같은 검은 그늘 그림(받는 쪽이 바꿈)
|
|
raster("slope", 0.55),
|
|
raster("landslide", 0.6),
|
|
...fillEdge("soils", "soils", COLOR, 0.35, { color: COLOR, width: 1.4 }),
|
|
...fillEdge("zones", "zones", COLOR, 0.22, { color: COLOR, width: 1.6 }),
|
|
...fillEdge("bands", "bands", COLOR, ["case", ["==", ["get", "_band"], "road"], 0.16, 0.18], {
|
|
color: COLOR,
|
|
width: 1.2,
|
|
dash: [6, 4],
|
|
}),
|
|
{
|
|
key: "cadastral",
|
|
id: "cadastral",
|
|
type: "line",
|
|
source: "cadastral",
|
|
layout: ROUND,
|
|
paint: {
|
|
"line-color": themeColor("--draw-map-parcel", "#f0abfc"),
|
|
"line-width": 0.8,
|
|
"line-opacity": 0.8,
|
|
},
|
|
} as GlSpec,
|
|
...((): GlSpec[] => {
|
|
const water = themeColor("--draw-map-water", "#0ea5e9");
|
|
return fillEdge("water", "water", water, 0.45, { color: water, width: 1 });
|
|
})(),
|
|
...fillEdge("building", "building", themeColor("--draw-map-building", "#fb7185"), 0.7, {
|
|
color: HALO,
|
|
width: 0.6,
|
|
}),
|
|
{
|
|
key: "contour",
|
|
id: "contour-minor",
|
|
type: "line",
|
|
source: "contour",
|
|
"source-layer": "contour",
|
|
layout: ROUND,
|
|
paint: { "line-color": contour, "line-width": 0.8, "line-opacity": 0.7 },
|
|
} as GlSpec,
|
|
{
|
|
key: "contour",
|
|
id: "contour-index",
|
|
type: "line",
|
|
source: "contour",
|
|
"source-layer": "contour",
|
|
filter: BOLD,
|
|
layout: ROUND,
|
|
paint: { "line-color": contour, "line-width": 1.6, "line-opacity": 0.7 },
|
|
} as GlSpec,
|
|
{
|
|
key: "contour",
|
|
id: "contour-label",
|
|
type: "symbol",
|
|
source: "contour",
|
|
"source-layer": "contour",
|
|
filter: BOLD,
|
|
layout: {
|
|
"symbol-placement": "line",
|
|
"symbol-spacing": 320,
|
|
"text-field": ["to-string", ["get", "h"]],
|
|
"text-font": [GL_FONT],
|
|
"text-size": 10,
|
|
"text-max-angle": 30,
|
|
"text-padding": 2,
|
|
},
|
|
paint: {
|
|
"text-color": contour,
|
|
"text-halo-color": "rgba(0, 0, 0, 0.6)",
|
|
"text-halo-width": 1.5,
|
|
},
|
|
} as GlSpec,
|
|
...haloLine("road", "road", themeColor("--draw-map-road", "#f8fafc"), 1.6, [], {
|
|
color: HALO,
|
|
width: 3.2,
|
|
}),
|
|
...haloLine(
|
|
"forestRoad",
|
|
"road",
|
|
themeColor("--draw-map-forest-road", "#f59e0b"),
|
|
2,
|
|
[7, 4],
|
|
{ color: HALO, width: 3.6 },
|
|
[
|
|
"in",
|
|
["get", "도로구분"],
|
|
["literal", ["소로", "미분류"]],
|
|
] as unknown as FilterSpecification,
|
|
),
|
|
...haloLine(
|
|
"forestRoadFile",
|
|
"forestRoadFile",
|
|
themeColor("--draw-map-forest-road-file", "#ff2fd0"),
|
|
2.4,
|
|
[],
|
|
{ color: HALO, width: 4 },
|
|
),
|
|
// 고른 묶음 · 선 강조(605-2) — 같은 자료에서 걸러 한 겹 더 굵게
|
|
...["-pick-halo", "-pick"].map(
|
|
(tail, i) =>
|
|
({
|
|
key: "forestRoadFile",
|
|
id: `forestRoadFile${tail}`,
|
|
type: "line",
|
|
source: "forestRoadFile",
|
|
filter: pickFilter(pick),
|
|
layout: ROUND,
|
|
paint: {
|
|
"line-color": i ? themeColor("--draw-map-sketch", "#ffe94d") : HALO,
|
|
"line-width": i ? 4.2 : 7.4,
|
|
},
|
|
}) as GlSpec,
|
|
),
|
|
{
|
|
key: "stream",
|
|
id: "stream",
|
|
type: "line",
|
|
source: "stream",
|
|
layout: ROUND,
|
|
paint: {
|
|
"line-color": themeColor("--draw-map-stream", "#38bdf8"),
|
|
"line-width": ["case", ["==", ["get", "구분"], "세류"], 1, 2.4],
|
|
},
|
|
} as GlSpec,
|
|
...lineKind("faults", 2.4, []),
|
|
...lineKind("lineaments", 1.8, [8, 4]),
|
|
...lineKind("zeroOrder", 1.8, [4, 3]),
|
|
// 산사태취약 — 필지 = 「이 필지 안 어딘가」 테두리만 · 점 = 지정 자리
|
|
...haloLine(
|
|
"landslideZones",
|
|
"landslideZones",
|
|
landslideZone,
|
|
1.8,
|
|
[6, 3],
|
|
{ color: "rgba(255, 255, 255, 0.7)", width: 3.2 },
|
|
["!=", ["geometry-type"], "Point"] as unknown as FilterSpecification,
|
|
),
|
|
{
|
|
key: "landslideZones",
|
|
id: "landslideZones-point",
|
|
type: "circle",
|
|
source: "landslideZones",
|
|
filter: ["==", ["geometry-type"], "Point"],
|
|
paint: {
|
|
"circle-radius": 5,
|
|
"circle-color": landslideZone,
|
|
"circle-stroke-color": "#ffffff",
|
|
"circle-stroke-width": 1.5,
|
|
},
|
|
} as GlSpec,
|
|
{
|
|
key: "place",
|
|
id: "place-dot",
|
|
type: "circle",
|
|
source: "place",
|
|
paint: { "circle-radius": 2.5, "circle-color": place },
|
|
} as GlSpec,
|
|
{
|
|
key: "place",
|
|
id: "place",
|
|
type: "symbol",
|
|
source: "place",
|
|
layout: {
|
|
"text-field": ["get", "name"],
|
|
"text-font": GL_FONT_BOLD,
|
|
"text-size": 11,
|
|
"text-anchor": "bottom",
|
|
"text-offset": [0, -0.36],
|
|
"text-padding": 2,
|
|
},
|
|
paint: {
|
|
"text-color": place,
|
|
"text-halo-color": "rgba(0, 0, 0, 0.7)",
|
|
"text-halo-width": 1.5,
|
|
},
|
|
} as GlSpec,
|
|
];
|
|
}
|
|
|
|
/** 고른 묶음 · 선만 거름(고름 없음 = 아무것도 안 맞는 거름). */
|
|
function pickFilter(pick: RoadPick | null): FilterSpecification {
|
|
const all: unknown[] = ["all", ["==", ["get", "__bundle"], pick?.bundle ?? ""]];
|
|
if (pick?.line !== undefined) all.push(["==", ["get", "__line"], pick.line]);
|
|
return all as unknown as FilterSpecification;
|
|
}
|
|
|
|
/** 선 겹 색 값(캔버스 `LINE_LAYERS` 와 같음). */
|
|
const LINE_COLOR = {
|
|
faults: "--draw-map-fault",
|
|
lineaments: "--draw-map-lineament",
|
|
zeroOrder: "--draw-map-zero-order",
|
|
} as const;
|
|
|
|
/** 겹 색 지문 — 밝음 · 어두움이 바뀌면 색을 다시. */
|
|
const THEME_NAMES = [
|
|
"--draw-map-contour",
|
|
"--draw-map-road",
|
|
"--draw-map-stream",
|
|
"--draw-map-parcel",
|
|
] as const;
|
|
|
|
/** 위성 채도(−1~1) — 조금 연하게. */
|
|
const SAT_SATURATION = -0.3;
|
|
|
|
/** `track` = 받는 일을 진행 서클에 셈(등고 조각 받는 동안). */
|
|
export function createGlBase(
|
|
projectId: string,
|
|
track: <T>(job: Promise<T>) => Promise<T>,
|
|
onFail: (why: string) => void,
|
|
): GlBase {
|
|
let light = SAT_LIGHT_DEFAULT;
|
|
let pick: RoadPick | null = null;
|
|
const base = createGlMap<PlanLayerKey>({
|
|
specs: () => layerSpecs(light, pick),
|
|
fixed: { satellite: satelliteTileSource(projectId), contour: contourTileSource(projectId) },
|
|
themeNames: THEME_NAMES,
|
|
className: "d03-plan__gl",
|
|
onFail,
|
|
});
|
|
/** 등고 조각 받는 동안 서클 하나 — 다 받거나 지도가 쉬면(`idle`) · 지도를 버리면 끝. */
|
|
let settle: (() => void) | null = null;
|
|
const done = (): void => {
|
|
settle?.();
|
|
settle = null;
|
|
};
|
|
let watched: MapLibreMap | null = null;
|
|
function watch(map: MapLibreMap): void {
|
|
watched = map;
|
|
map.on("sourcedataloading", (event) => {
|
|
if (event.sourceId !== "contour" || settle) return;
|
|
void track(new Promise<void>((resolve) => (settle = resolve)));
|
|
});
|
|
map.on("sourcedata", (event) => {
|
|
if (event.sourceId === "contour" && map.isSourceLoaded("contour")) done();
|
|
});
|
|
map.on("idle", done);
|
|
}
|
|
return {
|
|
...base,
|
|
enable(parent) {
|
|
const on = base.enable(parent);
|
|
const map = base.map();
|
|
if (!map) done();
|
|
else if (map !== watched) watch(map);
|
|
return on;
|
|
},
|
|
setRoadPick(next) {
|
|
pick = next;
|
|
const map = base.map();
|
|
for (const id of ["forestRoadFile-pick-halo", "forestRoadFile-pick"])
|
|
if (map?.getLayer(id)) map.setFilter(id, pickFilter(pick));
|
|
},
|
|
setSatelliteLight(next) {
|
|
light = next;
|
|
const map = base.map();
|
|
if (map?.getLayer("satellite"))
|
|
map.setPaintProperty("satellite", "raster-brightness-max", next);
|
|
},
|
|
};
|
|
}
|