eomsangdonandClaude Opus 5.5
d2412297c7
- 겹 단추줄 끝 [GL 바탕 시험] 켬끔(aislo:pref:d03.gl · 처음 = 지금 캔버스)
- 켬 = MapLibre(설치본 5.24 · BSD-3)가 위성 조각 · 급경사 그림 · 지적 · 등고선(주곡선 · 계곡선) · 도로 · 세류를 그림
· 받는 GeoJSON 그대로 · 등고 글 · 그 밖 겹 · 그은 선 · 재기 · 누름 = 캔버스 그대로
- 카메라 = D03 화면(가운데 · 확대 · 돌림)을 따라감 · 같은 화면에 바로 그림 · 캔버스 겹은 MapLibre 투영으로
- 위성 조각 대리 GET …/plan/tile/{z}/{x}/{y}(브이월드 Satellite z6~19 · 키 안 샘)
- 잼(headless 실 GPU · 검증_sub2_D · 겹 여섯): 줌아웃 화면 간격 중앙 20.9 → 4.2 ms · p90 29.2 → 12.5 · 끊김 5 → 0/30
· 끌기 20.8 → 4.2 ms · 끊김 2 → 0/40 · 그은 선 대 GL 바탕 0.02 px(돌림 30° 같음) · 재기 차 0 · 긋기 점 두 판 차 0.00001 m
- 줌인 = 위성 z19 조각으로 선명 · 급경사 그림 매끈 · 선 자리 두 판 같음
- 시험: test_586_tm_frame 조각 대리 범위 밖 400 · test_582 겹 수 낡은 셈(12 → 584 뒤 17) 고침
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
666 lines
25 KiB
TypeScript
666 lines
25 KiB
TypeScript
/* =============================================================================
|
|
* D03_PlanAnalysis_UI_Layers.ts
|
|
* D03 평면 바탕 겹 켜고 끔(PLAN 569-2 · 581-1 · 581-2 · 584-1 · 584-3 · 요구 395-2 · 440-8 · 442 · 443) — 지도 왼쪽 위 아이콘 한 줄
|
|
* (공용 지도 도구줄 `createMapTools` · 넘치면 가로 밀기 571-1 · 오른쪽 평면 도구줄과 따로).
|
|
*
|
|
* 겹 = 바탕(위성 · 음영기복 · 도엽 등고선(계곡선 25 m 굵게 · 수치) · 급경사 색) ·
|
|
* 물 · 길(세류선 · 하천 · 물 면(실폭하천 · 저수지) · 기존 도로 · 기존 임도 짐작(소로 · 미분류) ·
|
|
* 올린 임도망도(시군구 SHP · 옆 올리기 단추)) ·
|
|
* 구역(지적도 · 보호 · 규제 구역 여덟 종 · 산림입지도(토양형) · 산사태위험지도 · 산사태취약지역(시도 표 점 · 지번 필지 테두리) ·
|
|
* 선 겹(단층 · 지질구조선 · 0차곡) ·
|
|
* 계류 100 m · 도로 300 m 띠 · 건물 · 지명).
|
|
* 처음 켬 = 위성 · 등고선 · 세류 · 고른 값 = 화면 취향(`aislo:pref:d03.layers`) 기억.
|
|
* 받기 = 켤 때만(한 번 받으면 다시 안 받음) · 지형을 안 받았으면 단추를 막음 · 받기 실패 = 그 겹만 꺼짐 + 알림.
|
|
* 그리기 차례(아래 → 위) = 위성(`scene.image`) → 음영기복 → 급경사 → 산사태위험지도 → 산림입지도 → 보호구역 → 띠 → 지적 → 물 면 →
|
|
* 건물 → 등고선 → 도로 → 임도 짐작 → 올린 임도망도 → 세류 → 선 겹 → 산사태취약지역 → 지명 → 그은 선.
|
|
* 겹 모두 = 바탕 캔버스(`base` · 582) · 등고선 = 줌 단계 색인 · 글 폭 기억.
|
|
* 범례 = 켠 겹의 받은 범위 안 수 · 넓이(왼쪽 아래 · `D03_PlanAnalysis_UI_LayerLegend`).
|
|
* GL 바탕 시험(586-1 · 끝 단추 · `aislo:pref:d03.gl` · 처음 = 끔) — 위성 · 급경사 · 지적 · 등고선 · 도로 · 세류를
|
|
* MapLibre 가 그림(`D03_PlanAnalysis_UI_MapGl`) · 캔버스는 그 겹을 건너뜀(등고 글은 캔버스).
|
|
* ========================================================================== */
|
|
|
|
import { showToast } from "@ui/ui_template_elements";
|
|
import { createLegend } from "@ui/ui_template_flow_legend";
|
|
import { pickFiles } from "@ui/ui_template_drop";
|
|
import { createIconButton } from "@ui/ui_template_button";
|
|
import { createMapTools } from "@ui/ui_template_map_tools";
|
|
import { themeColor } from "@ui/ui_template_palette";
|
|
import { fetchCachedSheetLayer } from "../A00_Common/b_asset_cache";
|
|
import { readByKey, writeByKey } from "../A00_Common/b_page_state";
|
|
import {
|
|
fetchVWorldMeta,
|
|
getVWorldMapUrl,
|
|
type VWorldMeta,
|
|
} from "../B04_PreProcess/B04_PreProcess_Api_Fetch";
|
|
import {
|
|
createNormalizer,
|
|
drawPreparedLabels,
|
|
lonLatToScreen,
|
|
pickLevelStep,
|
|
type GeoJsonCollection,
|
|
type PreparedLayer,
|
|
} from "../B04_PreProcess/B04_PreProcess_UI_MapRender";
|
|
import {
|
|
indexLayerLod,
|
|
prepareLayer,
|
|
} from "../B04_PreProcess/logic/B04_PreProcess_UI_MapRender_Prepare";
|
|
import {
|
|
fetchPlanBands,
|
|
fetchPlanCadastral,
|
|
fetchPlanForestRoads,
|
|
fetchPlanLandslideZones,
|
|
fetchPlanLines,
|
|
fetchPlanRaster,
|
|
fetchPlanSheetLayer,
|
|
fetchPlanSoils,
|
|
fetchPlanZeroOrder,
|
|
fetchPlanZones,
|
|
uploadPlanForestRoads,
|
|
} from "./D03_PlanAnalysis_Api";
|
|
import {
|
|
FOREST_ROAD_KINDS,
|
|
GROUPS,
|
|
LAYERS,
|
|
LINE_KEYS,
|
|
LINE_LAYERS,
|
|
SOIL_COLORS,
|
|
WATER_KEYS,
|
|
ZONE_COLORS,
|
|
drawRaster,
|
|
fillLayer,
|
|
loadImage,
|
|
readPref,
|
|
stroke,
|
|
type PlanLayerKey,
|
|
} from "./D03_PlanAnalysis_UI_LayerDefs";
|
|
import { layerCounts, legendRows, type Prepared } from "./D03_PlanAnalysis_UI_LayerLegend";
|
|
import { createGlBase, GL_KEYS } from "./D03_PlanAnalysis_UI_MapGl";
|
|
import type { PlanMap, PlanMapLayer } from "./D03_PlanAnalysis_UI_Map";
|
|
import type { Vertex } from "./logic/D03_PlanAnalysis_Plan";
|
|
|
|
const PREF_KEY = "aislo:pref:d03.layers";
|
|
const GL_PREF_KEY = "aislo:pref:d03.gl";
|
|
/** 등고선을 받아 올 그은 선 둘레(m). */
|
|
const CONTOUR_PAD_M = 600;
|
|
type DataKey = keyof Prepared;
|
|
|
|
/** 겹 → 받는 자료(임도 짐작 = 도로 자료). */
|
|
const dataKey = (key: Exclude<PlanLayerKey, "satellite">): DataKey =>
|
|
key === "forestRoad" ? "road" : key;
|
|
|
|
export interface PlanLayers {
|
|
bar: HTMLElement;
|
|
legend: HTMLElement;
|
|
/** 바탕 겹(아래 → 위 · 위성 뺌) — 그은 선 겹 아래에 둠. */
|
|
layers: PlanMapLayer[];
|
|
/** 지형(위성 틀)을 다시 읽음 — 처음 · 지형 받은 뒤. */
|
|
load: () => Promise<void>;
|
|
/** 검증 창구 — 켬끔 · 받은 겹 · 겹별 수(지물 · 넓이 m²). */
|
|
state: () => {
|
|
on: Record<PlanLayerKey, boolean>;
|
|
loaded: PlanLayerKey[];
|
|
counts: Record<string, number>;
|
|
};
|
|
}
|
|
|
|
export function createPlanLayers(opts: {
|
|
projectId: string;
|
|
map: PlanMap;
|
|
/** 등고선 받을 범위를 정할 점(시점 · 종점 · 그은 선). */
|
|
points: () => Vertex[];
|
|
}): PlanLayers {
|
|
const { projectId, map } = opts;
|
|
const on = readPref(PREF_KEY);
|
|
const data: Partial<Prepared> = {};
|
|
const pending = new Map<DataKey | "satellite", Promise<void>>();
|
|
let uploading = false;
|
|
let meta: VWorldMeta | null = null;
|
|
let satellite: HTMLImageElement | null = null;
|
|
const gl = createGlBase(projectId);
|
|
let glOn = readByKey(GL_PREF_KEY) === "1";
|
|
map.setGl(glOn ? gl : null);
|
|
|
|
const buttons = new Map<PlanLayerKey, HTMLButtonElement>();
|
|
const groups = GROUPS.map((group) =>
|
|
group.map((def) => {
|
|
const button = createIconButton({
|
|
icon: def.icon,
|
|
title: def.title,
|
|
size: 32,
|
|
pressed: on[def.key],
|
|
onClick: () => toggle(def.key),
|
|
});
|
|
button.dataset.layer = def.key;
|
|
buttons.set(def.key, button);
|
|
return button;
|
|
}),
|
|
);
|
|
const upload = createIconButton({
|
|
icon: "upload",
|
|
title: "임도망도 SHP 올리기(시군구 zip 하나 · 또는 shp · shx · dbf · prj 함께 · 100 MB 까지)",
|
|
size: 32,
|
|
onClick: () =>
|
|
pickFiles(
|
|
{ accept: ".zip,.shp,.shx,.dbf,.prj,.cpg", multiple: true },
|
|
(files) => void uploadRoads(files),
|
|
),
|
|
});
|
|
upload.dataset.layer = "forestRoadUpload";
|
|
const roadGroup = groups.find((group) => group.includes(buttons.get("forestRoadFile")!))!;
|
|
roadGroup.splice(roadGroup.indexOf(buttons.get("forestRoadFile")!) + 1, 0, upload);
|
|
const glButton = createIconButton({
|
|
icon: "gauge",
|
|
title:
|
|
"GL 바탕 시험(위성 조각 · 급경사 · 지적 · 등고선 · 도로 · 세류를 그래픽 카드로 · 끔 = 지금 그림)",
|
|
size: 32,
|
|
pressed: glOn,
|
|
onClick: () => {
|
|
glOn = !glOn;
|
|
writeByKey(GL_PREF_KEY, glOn ? "1" : "0");
|
|
glButton.setAttribute("aria-pressed", String(glOn));
|
|
map.setGl(glOn ? gl : null);
|
|
},
|
|
});
|
|
glButton.dataset.layer = "gl";
|
|
groups.push([glButton]);
|
|
const tools = createMapTools({ label: "지도 겹", groups });
|
|
const bar = tools.root;
|
|
bar.classList.add("d03-plan__layers");
|
|
// 571-1 — 오른쪽 평면 도구줄이 이 줄 오른쪽부터(CSS `--d03-layers-w`)
|
|
new ResizeObserver(() =>
|
|
map.root.style.setProperty("--d03-layers-w", `${tools.bar.offsetWidth}px`),
|
|
).observe(tools.bar);
|
|
const legend = document.createElement("div");
|
|
legend.className = "d03-plan__legend";
|
|
legend.title = "켠 겹 범례 — 받은 지형 범위 안 수 · 넓이";
|
|
|
|
const loadedOf = (key: PlanLayerKey): boolean =>
|
|
key === "satellite" ? !!satellite : !!data[dataKey(key)];
|
|
|
|
function sync(): void {
|
|
for (const def of LAYERS) {
|
|
const button = buttons.get(def.key)!;
|
|
button.setAttribute("aria-pressed", String(on[def.key]));
|
|
button.disabled = !meta;
|
|
const title = meta ? def.title : `${def.title} — 지형 받기 뒤 보임`;
|
|
button.title = title;
|
|
button.setAttribute("aria-label", title);
|
|
}
|
|
upload.disabled = !meta || uploading;
|
|
for (const key of GL_KEYS) gl.setVisible(key, on[key]);
|
|
const rows = meta ? legendRows(on, data) : [];
|
|
legend.replaceChildren(...rows.map((row) => createLegend(row)));
|
|
legend.hidden = !rows.length;
|
|
}
|
|
|
|
sync();
|
|
|
|
function toggle(key: PlanLayerKey): void {
|
|
on[key] = !on[key];
|
|
writeByKey(PREF_KEY, JSON.stringify(on));
|
|
void ensure(key);
|
|
showSatellite();
|
|
sync();
|
|
map.redrawBase();
|
|
}
|
|
|
|
function showSatellite(): void {
|
|
map.update({ image: on.satellite ? satellite : null });
|
|
}
|
|
|
|
/** 켜진 겹의 자료를 받음(한 번) — 실패 = 그 겹만 끔(기억은 안 바꿈 · 다음에 다시 받음) + 알림. */
|
|
function ensure(key: PlanLayerKey): Promise<void> {
|
|
if (!meta || !on[key] || loadedOf(key)) return Promise.resolve();
|
|
const slot = key === "satellite" ? key : dataKey(key);
|
|
const running = pending.get(slot);
|
|
if (running) return running;
|
|
const at = meta;
|
|
const job = fetchLayer(key, at)
|
|
.then(() => {
|
|
if (meta !== at) return;
|
|
showSatellite();
|
|
sync();
|
|
map.redrawBase();
|
|
})
|
|
.catch((error: unknown) => {
|
|
const text = error instanceof Error ? error.message : String(error);
|
|
for (const def of LAYERS)
|
|
if (def.key === key || (def.key !== "satellite" && dataKey(def.key) === slot))
|
|
on[def.key] = false;
|
|
sync();
|
|
map.redraw();
|
|
showToast(`${LAYERS.find((def) => def.key === key)!.title} 받지 못함 — ${text}`, "error");
|
|
})
|
|
.finally(() => pending.delete(slot));
|
|
pending.set(slot, job);
|
|
return job;
|
|
}
|
|
|
|
/** 올리기 — 받으면 그 겹을 켜고 바로 그림 · 못 받으면 옛 것 그대로 + 서버 까닭 알림. */
|
|
async function uploadRoads(files: File[]): Promise<void> {
|
|
if (!meta) return;
|
|
const at = meta;
|
|
const job = uploadPlanForestRoads(projectId, files).then((info) => {
|
|
if (meta !== at) return;
|
|
data.forestRoadFile = {
|
|
layer: prepareLayer(info.collection, createNormalizer(at)),
|
|
info,
|
|
};
|
|
on.forestRoadFile = true;
|
|
writeByKey(PREF_KEY, JSON.stringify(on));
|
|
showToast(
|
|
`임도망도 받음 — 범위 안 ${info.count}가닥 ${(info.length_m / 1000).toFixed(2)} km (파일 ${info.total}가닥)`,
|
|
"success",
|
|
);
|
|
});
|
|
uploading = true;
|
|
pending.set("forestRoadFile", job);
|
|
sync();
|
|
try {
|
|
await job;
|
|
} catch (error) {
|
|
showToast(
|
|
`임도망도 올리지 못함 — ${error instanceof Error ? error.message : String(error)}`,
|
|
"error",
|
|
);
|
|
} finally {
|
|
uploading = false;
|
|
pending.delete("forestRoadFile");
|
|
sync();
|
|
map.redrawBase();
|
|
}
|
|
}
|
|
|
|
async function fetchLayer(key: PlanLayerKey, at: VWorldMeta): Promise<void> {
|
|
const normalizer = createNormalizer(at);
|
|
const prepare = (collection: GeoJsonCollection, labels?: string[]): PreparedLayer =>
|
|
prepareLayer(collection, normalizer, labels);
|
|
const pick = (
|
|
collection: GeoJsonCollection,
|
|
test: (props: Record<string, unknown>) => boolean,
|
|
): GeoJsonCollection => ({
|
|
...collection,
|
|
features: (collection.features ?? []).filter((feature) => test(feature.properties ?? {})),
|
|
});
|
|
if (key === "satellite") {
|
|
// 범위가 넓어지면 주소가 바뀌어 옛 그림을 안 씀
|
|
const v = `${at.x_min}_${at.x_max}_${at.y_min}_${at.y_max}`;
|
|
satellite = await loadImage(`${getVWorldMapUrl(projectId, "satellite")}&v=${v}`);
|
|
} else if (key === "contour") {
|
|
const points = opts.points();
|
|
const xs = points.map(([x]) => x);
|
|
const ys = points.map(([, y]) => y);
|
|
const bbox = [
|
|
Math.min(...xs) - CONTOUR_PAD_M,
|
|
Math.min(...ys) - CONTOUR_PAD_M,
|
|
Math.max(...xs) + CONTOUR_PAD_M,
|
|
Math.max(...ys) + CONTOUR_PAD_M,
|
|
].map((v) => v.toFixed(0));
|
|
const collection = await fetchCachedSheetLayer<GeoJsonCollection>(
|
|
projectId,
|
|
"도엽_등고선",
|
|
"route",
|
|
bbox.join(","),
|
|
);
|
|
data.contour = indexLayerLod(prepare(collection, ["등고수치"]));
|
|
gl.setData("contour", collection);
|
|
} else if (key === "stream") {
|
|
const collection = await fetchCachedSheetLayer<GeoJsonCollection>(
|
|
projectId,
|
|
"도엽_하천중심선",
|
|
);
|
|
data.stream = [
|
|
prepare(pick(collection, (props) => props["구분"] === "세류")),
|
|
prepare(pick(collection, (props) => props["구분"] !== "세류")),
|
|
];
|
|
gl.setData("stream", collection);
|
|
} else if (key === "cadastral") {
|
|
const collection = await fetchPlanCadastral(projectId);
|
|
data.cadastral = prepare(collection);
|
|
gl.setData("cadastral", collection);
|
|
} else if (key === "road" || key === "forestRoad") {
|
|
const collection = await fetchPlanSheetLayer(projectId, "도로중심선");
|
|
data.road = {
|
|
all: prepare(collection),
|
|
small: prepare(
|
|
pick(collection, (props) => FOREST_ROAD_KINDS.has(String(props["도로구분"]))),
|
|
),
|
|
};
|
|
gl.setData("road", collection);
|
|
} else if (key === "forestRoadFile") {
|
|
const info = await fetchPlanForestRoads(projectId);
|
|
data.forestRoadFile = { layer: prepare(info.collection), info };
|
|
} else if (key === "landslideZones") {
|
|
const info = await fetchPlanLandslideZones(projectId);
|
|
data.landslideZones = { parcels: prepare(info.parcels), info };
|
|
if (info.missing.length)
|
|
showToast(`산사태취약지역 — ${info.missing.join(" · ")} 자료 없음`, "info");
|
|
} else if (key === "slope" || key === "hillshade" || key === "landslide") {
|
|
const raster = await fetchPlanRaster(projectId, key);
|
|
data[key] = { raster, image: await loadImage(raster.image) };
|
|
const box = raster.box; // 경위도 귀퉁이(왼쪽 아래부터 돎)
|
|
if (key === "slope" && box?.length === 4)
|
|
gl.setData("slope", { url: raster.image, corners: [box[3], box[2], box[1], box[0]] });
|
|
} else if (key === "water") {
|
|
const parts = await Promise.all(
|
|
WATER_KEYS.map((name) => fetchPlanSheetLayer(projectId, name)),
|
|
);
|
|
data.water = prepare({ features: parts.flatMap((part) => part.features ?? []) });
|
|
} else if (key === "building") {
|
|
data.building = prepare(await fetchPlanSheetLayer(projectId, "건물"));
|
|
} else if (key === "zones") {
|
|
const zones = await fetchPlanZones(projectId);
|
|
const kinds = new Map<string, PreparedLayer>();
|
|
for (const kind of Object.keys(zones.summary))
|
|
kinds.set(kind, prepare(pick(zones, (props) => props["kind"] === kind)));
|
|
data.zones = { kinds, summary: zones.summary };
|
|
const failed = Object.values(zones.summary).filter((kind) => kind.failed);
|
|
if (failed.length)
|
|
showToast(
|
|
`보호 · 규제 구역 일부 받지 못함 — ${failed.map((kind) => kind.label).join(" · ")}`,
|
|
"error",
|
|
);
|
|
} else if (key === "soils") {
|
|
const soils = await fetchPlanSoils(projectId);
|
|
data.soils = {
|
|
kinds: soils.summary.map((soil, i) => ({
|
|
layer: prepare(pick(soils, (props) => props["code"] === soil.code)),
|
|
color: SOIL_COLORS[i % SOIL_COLORS.length],
|
|
})),
|
|
summary: soils.summary,
|
|
};
|
|
} else if (key === "faults" || key === "lineaments" || key === "zeroOrder") {
|
|
const kind = LINE_LAYERS[key].kind;
|
|
// 0차곡 첫 셈 = 몇 초 — 늦으면 알림
|
|
const slow = window.setTimeout(
|
|
() => showToast(`${LINE_LAYERS[key].label} 셈 중 — 처음 한 번만`, "info"),
|
|
600,
|
|
);
|
|
try {
|
|
const got = kind
|
|
? await fetchPlanLines(projectId, kind).then((lines) => ({
|
|
collection: lines,
|
|
...lines.summary,
|
|
}))
|
|
: await fetchPlanZeroOrder(projectId);
|
|
data[key] = {
|
|
layer: prepare(got.collection),
|
|
count: got.count,
|
|
length_m: got.length_m,
|
|
};
|
|
} finally {
|
|
window.clearTimeout(slow);
|
|
}
|
|
} else if (key === "bands") {
|
|
const info = await fetchPlanBands(projectId);
|
|
data.bands = {
|
|
stream: prepare(info.stream.collection),
|
|
road: prepare(info.road.collection),
|
|
info,
|
|
};
|
|
} else {
|
|
const collection = await fetchPlanSheetLayer(projectId, "지명");
|
|
data.place = (collection.features ?? []).flatMap((feature) => {
|
|
const geometry = feature.geometry;
|
|
const name = feature.properties?.["명칭"];
|
|
if (geometry?.type !== "Point" || typeof name !== "string" || !name) return [];
|
|
const [lon, lat] = geometry.coordinates as number[];
|
|
return [{ lon, lat, name }];
|
|
});
|
|
}
|
|
}
|
|
|
|
/** 등고 글 폭 기억(글꼴 하나 · 582). */
|
|
const labelWidths = new Map<string, number>();
|
|
const layers: PlanMapLayer[] = [
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.hillshade || !data.hillshade) return;
|
|
// 위성 위 = 곱하기(밝은 곳은 그대로 · 그늘만 짙게) · 위성 없으면 그대로
|
|
if (on.satellite && satellite) {
|
|
context.globalCompositeOperation = "multiply";
|
|
context.globalAlpha = 0.75;
|
|
}
|
|
drawRaster(context, map, data.hillshade);
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.slope || !data.slope || glOn) return;
|
|
context.globalAlpha = 0.55;
|
|
drawRaster(context, map, data.slope);
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.landslide || !data.landslide) return;
|
|
context.globalAlpha = 0.6;
|
|
drawRaster(context, map, data.landslide);
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.soils || !data.soils) return;
|
|
for (const { layer, color } of data.soils.kinds) {
|
|
const fill = themeColor(color, "#facc15");
|
|
fillLayer(context, layer, map.view, fill, 0.35, { color: fill, width: 1.4 });
|
|
}
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.zones || !data.zones) return;
|
|
for (const [kind, layer] of data.zones.kinds) {
|
|
const color = themeColor(ZONE_COLORS[kind] ?? "--draw-warning", "#eab308");
|
|
fillLayer(context, layer, map.view, color, 0.22, { color, width: 1.6 });
|
|
}
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.bands || !data.bands) return;
|
|
const road = themeColor("--draw-map-band-road", "#facc15");
|
|
const stream = themeColor("--draw-map-band-stream", "#22d3ee");
|
|
fillLayer(context, data.bands.road, map.view, road, 0.16, {
|
|
color: road,
|
|
width: 1.2,
|
|
dash: [6, 4],
|
|
});
|
|
fillLayer(context, data.bands.stream, map.view, stream, 0.18, {
|
|
color: stream,
|
|
width: 1.2,
|
|
dash: [6, 4],
|
|
});
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.cadastral || !data.cadastral || glOn) return;
|
|
context.globalAlpha = 0.8;
|
|
stroke(context, map, data.cadastral, themeColor("--draw-map-parcel", "#f0abfc"), 0.8);
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.water || !data.water) return;
|
|
const color = themeColor("--draw-map-water", "#0ea5e9");
|
|
fillLayer(context, data.water, map.view, color, 0.45, { color, width: 1 });
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.building || !data.building) return;
|
|
const color = themeColor("--draw-map-building", "#fb7185");
|
|
fillLayer(context, data.building, map.view, color, 0.7, {
|
|
color: "rgba(0, 0, 0, 0.55)",
|
|
width: 0.6,
|
|
});
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
const contour = on.contour && data.contour;
|
|
if (!contour) return;
|
|
const color = themeColor("--draw-map-contour", "#ffd68c");
|
|
const step = pickLevelStep(contour, map.view, 5);
|
|
if (glOn) gl.setContourStep(step); // 선 = GL · 글 = 캔버스
|
|
if (!glOn) {
|
|
context.globalAlpha = 0.7;
|
|
stroke(context, map, contour, color, 0.8, step);
|
|
stroke(context, map, contour, color, 1.6, 25); // 계곡선
|
|
}
|
|
context.globalAlpha = 1;
|
|
context.font = "10px system-ui, sans-serif";
|
|
context.textAlign = "center";
|
|
context.textBaseline = "middle";
|
|
drawPreparedLabels(
|
|
context,
|
|
contour,
|
|
map.view,
|
|
color,
|
|
25,
|
|
map.uprightRad,
|
|
"rgba(0, 0, 0, 0.6)",
|
|
labelWidths,
|
|
);
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.road || !data.road || glOn) return;
|
|
stroke(context, map, data.road.all, "rgba(0, 0, 0, 0.55)", 3.2);
|
|
stroke(context, map, data.road.all, themeColor("--draw-map-road", "#f8fafc"), 1.6);
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.forestRoad || !data.road) return;
|
|
context.setLineDash([7, 4]);
|
|
stroke(context, map, data.road.small, "rgba(0, 0, 0, 0.55)", 3.6);
|
|
stroke(context, map, data.road.small, themeColor("--draw-map-forest-road", "#f59e0b"), 2);
|
|
context.setLineDash([]);
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
const got = on.forestRoadFile && data.forestRoadFile;
|
|
if (!got) return;
|
|
stroke(context, map, got.layer, "rgba(0, 0, 0, 0.55)", 4);
|
|
stroke(context, map, got.layer, themeColor("--draw-map-forest-road-file", "#ea580c"), 2.4);
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.stream || !data.stream || glOn) return;
|
|
const color = themeColor("--draw-map-stream", "#38bdf8");
|
|
stroke(context, map, data.stream[0], color, 1);
|
|
stroke(context, map, data.stream[1], color, 2.4);
|
|
},
|
|
},
|
|
...LINE_KEYS.map((key): PlanMapLayer => ({
|
|
base: true,
|
|
draw: (context, map) => {
|
|
const got = on[key] && data[key];
|
|
if (!got) return;
|
|
const { color, width, dash } = LINE_LAYERS[key];
|
|
context.setLineDash(dash);
|
|
stroke(context, map, got.layer, "rgba(0, 0, 0, 0.55)", width + 1.6);
|
|
stroke(context, map, got.layer, themeColor(color, "#f43f5e"), width);
|
|
context.setLineDash([]);
|
|
},
|
|
})),
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
const got = on.landslideZones && data.landslideZones;
|
|
if (!got || !meta) return;
|
|
const color = themeColor("--draw-map-landslide-zone", "#e11d48");
|
|
// 필지 = 「이 필지 안 어딘가」 테두리만(지정 넓이 ≪ 필지 · 칠하지 않음)
|
|
context.setLineDash([6, 3]);
|
|
stroke(context, map, got.parcels, "rgba(255, 255, 255, 0.7)", 3.2);
|
|
stroke(context, map, got.parcels, color, 1.8);
|
|
context.setLineDash([]);
|
|
const normalizer = createNormalizer(meta);
|
|
context.fillStyle = color;
|
|
context.strokeStyle = "#ffffff";
|
|
context.lineWidth = 1.5;
|
|
for (const point of got.info.points) {
|
|
const [x, y] = lonLatToScreen(normalizer, map.view, point.lon, point.lat);
|
|
if (x < -10 || y < -10 || x > map.view.width + 10 || y > map.view.height + 10) continue;
|
|
context.beginPath();
|
|
context.arc(x, y, 5, 0, Math.PI * 2);
|
|
context.fill();
|
|
context.stroke();
|
|
}
|
|
},
|
|
},
|
|
{
|
|
base: true,
|
|
draw: (context, map) => {
|
|
if (!on.place || !data.place || !meta) return;
|
|
const normalizer = createNormalizer(meta);
|
|
context.font = "600 11px system-ui, sans-serif";
|
|
context.textAlign = "center";
|
|
context.textBaseline = "bottom";
|
|
context.lineWidth = 3;
|
|
context.strokeStyle = "rgba(0, 0, 0, 0.7)";
|
|
context.fillStyle = themeColor("--draw-map-place", "#f8fafc");
|
|
for (const place of data.place) {
|
|
const [x, y] = lonLatToScreen(normalizer, map.view, place.lon, place.lat);
|
|
if (x < -60 || y < -20 || x > map.view.width + 60 || y > map.view.height + 20) continue;
|
|
map.upright(context, x, y, () => {
|
|
context.beginPath();
|
|
context.arc(x, y, 2.5, 0, Math.PI * 2);
|
|
context.fill();
|
|
context.strokeText(place.name, x, y - 4);
|
|
context.fillText(place.name, x, y - 4);
|
|
});
|
|
}
|
|
},
|
|
},
|
|
];
|
|
|
|
async function load(): Promise<void> {
|
|
const next = await fetchVWorldMeta(projectId, "satellite").catch(() => null);
|
|
const changed =
|
|
JSON.stringify(next && [next.x_min, next.x_max, next.y_min, next.y_max]) !==
|
|
JSON.stringify(meta && [meta.x_min, meta.x_max, meta.y_min, meta.y_max]);
|
|
meta = next;
|
|
if (changed) {
|
|
satellite = null;
|
|
for (const key of Object.keys(data)) delete data[key as DataKey];
|
|
for (const key of GL_KEYS) if (key !== "satellite") gl.setData(key, null);
|
|
}
|
|
map.update({ meta });
|
|
showSatellite();
|
|
sync();
|
|
await Promise.all(LAYERS.map((def) => ensure(def.key)));
|
|
}
|
|
|
|
return {
|
|
bar,
|
|
legend,
|
|
layers,
|
|
load,
|
|
state: () => ({
|
|
on: { ...on },
|
|
loaded: LAYERS.map((def) => def.key).filter(loadedOf),
|
|
counts: layerCounts(data),
|
|
}),
|
|
};
|
|
}
|