chore(계획): 요구 445 요구서 · 분석 셋 · PLAN 585~588 승인 대기 — 예정노선 고르기 · 지도 성능 · 교각점 아이콘 · 단축키
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
# 분석 445-A — 예정노선 마우스 제어 · 지점 하나로 · 지점 표지 · 고르기 · 끌어 고르기 · 연도 마커 (요구 445 앞 여섯)
|
||||
|
||||
읽기 전용 · 코드 읽기만(서버 · 브라우저 안 씀) · 줄 = main_laptop_1 `5332fd2ad` · 앞 분석 `_분석_440-A` · `_분석_440-B` · PLAN 579 · 580 이관본과 맞춤.
|
||||
파일 줄임 — `Page` = `D03_PlanAnalysis/D03_PlanAnalysis_UI_Page.ts` · `Draw` = `_UI_Draw.ts` · `Paint` = `_UI_DrawPaint.ts` · `Edit` = `_UI_Edit.ts` · `Map` = `_UI_Map.ts` · `Plan` = `logic/D03_PlanAnalysis_Plan.ts` · `D02` = `D02_PlanBase/D02_PlanBase_UI_Page.ts` · `Kakao` = `ui_template/ui_template_kakao_map.ts`.
|
||||
|
||||
## ① 결론
|
||||
|
||||
1. 마우스 — 설정(☰ [설정] › 마우스 탭)은 「휠 확대 방향」 하나 + 규칙 글(가운데 끌기 = 옮김). D03 은 따름 · D02 는 카카오 지도 제 동작이라 안 따름(가운데 끌기 없음 · 「당김」 무시 · 한 단 = 두 배). 고칠 곳 = 공용 카카오 부품 한 곳 → D02 · D03 범위 창 · B08 이정표 지도 넷이 같이 따름.
|
||||
2. 지점 하나로 — 저장 칸 `plan_base_json` 을 `{epsg, points}` 한 목록으로 · 옛 `starts` · `ends` 는 읽을 때 이어 붙임(옮김 · SQL 없음). D03 이 시점 · 종점을 가르는 곳은 다섯(붙기 제안 · 시작 · 잠금 · 그림 · 입구 검사)뿐.
|
||||
3. 지점 표지 — 지금 D03 = 반지름 7 px 초록 · 빨강 점 · 이름 없음 · 날 색. 크게(핀 + 「지점 N」 글) · D02 와 같은 차례 색으로.
|
||||
4·5. 고르기 — 지금 = 선 하나 · 구간 하나만 · 여럿 · 연도 묶음 · 끌어 고르기 없음 · 왼쪽 목록 줄 누름 없음. 안 = 「낱 = 구간(조각) · 고름 = 구간 묶음 + 넓이(구간 · 선 · 같은 해)」 + 지도 위 속성 판 + 빈 곳 왼쪽 끌기 = 창(오른쪽으로) · 걸침(왼쪽으로).
|
||||
6. 연도 마커 — 지금 = 왼쪽 [연도 구분] 단추 · 「긋는 해」 고름. 안 = 지도 도구줄 「연도 마커」를 선 위로 끌어 놓음 · 마커 = 구간 경계 · 「여기부터 N년」 · 끌기 = 경계 옮김 · 지움 = 합침 · 왼쪽 「긋는 해」 · [연도 구분] · 긋는 중 해 나눔 걷음.
|
||||
7. 저장 꼴 바뀜 = 2 하나뿐(기준 점 칸) · 4~6 은 `plan_networks` · `plan_route_pieces` 꼴 그대로 → D04 · B03 고침 없음.
|
||||
|
||||
---
|
||||
|
||||
## 1. 마우스 제어 — 설정 ↔ 기준지정 지도
|
||||
|
||||
### 지금
|
||||
|
||||
| 항목 | 지금 | 자리 |
|
||||
| --- | --- | --- |
|
||||
| 설정 | ☰ [설정] 창 마우스 탭 = 휠 확대 방향(당김 · 밂 · 「모든 화면」) + 규칙 글(가운데 끌기 = 옮김 · 왼쪽 = 고르기 · 오른쪽 = 메뉴 · 핀치 = 늘 확대) · 저장 = 계정 pref `input-prefs` | `A00_Common/app_settings.ts:32-42` · `:77-100` · 글 `ui_template/ui_template_locale_common.ts:118-131` |
|
||||
| 읽기 층 | `wheelEventIn` · 기본 = 밂(앞으로 굴림 = 확대) · 부를 때마다 읽음 | `A00_Common/input_prefs.ts:23` · `:53-64` |
|
||||
| 따르는 곳 | B04 · B05 지도 · M02 그림 · 시트 · 돋보기 · CAD · D03 | `b_svg_zoom_pan.ts:222` · `B04_PreProcess_UI_Camera.ts:254` · `ui_template_loupe.ts:93` · `openwebcad/.../input-wheel.ts:26` |
|
||||
| D03 | B05 길 그대로 — 휠 `wheelZoomsIn`(한 칸 ×1.15) · 가운데 끌기 옮김 · 왼쪽 끌기 옮김 없음 · Ctrl+휠 돌림 | `Map:340-348` → `B05_Profile/B05_Profile_UI_RouteEdit_Input.ts:24-25` · `:54-85` · `:87-107` |
|
||||
| D02 | 공용 카카오 지도 `editMap` — 지도 만들 때 `click` 하나만 듣고 휠 · 끌기는 카카오 제 것 | `D02:133-142` → `Kakao:158-166` |
|
||||
| 카카오 제 동작 | 휠 앞 = 확대(설정 「밂」과 같음 · 「당김」이면 어긋남) · 한 칸 = 한 단(두 배) · 왼쪽 끌기 = 옮김 · 가운데 끌기 = 없음(브라우저 자동 굴림) | 카카오 SDK(코드 밖) |
|
||||
| 같은 부품 쓰는 곳 | D02 · D03 지형 범위 창 · B08 이정표(경로 · 소재지 · 모달 · 연결선 모달) | `Page:373` · `B08_Quantity_UI_Milestone_Route.ts:197` · `_Place.ts:57` · `_Modal.ts:310` · `_LegModal.ts:230` |
|
||||
|
||||
→ 어긋남 셋 = 가운데 끌기 옮김 없음 · 「당김」 무시 · 확대 한 단 크기(카카오 두 배 · D03 1.15 배).
|
||||
|
||||
### 바꿀 자리 · 가장 작은 고침
|
||||
|
||||
- 자리 = `Kakao` 지도 만드는 곳 `:158-166` 한 곳(페이지마다 고치지 않음).
|
||||
- 휠 — 지도 칸(`box`)에 `wheel` 을 잡는 단계(capture · passive false)로 걸어 카카오에 안 넘김 → `map.setLevel(map.getLevel() + (wheelEventIn(e) ? -1 : 1), { anchor: 마우스 자리 })` · 마우스 자리 = `map.getProjection().coordsFromContainerPoint(new maps.Point(x, y))`. 핀치(Ctrl+휠 잘게)도 `wheelEventIn` 이 늘 벌림 = 확대로 셈.
|
||||
- 갈래 B = `map.setZoomable(false)` 뒤 같은 셈 — 짧으나 태블릿 두 손가락 확대까지 꺼짐 · B08 시험 가짜 카카오(`test_244_9_b08_milestone_route_map.py:194-210`)에 `setZoomable` 이 없어 만들 때 부르면 시험 넷이 깨짐. → 권함 = 잡는 단계(시험 · 손가락 그대로).
|
||||
- 가운데 끌기 — `box` `pointerdown` 단추 1 = 자동 굴림 막고(preventDefault) 끄는 동안 `setCenter(coordsFromContainerPoint(중심 − 민 만큼))`(바로 옮김 · `panBy` 는 부드럽게 움직여 끊길 수 있음).
|
||||
- 왼쪽 끌기 옮김 — 카카오 제 것 그대로 둠(D02 왼쪽 끌기에 다른 몫 없음 · 누름 = 지점 놓기는 카카오가 끌기와 가름 · 손가락 옮김 유지).
|
||||
- 확대 한 단 크기 — 카카오는 단(정수)만 됨 → 맞추지 못함(한계로 둠).
|
||||
- `KakaoMaps` · `KMap` 꼴에 `getLevel` · `setLevel(level, opts)` · `getProjection` · `getCenter` · `Point` 칸 덧(`Kakao:26-58`).
|
||||
- 줄 수 242 → 약 280.
|
||||
|
||||
### 저장 꼴 · 다른 페이지
|
||||
|
||||
- 저장 꼴 — 없음(설정 = `input-prefs` 그대로).
|
||||
- 다른 페이지 — B08 이정표 지도 넷 · D03 지형 범위 창도 같이 따름(설정 「모든 화면」 뜻대로 · B08 사용자에게는 가운데 끌기가 새로 생김). D04 · B03 = 카카오 지도 없음.
|
||||
- 시험 — 휠 · 가운데 끌기 셈은 사건 안에서만 부름 → B08 가짜 카카오 시험 그대로 통과 · 새 시험 하나(가짜 카카오 + 「당김」 저장 뒤 휠 = 축소 · 가운데 끌기 = 중심 옮김).
|
||||
|
||||
---
|
||||
|
||||
## 2. 기준지정 — 시점 · 종점 하나로 · 지점마다 색
|
||||
|
||||
### 지금
|
||||
|
||||
| 항목 | 지금 | 자리 |
|
||||
| --- | --- | --- |
|
||||
| 화면 꼴 | `{starts: [...], ends: [...]}` 두 목록 · 이름 「시점 N」 「종점 N」 · [+ 시점] [+ 종점] | `D02:49-55` · `:73-82` · `:119-127` · `:169-183` · `:260-278` |
|
||||
| 지도 표지 | 카카오 기본 핀(한 색) + 흰 이름표 · 색 칸 없음 | `D02:186-203` → `Kakao:101-109` · `:192-205` · `ui_template_kakao_map.css` `.ui-kakao-map__label` |
|
||||
| 저장 몸 · 캐시 | `{starts, ends}` · 캐시 `d02-points {base, points}` | `D02:293` · `:322-326` |
|
||||
| 서버 | `BaseRequest {starts, ends}`(목록마다 20) · `base_view` · `stored_base` | `D02_PlanBase_Router.py:30` · `:38-40` · `:80-99` · `:108-119` |
|
||||
| 말 | `D02_Points_Title` 「시점 · 종점」 · `D02_Start` · `D02_End` · `D02_Add_*` | `ui_template/ui_template_locale_de.ts:121-129` |
|
||||
|
||||
D03 이 시점 · 종점을 가르는 곳(580 뒤)
|
||||
|
||||
| 자리 | 지금 쓰임 |
|
||||
| --- | --- |
|
||||
| `Draw:236-241` 붙기 제안 | 시점에서 긋는 중 = 종점들 · 끝에서(뒤집어) 긋는 중 = 시점들 |
|
||||
| `Draw:342-381` 시작 | 꼬리가 종점에 닿은 선 · 머리가 시점에 놓인 선 = 이어 긋기 잠금 · 종점 누름 = 새 선 + 뒤집기(`flip`) · 시점 누름 = 새 선(이미 선이 있으면 갈래) |
|
||||
| `Edit:174-180` 잠금 | 시점 · 종점 자리 꺾임점 못 옮김(이미 한 목록으로 봄) |
|
||||
| `Paint:132-146` 그림 | 시점 초록 · 종점 빨강 |
|
||||
| `D03_PlanAnalysis_Router.py:56-68` · `Page:622` 입구 | 시점 하나 이상 · 종점 하나 이상 아니면 막음 |
|
||||
| 그 밖(이미 합쳐 씀) | 맞춤 · 범위 밖 · 겹 점 `Page:143` · `:256` · `:634` · 지형 범위 `Router:67` · 굳힘 `D03_PlanAnalysis_Network.py:390-400` · `:429` |
|
||||
|
||||
### 바꿀 자리 · 가장 작은 고침
|
||||
|
||||
- 서버(`D02_PlanBase_Router.py`) — `BaseRequest {points: [LonLat]}`(상한 40 = 옛 20 + 20 잃지 않음) · `base_view` = `stored["points"]` · 없으면 `[...starts, ...ends]` · 더 옛 `start` · `end` 한 점 · 옛 연도 행 접기 = `[첫 시점, 끝 종점]` · `stored_base` 한 목록.
|
||||
- D02 화면 — 상태 `Array<LonLat | null>` 하나 · 이름 「지점 N」 · [+ 지점] 하나 · 줄 이름 칸에 색 점 · 지도 이름표 바탕 = 그 색(`MapPin` 에 `color?` 한 칸 · 이름표 `style.background` · B08 은 안 줌 = 지금 그대로) · 캐시 옛 꼴(`starts` 있음)은 버림.
|
||||
- 핀 자체 색(카카오 `MarkerImage` · SVG 글 주소)은 뒤로 — 이름표 색으로 먼저(카카오 새 API 없음 · 가짜 카카오 그대로).
|
||||
- 색 정하기 — 차례 색(지점 1 · 2 · 3 …) · 공용 함수 하나 `pointColor(i)` = 있는 그림 색 여섯 `--draw-chart-0~3` · `--draw-warning` · `--draw-danger` 를 돌림(D02 · D03 같이 부름 · `ui_template_palette.ts` 에 몇 줄).
|
||||
- 일곱째부터 색이 되풀이 → 「지점 N」 번호로 가름. 지점을 지우면 뒤 번호 · 색이 한 칸씩 당겨짐(이름과 색이 같이 감 · 저장 칸 덧 없음).
|
||||
- 새 토큰(`--draw-pin-*`)을 두면 `test_551_2_draw_tokens.py:127` 의 토큰 수(21)를 같이 고침 → 여섯 돌림이 모자랄 때만.
|
||||
- D03 — `PlanBaseView {epsg, points}`(`D03_PlanAnalysis_Api.ts:23-27`) · `Page` `starts` · `ends` → `points` · `Draw` 붙기 제안 = 그리는 선 첫 점 아닌 지점 모두 · 시작 = 지점 누름 → 그 자리에 꺾임점 있는 선이 있으면 갈래 · 없으면 새 선(뒤집기 없음) · 잠금 = 꼬리 · 머리가 지점 위면 이어 긋기 없음 · `Edit` 잠금 한 목록 · `Router._plan_ends` · `Page:622` = 지점 하나 이상 · `Network._freeze_base` 열쇠 `points`.
|
||||
- 측점 No.0 = 긋기 시작한 지점(지금 시점에서 긋기와 같음) · 반대는 [방향 바꾸기](`Edit:78-84`) — `flip` 은 「선 머리에서 이어 긋기」 몫만 남음(물음 3).
|
||||
|
||||
### 저장 꼴 · 다른 페이지
|
||||
|
||||
- 저장 꼴 — `projects.plan_base_json` `{epsg, starts, ends}` → `{epsg, points: [{x, y}]}` · 옛 꼴은 읽을 때만 감쌈 · 쓰기는 새 꼴 · SQL 없음. API `GET/PUT …/plan/points` = `{epsg, points}`.
|
||||
- 다른 페이지 — D04 · B03 · B01 은 기준 점 칸을 안 읽음(조각 · 연도 행만) → 고침 없음 · 프로젝트 복제 = 칸 통째 복사(`common_util/common_util_project_copy.py:39`) → 그대로.
|
||||
- 시험 — `test_529_3_plan_points.py`(꼴 · 상한 · 옛 꼴 셋) · `test_530_2_plan_router.py:30-66`(가짜 `plan`) · `test_530_2_plan_analyze.py:187-246`(가짜 base · 굳힘) · `test_553_4_de_parts.py`(D02 부품) · `test_530_3_plan_logic.py`(시작 · 붙기 거치는 순수 함수 있으면).
|
||||
- 가이드 `A05_EduDetail/guide/D02/_scenes.json` 은 `.d02-points__row:nth-child(n)` 를 잡음 — 줄 꼴 그대로면 그대로 · 고쳐 찍기는 지시 때.
|
||||
|
||||
---
|
||||
|
||||
## 3. 노선분석 지도에 지점 표지
|
||||
|
||||
### 지금
|
||||
|
||||
- `Paint:132-146` — 그리기 겹 맨 끝에 반지름 7 px 점 · 흰 테 2 px · 시점 `#16a34a` · 종점 `#dc2626`(날 색 · 그림 색 규칙 밖) · 이름 없음.
|
||||
- 위 캔버스(바탕 겹 위)라 겹에 묻히지는 않으나 작음 · 고른 선 밝힘(`Edit:182-219` · 그리기 겹 뒤)과 재기 겹이 그 위에 그려짐(`Page:244-249` · `:615`).
|
||||
- 지형 범위 창 카카오 지도엔 지점 없음(`Page:390` 표지 빈 목록).
|
||||
|
||||
### 가장 작은 고침
|
||||
|
||||
- 같은 자리(`Paint:132-146`)에서 크기 · 꼴만 — 핀(반지름 약 10 px 원 + 아래 꼭지) · 흰 테 · 어두운 테두리 · 위에 「지점 N」 글(`planLabel` `Paint:239-258` 그대로) · 색 = 2 의 `pointColor(i)`(D02 와 같은 번호 · 같은 색).
|
||||
- 늘 맨 위로 — 지점 그림을 작은 겹 하나로 떼어 겹 목록 맨 끝에 둠(`Page:249` · `:615` 두 곳 한 줄씩) · 화면 px 고정 크기(지금 그대로 · 줌과 무관).
|
||||
- 지형 범위 창(`Page:390`)에 지점 고정 표지(`fixed`) 넣기는 한 줄 — 요구 밖이라 뒤로.
|
||||
|
||||
### 저장 꼴 · 다른 페이지
|
||||
|
||||
- 저장 꼴 — 없음. 다른 페이지 — 없음.
|
||||
- 시험 — `test_553_4_de_parts.py` 날 색 검사가 그림 파일에 걸리면 같이(지금 `Paint` 는 안 봄 · 날 색 둘이 없어짐).
|
||||
|
||||
---
|
||||
|
||||
## 4·5. 고르기 모델 · 속성 판 · 끌어 고르기
|
||||
|
||||
### 지금
|
||||
|
||||
| 항목 | 지금 | 자리 |
|
||||
| --- | --- | --- |
|
||||
| 고름 꼴 | `{line, piece}` 하나 | `Edit:51-54` |
|
||||
| 지도 누름(쉴 때) | 마크 = 그 구간 + 끌기 · 꺾임점 = 그 선 · 구간 + 끌기 · 선 = 그 선 · 구간 · 고른 선 위 = 꺾임점 더함 · 빈 곳 = 풂 | `Edit:220-272` |
|
||||
| 고른 뒤 칸 | 왼쪽 「그리기」 아래 「고른 선 — 이름 · 길이」 + [방향 바꾸기] [선 지움] | `Edit:77-97` · `:113-122` |
|
||||
| 해 고치기 | 왼쪽 「구역 · 연도」 목록 — 선 머리 줄 「선 통째 연도」 · 구간 줄마다 해 고름 · 고른 줄 밝힘 · 줄 누름 = 아무 일 없음 | `Page:312-362`(통째 `:321-328` · 구간 `:347-355`) |
|
||||
| 여럿 · 연도 묶음 | 없음(Shift 없음 · 같은 해 묶음 없음) | `Map:308-316`(누름에 단추만 넘김 · 덧 키 없음) |
|
||||
| 빈 곳 왼쪽 끌기 | 아무 일 없음(마우스 왼쪽 옮김 없음 · 누름 못 받으면 잡지 않음) | `Map:308-316` · `B05_..._Input.ts:91-96` |
|
||||
| 키 | Delete = 고른 선 지움 · Esc = 풂 | `Edit:307-318` |
|
||||
|
||||
→ 「자유도가 적음」 = 한 번에 하나 · 넓히는 길 없음 · 해를 고치려면 왼쪽 긴 목록에서 줄을 찾아감.
|
||||
|
||||
### 고르기 모델(안 하나)
|
||||
|
||||
- 낱 = 구간(조각 · 마커로 나눈 선 토막) — 해 · 업체가 붙는 단위라 모든 고름을 「구간 id 묶음」으로 줄임.
|
||||
- 넓이 셋 — 요구의 세 말에 짝
|
||||
- 구간 = 「구역선」 — 누른 구간
|
||||
- 선 = 「개별선」 — 그 구간이 든 그은 선(본선 · 갈래) 구간 모두
|
||||
- 같은 해 = 「연도별 선」 — 고른 구간과 해가 같은 구간 모두(선을 건너)
|
||||
- 지도 조작(쉴 때 · 긋기 · 재기 아님)
|
||||
|
||||
| 조작 | 결과 |
|
||||
| --- | --- |
|
||||
| 선 누름 | 그 구간 하나(넓이 = 구간) |
|
||||
| 이미 고른 곳 다시 누름 | 넓이 한 단 위(구간 → 선 → 같은 해 → 구간) |
|
||||
| Shift+누름 | 그 구간 더함 · 이미 있으면 뺌 |
|
||||
| 빈 곳 왼쪽 끌기 | 창 · 걸침(아래 규칙) · Shift = 지금 고름에 더함 |
|
||||
| 빈 곳 누름 · Esc | 풂 |
|
||||
| 마커 누름 | 뒤 구간 고름 + 마커 밝힘 · 끌기 = 옮김(6) |
|
||||
| 꺾임점 끌기 | 옮김(지금 그대로) |
|
||||
| 고른 선 위 누르고 끌기 | 꺾임점 더하고 옮김(지금은 누름만으로 더함 → 「끌 때만」으로 바꿔 다시 누름 = 넓힘과 안 겹침) |
|
||||
| Delete | 고른 구간이 선 통째면 그 선 지움 · 아니면 「선 넓이로 고르면 지움」 알림 |
|
||||
|
||||
- 왼쪽 목록 — 「구역 · 연도」 줄 누름 = 그 구간 · 선 머리 줄 누름 = 선 · 목록 머리에 해마다 한 줄(「2027년 · 구간 3 · 512.4 m」) 누름 = 같은 해. 해 고름은 속성 판으로 옮기고 목록은 보기 + 고르기만(고치는 길 한 곳).
|
||||
- 속성 판 — 지도 위 떠 있는 판(공용 `createFloatPanel` · 머리 끌어 옮김 · 오른쪽 위) · 고름 있을 때만 · 오토캐드 특성 창 꼴
|
||||
|
||||
| 칸 | 보임 · 고침 |
|
||||
| --- | --- |
|
||||
| 머리 | 「구간 3 · 선 2 · 412.5 m」 · ✕ = 풂 |
|
||||
| 넓이 | [구간][선][같은 해](`createSegment`) — 바꾸면 고름 다시 |
|
||||
| 연도 | 고름 하나 · 모두 같으면 그 해 · 다르면 「여러 해」 → 고르면 고른 구간 모두 그 해(되돌리기 한 걸음) |
|
||||
| 목록 | 고른 구간 줄 — 선 이름 · 측점 범위 · 길이 · 해 · 줄 누름 = 그 구간만 |
|
||||
| 동작 | [방향 바꾸기](선 하나 통째 · 갈래 아님) · [선 지움](선 통째 · 갈래 붙으면 막음 · 지금 까닭 글) · 마커 고름이면 [마커 지움] |
|
||||
| 보기만 계정 | 값만 · 고름 · 단추 숨김 |
|
||||
|
||||
- 저장 안 함 — 고름 · 넓이 = 화면 기억(캐시 밖 · 지금 고름과 같음).
|
||||
|
||||
### 끌어 고르기 판정 규칙(창 · 걸침)
|
||||
|
||||
- 시작 = 쉴 때 빈 곳(선 8 px · 꺾임점 · 마커 · 지점 12 px 밖) 왼쪽 누름 · 4 px 넘게 끌면 창 · 안 넘고 놓으면 지금처럼 「빈 곳 누름 = 풂」.
|
||||
- 방향 = 보이는 화면 기준 가로만(오토캐드 같음 · 세로 무관)
|
||||
- 끝 x ≥ 시작 x = 창(window) — 왼위 → 오른아래(왼아래 → 오른위도 같음)
|
||||
- 끝 x < 시작 x = 걸침(crossing) — 오른 → 왼
|
||||
- 상자 = 화면 축에 바른 네모 R(돌린 지도도 보이는 화면 그대로).
|
||||
- 판정 낱 = 구간 꺾은선(선 꼭짓점을 구간 앞뒤에서 자른 것 · 이미 있는 `sliceLine`) · 점마다 화면 자리 = 돌린 뒤 px.
|
||||
- 창 — 구간 꺾은선의 모든 점(앞 끝 · 뒤 끝 · 속 꺾임점)이 R 안이면 고름(네모가 볼록이라 토막도 다 안).
|
||||
- 걸침 — 점 하나라도 R 안 · 또는 토막 하나라도 R 네 변과 만나면 고름(토막 × 네모 자르기 셈).
|
||||
- 마커가 없는 선 = 구간 하나 = 선 통째 → 창은 선이 다 들어야 · 걸침은 걸치기만.
|
||||
- 결과 = 구간 묶음 · 넓이 = 구간 · Shift = 더함.
|
||||
- 그림 — 창 = 실선 테두리 + 옅은 채움 `--draw-primary` · 걸침 = 점선 테두리 + 옅은 채움 `--draw-success`(오토캐드 파랑 · 초록 꼴 · 그림 색 규칙 안).
|
||||
- 마커 · 지점 표지는 상자 고름 대상 아님(구간만).
|
||||
|
||||
### 바꿀 자리 · 가장 작은 고침
|
||||
|
||||
- `Plan` 순수 함수 둘 — `setPiecesYear(network, ids, year)`(몇 줄) · `piecesInBox(network, toView, box, crossing)`(창 · 걸침 셈 · 약 40 줄 · 화면 없이 시험됨).
|
||||
- `Map` — 누름에 Shift 넘김(`press(px, py, map, button, shift)` · `:308-316` · `:333-339`) · `ScreenMap` 에 `rerotate` · `unrotate` 두 칸(돌린 화면 자리 · 상자 그림 · `:54-67` · `:207-227`) · `rotation` 은 이미 있음(`B05_Profile_UI_RouteEdit_Rotate.ts:37-45`).
|
||||
- `Edit` — 고름 꼴 `{pieces: string[], scope, mark?}` · 다시 누름 넓힘 · Shift · 빈 곳 끌기 상자(누름 = 참 → 캔버스가 잡음 · 곁 · 놓음은 지금 끌기 길 `:273-297` 그대로) · 꺾임점 더함 = 끌 때만 · 321 → 약 430 줄.
|
||||
- 새 `D03_PlanAnalysis_UI_Props.ts` — 속성 판 + `Page` 의 `renderPieces` · `yearOptions` 옮김(약 180 줄) · `Page` 649 줄이 700 에 가까워 옮겨야 함.
|
||||
- `Page` — 판 붙임 · 목록 줄 누름 → `edit.select` · 해 고름 옮긴 만큼 줄어듦.
|
||||
- 부품 — 떠 있는 판 · 마디 고름 · 고름 칸 모두 있는 부품(`createFloatPanel` · `createSegment` · `createSelectField`) · 새 부품 없음.
|
||||
|
||||
### 저장 꼴 · 다른 페이지
|
||||
|
||||
- 저장 꼴 — 없음(`plan_networks.network_json` · `plan_route_pieces` 그대로) · 해를 바꾸면 그 해 지문이 바뀌어 그 해 확정 풀림(`D03_PlanAnalysis_Network.py:352-371` · 지금 규칙).
|
||||
- 다른 페이지 — D04(조각 행 · 업체 `piece_id` · `D04_PlanConfirm_Repository.py:61-87` · `D04_PlanConfirm_Link.py:107-129`) · B03(조각 SHP) 고침 없음.
|
||||
- 시험 — `test_530_3_plan_logic.py`(창 · 걸침 · 돌린 화면 · 여러 해 바꿈) · `test_553_4_de_parts.py`(새 판 = 부품 · 날 단추 없음).
|
||||
|
||||
---
|
||||
|
||||
## 6. 연도 마커 끌기로 연도 나누기
|
||||
|
||||
### 지금
|
||||
|
||||
| 항목 | 지금 | 자리 |
|
||||
| --- | --- | --- |
|
||||
| 마커 놓기 | 왼쪽 [연도 구분] 단추 → 선 위 누름 = 그 자리 구간 둘(뒤 = 같은 해 · 요구 441) → 왼쪽 해 고름 펼침 | `Draw:130-138` · `:463-477` · `Plan:102-118` · `Page:116-119` · `:296-310` |
|
||||
| 긋는 해 | 왼쪽 「긋는 해」 고름 = 새 구간 처음 해 · 긋는 중 바꾸면 다음 점에서 저절로 나눔 | `Page:168-177` · `:93` · `:216` · `Draw:400-413` · `:427` |
|
||||
| 마커 옮김 | 쉴 때 마커 끌기 = 경계 옮김(이웃 · 끝 1 m 지킴) | `Edit:241-246` · `:283-287` · `Plan:491-506` |
|
||||
| 마커 지움 | 오른쪽 누름 = 두 구간 합침(앞 해 · 앞 id) | `Edit:228-233` · `Plan:120-136` |
|
||||
| 서버 | 마크 = 선 위 거리 · 구간 = 마크 사이 · 업체 붙은 구간이 사라지면 [저장] 409 | `D03_PlanAnalysis_Network.py:108-123` · `:128-157` · `:320-326` |
|
||||
|
||||
### 규칙(안)
|
||||
|
||||
- 도구 = 지도 도구줄 「연도 마커」 하나 — 그것을 끌어 선 위에 놓음(브라우저 끌어 놓기 · 새 라이브러리 없음). 왼쪽 「긋는 해」 · [연도 구분] 단추 · 긋는 중 해 나눔 걷음.
|
||||
- 마커 = 뒤 구간 시작 = 구간 경계(화면 `pieces[k].from_m` · 서버 `marks.at_m`) · 뜻 = 「여기부터 N년」.
|
||||
- 끄는 동안 미리보기 = 선 위 가장 가까운 자리(꺾임점 12 px 안이면 꺾임점) 마름모 + 「2027 | 2028」 글 · 못 놓는 자리 = 빨강.
|
||||
- 놓기 = 그 자리 구간을 둘로 — 앞 구간 = id · 해 그대로 · 뒤 구간 = 새 id · 해 = 앞 해 + 1(물음 2 · 지금 = 같은 해) · 뒤 구간 끝 = 다음 마커 또는 선 끝(그 뒤 구간 해는 안 건드림).
|
||||
- 못 놓음 — 선 밖(8 px 넘게) · 선 끝 · 다른 마커 1 m 안(`MARK_GAP_M`) · 길이 0 선.
|
||||
- 옮김 = 놓인 마커 끌기 — 경계만 옮김 · 앞뒤 해 · id 그대로 · 이웃 마커 · 끝 1 m 앞에서 멈춤 · 다른 선으로 못 넘김(지금 `moveMark` 그대로).
|
||||
- 지움 = 합침 — 오른쪽 누름(지금) · 선 밖으로 끌어 냄(새) · 마커 고르고 Delete(새) → 앞 구간이 뒤를 먹음 · 해 = 앞 해 · 앞 id 남음 · 뒤 id 사라짐 → 뒤 구간에 업체가 붙었으면 [저장] 409(지금 보호 · 미리 알림은 D04 자료가 있어야 해 뒤로).
|
||||
- 같은 해 양쪽 마커 = 구역만 나눔(업체 단위 · 요구 391) — 속 빈 마름모로 가름.
|
||||
- 해 바꿈 = 마커 누름 → 뒤 구간 고름 → 속성 판 연도(4 · 5 같은 판).
|
||||
- 긋기는 해를 안 물음 — 새 선 = 사업연도 시작 해 · 갈래 = 붙은 자리 구간 해 · 이어 긋기 = 끝 구간 해가 늘어남(지금 `normalizePieces` 동작) · 여러 해 = 다 그은 뒤 마커로.
|
||||
|
||||
### 바꿀 자리 · 가장 작은 고침
|
||||
|
||||
- 공용 지도 도구줄에 마커 단추 하나(`ui_template/ui_template_map_tools.ts` `MAP_TOOLS` 에 `year-mark` 칸 · 끌기 켬) — `test_553_4_de_parts.py:43` 이 `Map` 에 `createIconButton` 을 막으므로 `mapToolButton` 으로.
|
||||
- `Map` — 캔버스 `dragover` · `drop`(누른 자리 셈 `at()` 이 `MouseEvent` 를 받아 그대로 · `:303-306`) → 겹 `dragOver?` · `drop?` 두 칸(`PlanMapLayer` `:70-78`) · 약 15 줄.
|
||||
- `Edit` 또는 `Draw` — 미리보기 · 놓기 = `splitPiece` + 뒤 구간 해(+1) · 선 밖 끌어 냄 = `removeMark`.
|
||||
- `Plan` — `splitPiece(network, line, atM, nextYear?)` 한 칸 덧(뒤 구간 해) · 갈래 처음 해 = 붙은 자리 구간 해(`normalizePieces` 에 몇 줄).
|
||||
- `Draw` — [연도 구분] 단추 · `mark` 모드 · `yearSplit` · `year` 칸 걷음(약 −45 줄) · `Page` — `drawYearPick` · `drawYear` 걷음 · `commit` · `show` 의 해 = 사업연도 시작 해.
|
||||
|
||||
### 저장 꼴 · 다른 페이지
|
||||
|
||||
- 저장 꼴 — 없음(`marks [{line, at_m}]` + `pieces [{id, line, from_m, to_m, year}]` 그대로) · 「긋는 해」는 원래 화면 값이라 걷어도 저장 영향 없음.
|
||||
- 다른 페이지 — D04 · B03 고침 없음 · 해가 바뀐 해만 확정 풀림(지금 규칙).
|
||||
- 시험 — `test_530_3_plan_logic.py`(놓기 = 뒤 해 · 옮김 = 해 그대로 · 끌어 냄 = 합침 · 갈래 처음 해) · `test_553_4_de_parts.py`(`연도 구분` · `draw-year` 말이 걸리면 같이).
|
||||
|
||||
---
|
||||
|
||||
## 7. 고칠 차례
|
||||
|
||||
| 차례 | 일 | 파일 | 시험 |
|
||||
| --- | --- | --- | --- |
|
||||
| W1 | 카카오 휠 방향 · 가운데 끌기(1) | `ui_template/ui_template_kakao_map.ts` | 새 시험 하나 + `test_244_9` · `test_244_13` 통과 확인 |
|
||||
| W2 | 지점 하나로 · 차례 색 · D03 표지(2 · 3) | `D02_PlanBase_Router.py` · `D02_PlanBase_UI_Page.ts` · `_UI_Style.css` · `ui_template_locale_de.ts` · `ui_template_kakao_map.ts`(이름표 색) · `ui_template_palette.ts`(`pointColor`) · `D03_PlanAnalysis_Api.ts` · `Page` · `Draw` · `Edit` · `Paint` · `D03_PlanAnalysis_Router.py` · `D03_PlanAnalysis_Network.py` | `test_529_3` · `test_530_2` 둘 · `test_530_3` · `test_553_4` |
|
||||
| W3 | 고르기 · 속성 판 · 끌어 고르기(4 · 5) | `Plan` · `Map` · `Edit` · 새 `_UI_Props.ts` · `Page` · `_UI_Style.css`(판 자리) | `test_530_3` · `test_553_4` |
|
||||
| W4 | 연도 마커 끌기(6) | `ui_template_map_tools.ts` · `Map` · `Edit` · `Draw` · `Plan` · `Page` | `test_530_3` · `test_553_4` |
|
||||
|
||||
- W1 은 따로 · W2 → W3 · W4 는 같은 파일(`Page` · `Edit` · `Draw` · `Plan`)이라 한 창에서.
|
||||
- 줄 한도 — `Page` 649(속성 판으로 옮겨 줄임) · `Draw` 550(걷음으로 줄어듦) · `Edit` 약 430 · `Plan` 약 560.
|
||||
- 계산 자리 — 셈 짝(`logic/D03_PlanAnalysis_Draw` ↔ `.py`) 안 건드림 · 창 · 걸침 · 해 고침은 화면 몫(`Plan` TS 만) · 서버는 [저장] 때 선 · 마크 · 조각으로 다시 셈(지금 결).
|
||||
- 단축키 표(`ui_template_locale_common.ts:162-165`) · 지도 [?](`Map:163-176`)에 Shift+누름 · 끌어 고르기 · 마커 끌기 줄 덧 · 가이드(`A05_EduDetail/guide/D02` · `D03`)는 지시 때.
|
||||
|
||||
---
|
||||
|
||||
## 8. 사용자 물음
|
||||
|
||||
1. 「개별선」 = 그은 선 하나(본선 · 갈래 · 권함) 맞는지 — 꺾임점 사이 토막을 뜻하면 토막 고름 = 그 양끝에 마커 저절로.
|
||||
2. 연도 마커를 놓으면 뒤 구간 해 — 앞 해 + 1(권함 · 요구 441 「같은 해」를 바꿈) vs 같은 해 그대로.
|
||||
3. 시점 · 종점을 합친 뒤 측점 No.0 = 긋기 시작한 지점(권함 · 반대는 [방향 바꾸기]) — 요구 441 「종점에서 그으면 끝낼 때 뒤집음」은 시점 · 종점이 없어져 사라짐.
|
||||
|
||||
---
|
||||
|
||||
## 9. 확인 못 함
|
||||
|
||||
- 카카오 실제 동작 — 휠을 잡는 단계로 막으면 카카오 제 확대가 멎는지 · `setCenter` 끌기 끊김 · 이름표 색 보임 — 브라우저 안 씀.
|
||||
- 사용자가 설정에 「당김」을 골랐는지 — 기본 「밂」이면 휠 방향은 이미 같고 어긋남은 가운데 끌기 · 한 단 크기뿐.
|
||||
- 브라우저 끌어 놓기(`dragover`) 중 미리보기 반응 · 터치 기기 끌어 놓기.
|
||||
- B03 가 조각 SHP 를 받는 꼴 — 563-2 기록만 봄 · 코드 안 따라감.
|
||||
- 업체가 붙은 구간 미리 알림에 쓸 D04 자료 길 — 안 따라감.
|
||||
@@ -0,0 +1,164 @@
|
||||
# 분석 445-B — D03 노선분석 지도 「카카오맵처럼」 빠르게 · 타일 · GPU (요구 445)
|
||||
|
||||
읽기 전용 · 코드 · git · storage 안 고침 · 줄 = main_laptop_1 `5332fd2ad`.
|
||||
실측(메모리 안에서만 · 파일 안 씀) = 큰 D 프로젝트(`4250c7bc…` · 도엽 등고선 7,039 가닥 · 꼭짓점 169만 · 77 MB) 로
|
||||
① GDAL(이미 설치된 pyogrio) 벡터 타일 묶음 만들기 ② MapLibre 가 쓰는 geojson-vt(이미 설치) 조각내기 ③ 지금 좌표 가정의 어긋남 셈.
|
||||
브라우저 · 서버 안 띄움.
|
||||
|
||||
## ① 결론
|
||||
|
||||
1. **기술로 가능함.** 카카오 · 네이버 · 구글이 빠른 핵심 = 「조각(타일) + 그래픽 카드(GPU)가 미리 쪼개 둔 선을 다시 찍기만」. 우리 D03 = 캔버스가 화면마다 모든 겹의 모든 선을 처음부터 다시 칠함 → 겹이 늘수록 느려짐.
|
||||
2. 582 로 「붓질 수」(JS 3.2~4.5 ms)는 줄였으나 남은 몫 = **칠하기 자체**(큰 D 굵은 계곡선만 36 ms · 한 화면 한도 16.7 ms). 캔버스를 유지하는 한 이 몫은 잘 안 줄어듦.
|
||||
3. **권함 = (나) 바탕 지도만 MapLibre GL(WebGL · BSD-3 · 이미 설치 5.24 · 쓰는 곳 0)로 옮기고, 그은 선 · 재기 · 긋기는 지금 위 캔버스 그대로.** 이음매가 이미 있음 — 위 겹(긋기 · 고치기 · 재기)은 `ScreenMap`(toScreen · toMetric · pxPerMeter · upright)만 씀.
|
||||
4. 첫 시제품은 **서버 고침 거의 없이** 됨 — 지금 받는 GeoJSON 을 MapLibre 가 일꾼 스레드에서 직접 조각냄(실측: 꼭짓점 169만 = 읽기 0.8 s + 색인 0.47 s · 힙 약 300 MB · 깊은 줌 조각 2~10 ms). 아주 큰 자료는 뒤에 서버 타일 파일(실측: 77 MB → 15.5 MB · 5.7 s · 새 패키지 없음).
|
||||
5. **곁 발견(셈만 · 화면 확인 못 함)** — 지금 지도는 경위도 자료(위성 · 등고선 · 하천 · 지적 …)와 TM 자료(그은 선 · 급경사 · 음영 그림)를 「같은 직사각형」으로 펴서 맞춤(`B04_PreProcess_UI_MapRender.ts:349-350` 주석). 자오선 수렴각(약 0.56°) 때문에 **보통 D 프로젝트 귀퉁이 최대 64 m · 가운데 절반 안 최대 32 m**(큰 D 95 m) 어긋남 셈. MapLibre 로 가면 바로잡히나, 지금 그어 둔 선이 바탕 대비 그만큼 「옮겨 보일」 수 있음 → 시제품 전에 화면 확인 먼저.
|
||||
6. 카카오맵 API 를 바탕으로 쓰는 길 = **안 맞음**(지도 회전 없음 · 수천 가닥 선 얹기 느림 · 「API 활용 기능 별도 과금 금지」 · 저장 · 캡처 금지 · 고유 격자).
|
||||
|
||||
---
|
||||
|
||||
## 1. 큰 지도 서비스가 빠른 까닭(쉬운 설명)
|
||||
|
||||
| 기술 | 쉬운 말 | 우리 D03 지금 |
|
||||
| --- | --- | --- |
|
||||
| 타일 피라미드 | 지도를 줌 단계마다 256 · 512 px 조각으로 미리 잘라 둠. 한 단 들어가면 조각 4 배, 조각 크기는 같음 → 넓게 보든 좁게 보든 화면엔 늘 20~40 조각 · 일 양이 비슷 | 범위 전체를 한 덩어리로 받아 둠 · 줌아웃할수록 화면 안 선이 늘어 일이 커짐 |
|
||||
| 줌별 미리 단순화 | 멀리 볼 땐 굵직한 모양만 담은 조각, 가까이 볼 땐 자세한 조각 — 조각마다 이미 줄여 둠 | 582 줌 단계 색인(브라우저가 매번 고름) — 같은 효과의 일부 |
|
||||
| 미리 그린 그림 타일(래스터) | 서버가 미리 그려 둔 PNG · JPG 조각을 붙이기만 → 브라우저 일 거의 없음. 위성 · 옛 웹 지도(구글 「raster = 서버가 만든 그림 조각」) | 위성 = 한 장으로 이어 붙인 그림(줌 18 · 넓으면 더 낮음 → 확대하면 흐림 · `_분석_389-C`) |
|
||||
| 벡터 타일 + GPU | 조각에 선 좌표만 담아 보내고, 그래픽 카드가 그림. 선을 한 번 삼각형으로 바꿔 그래픽 카드 메모리에 올려 두면, 옮기기 · 확대 · 돌리기 땐 「카메라」만 바꿔 다시 찍음 → 선이 수십만 개여도 한 화면 몇 ms. 구글 벡터 지도(「WebGL 로 브라우저에서 그림」) · 네이버 GL(`gl: true`) · 카카오 앱 벡터 SDK | Canvas 2D — 화면마다 모든 선을 다시 「붓질」 · 다시 칠함(삼각형 쪼개기도 매번). 겹 20 개면 20 배 가까이 |
|
||||
| 화면 밖 안 받음 · 안 그림 | 보이는 조각만 받고 그림 · 나머지는 받지도 않음 | 그리기는 화면 밖을 거름 · 받기는 범위 전체 |
|
||||
| 일꾼 스레드 · 캐시 | 조각 풀기 · 삼각형 쪼개기는 뒤쪽 스레드 · 받은 조각은 기억 | 모두 주 스레드 |
|
||||
| 줌 사이 이음 | 새 조각이 올 때까지 옛 조각을 늘려 보여줌. 벡터면 늘려도 선 굵기 · 매끈함 그대로 | 07-28 「끌기 중 비트맵 늘리기」는 흐림 · 빈칸으로 되돌림 |
|
||||
|
||||
- 카카오 웹 지도(JS API)의 정확한 그리기 방식(그림 조각인지 벡터인지)은 공식 문서에서 확인 못 함. 앱은 2023 벡터 SDK(`_분석_389-C` 3장).
|
||||
|
||||
## 2. 지금 D03 이 느린 자리(근거)
|
||||
|
||||
| 항목 | 값 | 근거 |
|
||||
| --- | --- | --- |
|
||||
| 겹 수 | 20(위성 · 음영 · 등고선 · 급경사 · 세류 · 물 면 · 도로 · 임도 짐작 · 올린 임도망도 · 지적 · 보호구역 · 산림입지 · 산사태위험 · 산사태취약 · 단층 · 지질구조선 · 0차곡 · 띠 · 건물 · 지명) — 모두 아래 캔버스 한 장 | `D03_PlanAnalysis_UI_LayerDefs.ts:21-41` · `D03_PlanAnalysis_UI_Layers.ts:384-615` |
|
||||
| 다시 그리는 때 | 옮김 · 확대 · 돌림 = 아래 캔버스 20 겹 전부 다시 · 마우스 = 위만(582) | `D03_PlanAnalysis_UI_Map.ts:249-299` |
|
||||
| 582 뒤 줌아웃 JS | 보통 D 3.2 ms · 큰 D 4.5 ms(전 5.9 · 6.3) · 끊김 30 화면 중 7 | `PLAN.md` 582-0/1 검증 줄 |
|
||||
| 남은 칠하기 | 큰 D 굵은 계곡선만 **36 ms**(한 화면 한도 16.7 ms) · 한 길로 모아 긋기는 오히려 60 ms 라 뺌 | 커밋 `5e906ceb4` 글 · `PLAN.md:10` |
|
||||
| 겹 늘 때 | 새 겹 일곱 켬 = 줌 그리기 중앙 5.5 ms(끔 2.0) | `docs/raw/plans/2026-10-29_plan_581.md:9` |
|
||||
| 20 겹 다 켠 큰 D 의 프레임 시간 | **확인 못 함**(이번엔 브라우저 안 씀) | — |
|
||||
|
||||
- 판단: JS 는 줄었고 남은 것은 Canvas 2D 「칠하기」 — 선 · 면 · 반투명이 많을수록 커짐. 타일만 써도(가) 칠하기는 남고, GPU(나)가 이 몫을 없앰.
|
||||
|
||||
## 3. 갈래 셋
|
||||
|
||||
### (가) 지금 캔버스 유지 + 서버 타일(줌별)
|
||||
|
||||
- (가-1) 서버가 겹을 **그림 조각**(PNG z/x/y)으로 미리 그림 → 브라우저는 조각 붙이기만(한 화면 1~3 ms 어림).
|
||||
- (가-2) 서버가 **벡터 조각**(MVT)을 줌별로 줄여 줌 → 캔버스가 그림.
|
||||
|
||||
| 항목 | (가-1) 그림 조각 | (가-2) 벡터 조각 + 캔버스 |
|
||||
| --- | --- | --- |
|
||||
| 효과 | 칠하기 몫 거의 없앰(그림 붙이기) | 줌아웃 꼭짓점만 줄임 = 582 색인과 겹침 · **칠하기 36 ms 는 거의 그대로**(추정) |
|
||||
| 그림 품질 | 줌 사이(예 15.5)엔 조각을 늘리거나 줄여 선 굵기가 흔들림 · 새 조각 오기 전 흐림 · 돌리면 박힌 글(등고 수치 · 지명)도 같이 돎 · 밝음/어두움 색을 서버가 두 벌 · Pillow 선은 매끈함(안티에일리어싱) 없음(서버 그리기 라이브러리 = Pillow 뿐 · matplotlib · cairo 없음) | 지금과 같음 |
|
||||
| 일 크기 | 큼 — 겹 20 그리기를 파이썬으로 한 벌 더(코드 두 벌) · 조각 저장(`_derived/`) · 겹 켬끔 조합 · 브라우저 조각 관리(보이는 조각 · 받기 끊기 · 기억) | 중간 — 조각 받기 · 풀기 · 기억 + 서버 줄이기 |
|
||||
| 위험 | 07-28 롤백과 같은 체감(「끝날 때 바뀜 · 가장자리 빈칸」 `2026-07-28_plan_B04_Map_Performance.md:35-37`) | 효과 작음 |
|
||||
| 판단 | 비추천 | 비추천 |
|
||||
|
||||
- 지금 있는 「MVT 길」(`B04_PreProcess_Engine_MvtHelper.py` · `B04_PreProcess_Router_GIS.py:203`)은 사실상 빈 길 — 화면에서 부르는 곳 0 · `mapbox-vector-tile` 이 `requirements.txt:23` 에만 있고 venv 에 **안 깔림**(빈 바이트 돌려줌) · 줌별 줄이기 없이 자르기만.
|
||||
|
||||
### (나) 바탕 지도 = MapLibre GL(WebGL) · 그리기 조작 = 지금 위 캔버스 (권함)
|
||||
|
||||
구성:
|
||||
|
||||
| 겹 | MapLibre 에서 | 서버 손 |
|
||||
| --- | --- | --- |
|
||||
| 위성 | 조각 소스(브이월드 Satellite z6~19 · 서버 대리 받기 — B01 `/dashboard/map/tile/{z}/{x}/{y}` 꼴에 겹 이름 인자) → 확대해도 선명(지금 한 장 그림보다 나음) | 작음(대리 + 기억) |
|
||||
| 경위도 벡터 겹 13 여(등고선 · 하천 · 도로 · 지적 · 보호구역 · 건물 · 지명 …) | `geojson` 소스 — **지금 받는 GeoJSON 그대로** · MapLibre 가 일꾼 스레드에서 줌별로 조각 · 줄임(geojson-vt) | 없음 |
|
||||
| TM 그림 겹(급경사 · 음영 · 0차곡 · 산사태 그림) | `image` 소스(네 귀퉁이 경위도 — TM 상자 귀퉁이를 변환) · 음영 곱하기 합성은 확인 필요 | 없음 |
|
||||
| 등고 수치 · 지명 글 | 선 따라 글(symbol) — 한글은 PC 글꼴로 바로(`localIdeographFontFamily` · 한글 음절 포함) · **숫자는 글꼴 조각 파일이 필요**(자체 보관 · OFL 글꼴) 또는 지금처럼 위 캔버스에서 그림 | 글꼴 파일 몇 개 |
|
||||
| 그은 선 · 재기 · 긋기 미리보기 · 누름 | 지금 위 캔버스 그대로 · `ScreenMap` 만 MapLibre 로 바꿔 끼움(toScreen = TM→경위도→`map.project` · toMetric = 반대) · MapLibre 가 한 화면 그릴 때마다(render 알림) 위 캔버스도 같은 화면에 다시 | 없음 |
|
||||
|
||||
| 항목 | 내용 |
|
||||
| --- | --- |
|
||||
| 효과(실측 근거) | geojson-vt(설치본 6.1.1 · MapLibre 기본 값)로 큰 D 등고선 169만 꼭짓점 = 읽기 0.82 s + 색인 0.47 s · 힙 약 300 MB · 처음 보는 조각 줌아웃 9~12 조각 90~250 ms(뒤쪽 스레드 · 화면 안 멈춤) · 깊은 줌 2~10 ms · 그 뒤 옮기기 · 확대 = GPU 다시 찍기. 브라우저 프레임 시간은 **확인 못 함** — MapLibre · Mapbox 는 「60 fps」를 내세우나 독립 수치 못 찾음 |
|
||||
| 비슷한 사례 | 2025 IJGI 연구(Balla · Gede) — 5만 지물 넘으면 Mapbox GL 가장 빠름 · 그 아래는 Leaflet · OpenLayers 가 빠름 · MapLibre 는 시작이 느려 작은 자료엔 불리(첫 그리기 시간 비교 · 조작 프레임 수치는 본문 못 읽음) |
|
||||
| 그림 품질 | 선 = 매끈함(안티에일리어싱) · 굵기 px 고정(지금과 같은 뜻) · 소수 줌 부드러움 · 돌려도 글 바로 섬 · 위성 선명. 다른 점 = 선 끝 · 꺾임 모양 · 반투명 겹침 색 · 글 자리 고르기 규칙이 지금과 조금 다름 → 「지금과 똑같은 그림」은 아님 · 「같은 내용 · 더 매끈」 |
|
||||
| 일 크기 | D03 새 파일 하나(MapLibre 바탕 껍데기 · 300~400 줄 어림) + 겹 20 꼴 옮김(지금 `LayerDefs` · `Layers` 의 색 · 굵기 · 차례를 MapLibre 꼴로 · 받기 코드는 그대로) + TM↔경위도 변환 TS(파이썬 pyproj 와 짝 · 거울 시험 — 지금 TS 에 TM 변환 없음 · 아니면 proj4js(MIT) 새 의존) + 위성 대리 길(서버 작음) + 숫자 글꼴 파일. 위 겹(`UI_Draw` 550 · `UI_DrawPaint` · `UI_Edit` · `UI_Measure`)은 `ScreenMap` 만 받으므로 거의 그대로 |
|
||||
| 마우스 규칙 | MapLibre 기본(왼쪽 끌기 = 옮김)을 끄고 지금 규칙(가운데 끌기 옮김 · 휠 확대 · Ctrl+휠 돌림 · 왼쪽 = 도구)으로 다시 묶음 — 요구 445 「마우스 제어 연동」과 함께 정할 일 |
|
||||
| 라이센스 | MapLibre GL JS = BSD-3(설치본 `package.json` 확인) · geojson-vt = ISC · PMTiles = BSD-3 · 브이월드 = 공공누리 1유형 + 영리 목적 동의 필요(`2026-10-29_plan_581.md:15`) · 도엽 = 공공누리 1유형 · 숫자 글꼴 = OFL(Noto 등 · 고를 때 확인) |
|
||||
| 위험 | ① **좌표** — 지금 「같은 직사각형」 가정 어긋남(아래 4장) — 옮기면 바로잡히는 대신 그어 둔 선이 바탕 대비 옮겨 보일 수 있음 ② 그래픽 카드 없는 PC · WebGL 꺼진 브라우저 = 느리거나 안 뜸(대체 길 = 지금 캔버스 남겨 둠) ③ 인터넷 — 위성 조각은 볼 때마다 받음(서버 기억으로 줄임 · 지금은 한 장을 한 번 받아 둠) ④ 아주 큰 자료(수십 MB GeoJSON 여럿) = 브라우저 메모리(등고선만 약 300 MB) → 그땐 서버 타일 파일 ⑤ WebGL 문맥 — D03 [3D] 모달도 WebGL(닫으면 버림) · 둘 동시는 괜찮음(어림) ⑥ 최대 확대(화면 폭 20 m) — MapLibre 최대 줌 24 · GeoJSON 소스 maxzoom 18 로 정밀도 충분(어림) |
|
||||
| 공용 적용 | B04 하단 지도 · B05 평면 노선 편집 · B05 배수유역이 같은 캔버스 그리기(`B04_PreProcess_UI_MapRender.ts`)를 씀 → D03 에서 증명되면 같은 「바탕 껍데기」를 셋에 끼움. B05 노선 편집도 「위 캔버스 = 조작」 꼴이 맞음(노드 끌기 · 측점). B07 CAD(openwebcad)는 밖 |
|
||||
|
||||
아주 큰 자료용 뒷단(필요할 때만):
|
||||
|
||||
- 서버가 겹을 타일 파일 하나로 만듦 — **이미 깔린 pyogrio(GDAL 3.12.4)에 PMTiles · MBTiles · MVT 쓰기 드라이버가 있음**(새 패키지 없음).
|
||||
- 실측(메모리 안): 큰 D 등고선 77 MB → PMTiles z10~16 **15.5 MB · 5.7 s** · z10~17 21.1 MB · 7.6 s · 계곡선만 3.4 MB · 1.0 s. 낮은 줌 조각이 500 KB 를 넘어 GDAL 이 그 조각 정밀도를 스스로 낮춤 경고 → 주곡선을 몇 줌부터 보일지 정해야 함(화면 모양 바뀜 = 사용자 판단).
|
||||
- 지금 Starlette 0.27 = 파일 부분 받기(Range) 없음(0.39 부터) → PMTiles 를 그대로 못 내줌. 쉬운 길 = MBTiles(SQLite) 로 만들고 표준 `sqlite3` 로 z/x/y 한 조각씩 내주는 길 하나.
|
||||
|
||||
### (다) 그 밖
|
||||
|
||||
| 갈래 | 내용 | 판단 |
|
||||
| --- | --- | --- |
|
||||
| (다-1) 브라우저 안 그림 조각 | 지금 캔버스 그리기 코드 그대로 512 px 조각에 줌 단계별로 미리 그려 두고 화면엔 조각 붙이기 | 서버 손 없음 · 그림 같음(제 줌에서) · 그러나 줌 사이 흐림 · 다시 그릴 때 바뀜 · 돌리면 글이 같이 돎 = 07-28 롤백 체감과 같음 → 비추천 |
|
||||
| (다-2) OpenLayers(BSD-2) | TM(EPSG:5186) 그대로 지도 좌표로 씀(proj4 등록 · 위성 그림 조각을 브라우저에서 다시 투영) → 좌표 바꿈 없음 | 기본 벡터 그리기가 Canvas 2D(조각 기억은 있음) · WebGL 벡터 층은 새것이고 글은 약함 → 속도 이득이 MapLibre 보다 작음(추정) · 새 의존 둘 |
|
||||
| (다-3) deck.gl | 직교 보기로 TM 좌표 그대로 GPU 선 그리기 | 위성 조각 · 글 · 지도 조작을 따로 만들어야 함 · 라이센스 · 크기 확인 못 함 → 비추천 |
|
||||
| (다-4) 카카오맵 바탕 | 3장 | 안 맞음 |
|
||||
|
||||
## 4. 곁 발견 — 지금 좌표 「같은 직사각형」 가정의 어긋남(셈)
|
||||
|
||||
- 지금: 경위도 겹은 경위도 범위로 · TM 겹(그은 선 · 급경사 · 음영 · 0차곡 그림)은 TM 범위로 같은 0~1 상자에 펴서 그림(`createNormalizer` · `createMetricProjector` · `metricToScreen` 주석 「같은 사각형을 가리킨다는 가정」 `B04_PreProcess_UI_MapRender.ts:349-350`). 상자 TM 범위는 위성 그림 왼쪽 위 · 오른쪽 아래 두 점만 변환해 잡음(`B04_PreProcess_Engine_VWorld.py:175-176`).
|
||||
- TM 격자는 경위도 격자에 대해 자오선 수렴각만큼 돌아 있음(EPSG:5186 · 경도 127.95° · 위도 36.3° ≈ 0.56°) → 두 점을 이은 대각선 위는 0, 다른 두 귀퉁이로 갈수록 어긋남.
|
||||
|
||||
| 프로젝트(EPSG:5186 · 위성 상자) | 상자 | 최대 | 가운데 절반 안 최대 |
|
||||
| --- | --- | --- | --- |
|
||||
| 보통 D `1b628fec…` | 5.5 × 3.4 km | **64 m** | 32 m |
|
||||
| 큰 D `4250c7bc…` | 7.5 × 5.8 km | **95 m** | — |
|
||||
|
||||
- 뜻(추정): 화면에서 위성 · 등고선을 보고 그은 선의 TM 값이 실제 그 땅에서 수십 m 떨어질 수 있음 · 급경사 · 음영 그림이 등고선과 그만큼 어긋나 보일 수 있음. B04 · B05 도 같은 가정.
|
||||
- **화면 확인 못 함** — 큰 D 프로젝트 귀퉁이에서 「급경사 그림 대 등고선」 · 「위성 길 대 도엽 도로」를 ORCA 로 보는 30 분 거리. 셈만으론 6 매개변수(기울임 포함) 맞춤도 1.4 m 남음 → 바로잡으려면 정식 TM 변환.
|
||||
|
||||
## 5. 카카오맵 API 를 쓰는 길(한 줄)
|
||||
|
||||
- 안 맞음 — 웹 JS API 지도에 **회전 함수 없음**(D03 Ctrl+휠 돌림 못 함) · 등고선 수천 가닥을 `Polyline` 으로 얹으면 무거움 · 우리 그림 조각은 카카오 고유 격자(EPSG:5181)로 따로 만들어야 함 · 약관 「실시간 호출만 · 저장 불가」 + **「API 를 활용한 기능에 별도 과금 금지」**(유료 설계 프로그램이면 저촉 우려 · 카카오 공식 답 필요) · 도면 · 보고서 캡처 피함. 바탕 사진만 보는 D02(이미 카카오)에는 됨.
|
||||
|
||||
## 6. 권함 + 첫 걸음
|
||||
|
||||
권함 = **(나)** — 바탕만 MapLibre · 조작은 지금 위 캔버스 · 받는 자료는 지금 GeoJSON 그대로(서버 타일은 큰 자료가 문제 될 때만).
|
||||
|
||||
| 차례 | 할 일 | 재는 것 · 통과 |
|
||||
| --- | --- | --- |
|
||||
| 0 | 4장 좌표 어긋남 화면 확인(ORCA · 큰 D 귀퉁이) | 어긋남 m 실측 · 크면 사용자에게 알림(지금 화면에도 해당) |
|
||||
| 1 | 시제품 — D03 에 「GL 바탕」 시험 스위치 · 겹 여섯(위성 조각 · 등고선 + 수치 · 세류 · 건물 · 보호구역 · 급경사 그림) + 위 캔버스 그대로 · TM↔경위도 TS 식 + pyproj 거울 시험 | 582 와 같은 방식(ORCA eval · 큰 D · 줌아웃 30 화면 · 끌기 40 화면): 화면 간격 p50 · p90 · 16.7 ms 넘은 수 · 첫 열기 시간 · JS 힙 · CPU 4 배 느리게(316 방식) |
|
||||
| 2 | 품질 대조 | 같은 자리 · 줌 셋 스크린샷 나란히(선 굵기 · 글 · 반투명) · 그은 선 꺾임점 화면 자리 차(px) · 밝음 · 어두움 |
|
||||
| 3 | 판단 뒤 겹 20 전부 · 마우스 규칙 묶기 · B04 · B05 로 넓힘 | 겹 20 켬 큰 D 에서 끊김 0~2/30 · p90 < 16.7 ms |
|
||||
|
||||
## 7. 사용자 물음
|
||||
|
||||
1. 바탕 지도를 「그래픽 카드 그리기(MapLibre)」로 바꾸는 시제품을 D03 에서 먼저 해 볼지 — 선 · 글 모양이 지금과 「똑같지는 않고 더 매끈한」 정도로 달라져도 되는지.
|
||||
2. 위성 사진을 「조각으로 받기」(확대하면 선명 · 대신 볼 때마다 인터넷 필요)로 바꿔도 되는지 — 인터넷 없이 쓰는 경우가 있는지.
|
||||
|
||||
## 8. 확인 못 함
|
||||
|
||||
- 20 겹 다 켠 큰 D 의 지금 프레임 시간 · 겹별 칠하기 몫(브라우저 안 씀).
|
||||
- MapLibre 로 바꾼 뒤 실제 프레임 시간(독립 벤치 수치 못 찾음 · 시제품으로 잼).
|
||||
- 4장 어긋남의 실제 화면 모습.
|
||||
- 카카오 웹 지도 그리기 방식 · 카카오 「별도 과금 금지」가 우리 유료 서비스에 걸리는지(공식 답 필요).
|
||||
- 음영 「곱하기」 합성을 MapLibre image 층에서 같게 내는지 · 숫자 글꼴 파일 고르기(라이센스).
|
||||
- deck.gl 라이센스 · 크기 · OpenLayers WebGL 벡터 층의 선 · 글 수준(문서 끝까지 못 읽음).
|
||||
- 2025 IJGI 연구 본문 수치(403 으로 못 읽음 · 요약만).
|
||||
|
||||
## 출처
|
||||
|
||||
- 구글 지도 래스터 대 벡터(「raster = 서버가 만든 그림 조각」 · 「vector = WebGL 로 브라우저에서 그림」): https://developers.google.com/maps/documentation/javascript/map-rendering-type
|
||||
- 네이버 지도 GL(`gl: true` · 벡터 · 소수 줌): https://navermaps.github.io/maps.js.en/docs/tutorial-1-GL.html
|
||||
- 카카오 앱 벡터 SDK: https://devtalk.kakao.com/t/android-ios-sdk-8-23/130645
|
||||
- 카카오맵 API FAQ(상업 이용 · 「API 활용 기능 별도 과금 금지」 · 실시간 호출만): https://devtalk.kakao.com/t/faq-api/125610
|
||||
- 카카오 영리 · 서버 저장 불가 답변: https://devtalk.kakao.com/t/api/150986
|
||||
- 카카오 지도 Web API 문서(Map 함수 목록 — 회전 없음 · Tileset · Polyline): https://apis.map.kakao.com/web/documentation/
|
||||
- 카카오 커스텀 타일셋 격자: https://devtalk.kakao.com/t/x-y/119619
|
||||
- MapLibre GL JS: https://maplibre.org/projects/gl-js/
|
||||
- MapLibre 큰 GeoJSON 안내(벡터 타일 · 서버 타일 · maxZoom · 겹 줄이기): https://maplibre.org/maplibre-gl-js/docs/guides/large-data/
|
||||
- MapLibre 소스 규격(image 네 귀퉁이 · geojson 기본 maxzoom 18 · tolerance 0.375 · buffer 128 · 벡터 타일 주소): https://maplibre.org/maplibre-style-spec/sources/
|
||||
- MapLibre 한글 PC 글꼴로 그리기(localIdeographFontFamily · CJK · 한글 음절): https://maplibre.org/maplibre-gl-js/docs/examples/use-locally-generated-ideographs/ · https://maplibre.org/maplibre-native/android/api/-map-libre%20-native%20-android/org.maplibre.android.maps/-map-libre-map-options/local-ideograph-font-family.html
|
||||
- Mapbox GL 발표(WebGL 로 브라우저에서 그림): https://blog.mapbox.com/announcing-mapbox-gl-for-the-web-16a41e07df43 · https://www.mapbox.com/blog/10-years-of-mapbox-gl
|
||||
- geojson-vt(ISC · 100 MB · 540만 점 시연): https://github.com/mapbox/geojson-vt
|
||||
- PMTiles(한 파일 · 부분 받기 · BSD-3): https://docs.protomaps.com/pmtiles/ · https://github.com/protomaps/PMTiles
|
||||
- GDAL PMTiles · MVT 드라이버(MAX_SIZE 500 KB 넘으면 정밀도 낮춤 · SIMPLIFICATION · 겹별 minzoom): https://gdal.org/en/stable/drivers/vector/pmtiles.html · https://gdal.org/en/stable/drivers/vector/mvt.html
|
||||
- Starlette FileResponse Range = 0.39.0 부터: https://starlette.dev/release-notes/
|
||||
- OpenLayers 다시 투영(proj4 · 그림 조각): https://openlayers.org/en/latest/examples/reprojection.html · 라이센스 BSD-2: https://github.com/openlayers/openlayers/blob/main/LICENSE.md · Canvas 2D 와 WebGL: https://openlayers.org/workshop/en/webgl/meteorites.html
|
||||
- 웹 지도 라이브러리 벡터 그리기 성능 비교(Balla · Gede · IJGI 14(9) 336 · 2025): https://agris.fao.org/search/fr/records/68caacf6f61e5b80b5e8f917
|
||||
- 브이월드 WMTS(Satellite z6~19 · 공공누리 1유형): https://www.vworld.kr/dev/v4dv_wmtsguide_s001.do
|
||||
@@ -0,0 +1,167 @@
|
||||
# 445-C 분석 — B05 교각점 아이콘 · 단축키 · 마우스 제어
|
||||
|
||||
조사만 · 코드 읽기 판정 · 서버 · 브라우저 안 씀.
|
||||
|
||||
---
|
||||
|
||||
## (가) B05 계획노선 — 교각점 정보 창을 작은 아이콘 뒤로
|
||||
|
||||
### 지금
|
||||
|
||||
| 무엇 | 파일:줄 | 내용 |
|
||||
| --- | --- | --- |
|
||||
| 교각점 고름 | `B05_Profile/B05_Profile_UI_RouteEdit_Pointer.ts:273-277` | 노드 누름 → `setPicked` → `syncCurveBar` → 창 바로 뜸 |
|
||||
| 손잡이 · 호 고름 | 같은 파일 `:278-282` · `:305-313` | 같은 길 — 창 바로 뜸 |
|
||||
| 빈 곳 누름 = 고름 풂 | 같은 파일 `:283-292` | 창 닫힘 |
|
||||
| 창 배선 | `B05_Profile/B05_Profile_UI_RouteEdit_CurveBar.ts:191-283`(`sync`) | 고름 있으면 늘 `label.show` · 없으면 `label.hide`(`:205`) |
|
||||
| [✕ 닫기] | `_CurveBar.ts:75` → `B05_Profile_UI_RouteEdit.ts:420-424` | 닫기 = **고름까지 풂**(`picked = -1`) |
|
||||
| 창 몸통 | `B05_Profile/B05_Profile_UI_RouteEdit_Label.ts:139-372` | 반지름 · 곡선 길이 · 고정 셋 · 곡선 삭제 · 끌어 옮김 · 지도 칸 안 가둠 |
|
||||
| 창 모양 | `B05_Profile/B05_Profile_UI_Style_RouteEdit.css:399-` | 최소 폭 12rem · 그림자 — 넓게 가림 |
|
||||
| 맴돔 밝힘 | `_Pointer.ts:383-401` | 노드 · 손잡이 위 커서 모양만 |
|
||||
|
||||
- B05 · B06 겹침 평면이 같은 편집 창 — 고치면 둘 다 바뀜.
|
||||
|
||||
### 「등고선 고정」 아이콘
|
||||
|
||||
| 무엇 | 파일:줄 | 내용 |
|
||||
| --- | --- | --- |
|
||||
| 단추 | `B05_Profile/B05_Profile_UI_RouteEdit_ContourLock.ts:63-70` | 날 `<button>` + `ui-btn ui-btn--glass b05-contourlock` · 캔버스 칸에 절대 자리 |
|
||||
| 모양 | `B05_Profile/B05_Profile_UI_Style_RouteEdit_ContourLock.css:2-28` | 24 px 둥근 유리 · 눌림 = 보라 채움 — **페이지 CSS 단추 선택자**(부품 상자 규칙 빚) |
|
||||
| 뜨는 때 | `_ContourLock.ts:110-128` | **누른 뒤**(pointerup) 고른 가닥일 때만 · 커서 오른쪽 위 12 px · 지나가기만 = 안 뜸(366-1) |
|
||||
| 숨는 때 | `_ContourLock.ts:92-107` · `:131-140` | 다음 누름 · 휠 = 바로 · 지도 떠남 = 0.7 s 뒤 · 단추 위 = 유지 |
|
||||
| 규칙(순수) | `B05_Profile/logic/B05_Profile_ContourLock.ts:26-41` | `lockButtonState` · `toggleLock` |
|
||||
| 시험 | `resources/tester/test_353_2_contour_lock.py` | 규칙을 Node 로 돌림 + 배선 글 대조 |
|
||||
|
||||
- 「근처 판정」은 등고선 쪽에 없음 — 누른 자리 판정(`hitPreparedLayer`)만. 교각점 아이콘은 **맴돎 거리 판정을 새로** 둠.
|
||||
|
||||
### 바꿀 모습(상태 규칙)
|
||||
|
||||
| 상태 | 아이콘 | 정보 창 |
|
||||
| --- | --- | --- |
|
||||
| 고름 없음 | 숨김 | 숨김 |
|
||||
| 고름 · 닫힘 · 커서가 교각점 40 px 안 또는 아이콘 위 | 보임(교각점 오른쪽 위 12 px) | 숨김 |
|
||||
| 고름 · 닫힘 · 커서 멂 | 0.7 s 뒤 숨김(등고선과 같은 틈) | 숨김 |
|
||||
| 누른 채 끄는 중 · 휠 | 숨김 · 놓은 뒤 다시 판정 | 그대로 |
|
||||
| 아이콘 누름 | 숨김 | 열림 — 멀어져도 유지 |
|
||||
| 열림 · [✕ 닫기] | 근처면 보임 · 멀면 숨김 | 닫힘 · **고름은 유지**(지금은 풂) |
|
||||
| 빈 곳 누름(고름 풂) · 재기 창 뜸 | 숨김 | 닫힘 · 다음 고름은 닫힌 채 시작 |
|
||||
| 열림 · 다른 교각점 · 호 누름 | 숨김 | 새 교각점으로 따라감(기본안 · 물음 2) |
|
||||
| 터치(맴돎 없음) | 고르면 늘 보임 | 같음 |
|
||||
|
||||
- 근처 = 화면 거리 · 노드 잡기 12 px(`_Pointer.ts:47`)의 세 배쯤 40 px · 상수 하나로 조절.
|
||||
- 교각점 화면 자리 = `_CurveBar` 의 `toScreen`(돌린 지도 반영) + 캔버스 왼쪽 위 — 창 자리 셈과 같은 값.
|
||||
|
||||
### 가장 작은 고침
|
||||
|
||||
| 할 것 | 파일 | 크기 |
|
||||
| --- | --- | --- |
|
||||
| 규칙 | 새 `B05_Profile/logic/B05_Profile_RouteEdit_CurveIcon.ts` — 근처 판정 · (고름 · 열림 · 근처 · 터치) → 아이콘 · 창 · 고름 바뀜 때 열림 이어감 | 약 30줄 |
|
||||
| 아이콘 | 새 `B05_Profile/B05_Profile_UI_RouteEdit_CurveIcon.ts` — 등고선 자물쇠 꼴로 캔버스 pointermove · leave · down · up 을 스스로 들음 · 단추 pointerdown 은 캔버스로 안 샘 | 약 70줄 |
|
||||
| 창 배선 | `_CurveBar.ts` — 아이콘을 만들고 `sync` 에서 「고름 + 열림」일 때만 `label.show` · 아니면 `label.hide` + 아이콘 자리 맞춤 · `onClose` = 창만 닫음 · `onUnselect` 칸 지움 | 약 +20줄(286 → 약 306) |
|
||||
| 편집기 | `B05_Profile_UI_RouteEdit.ts:420-424` — `onUnselect` 넘김 지움 | 줄 줄어듦(695 → 690 · 700줄 한도 안) |
|
||||
| 주석 | `_Label.ts:100` 「닫기 = 고른 꺾임점을 푼다」→ 창만 닫음 | 한 줄 |
|
||||
|
||||
- `_Pointer.ts` · `_Label.ts` 몸통은 안 고침 — 모든 고름이 이미 `syncCurveBar` 한 곳을 거침.
|
||||
|
||||
### 공용 부품으로 둘 수 있나
|
||||
|
||||
- **꼴은 공용 가능 · 동작은 따로.**
|
||||
- 꼴: `ui_template/ui_template_button.ts:84` 아이콘 단추 꼴에 `glass` 하나 더함 + `ui_template_button.css` 에 `.ui-icon-btn--glass`(유리 색 = `ui_template_elements_styles.ts:85-96` 과 같은 공통 값 · 둥근 끝 = `--radius-pills`) + 견본 `ui_template_ui_kit_parts.ts:283` 한 개 + 시험 `test_552_2_button.py` 한 줄. 교각점 아이콘 = `createIconButton({ icon: "adjustments", title: "교각점 정보", size: 24, variant: "glass" })`.
|
||||
- 동작: 등고선 = 누른 뒤 커서 옆 · 교각점 = 맴돎 거리 — 규칙이 달라 한 모듈로 안 묶음.
|
||||
- 등고선 자물쇠를 같은 꼴로 옮기는 것은 다음 일 — 고리가 들리는 그림(풀림 꼴)이 아이콘 묶음에 없음(`lock` 하나뿐).
|
||||
- 교각점 정보 창 자체(`b05-routeedit__label`)도 페이지 제작 떠 있는 판 — `ui_template_float_panel` 로 옮기기는 이번 일 밖.
|
||||
|
||||
### 시험 자리
|
||||
|
||||
- 새 `resources/tester/test_445_curve_icon.py` — 규칙 파일을 Node 로 돌림(`test_353_2_contour_lock.py` 꼴) · 위 상태표 줄마다 한 판정 + 배선 글 대조(`sync` 가 열림을 봄 · `onClose` 가 고름을 안 풂).
|
||||
- 고침 `resources/tester/helper_398_2_curve_input.cjs` · `helper_408_radius_downstream.cjs` — `STUBS` 에 아이콘 가짜(열림 = 참) 한 줄씩. 안 넣으면 `_CurveBar` 가 아이콘 DOM 을 만들다 Node 에서 깨지고 `lastShow()` 도 비어 398-2 가 깨짐.
|
||||
- 함께 돌릴 것: `test_445_curve_icon.py` · `test_398_2_curve_input.py` · `test_408_radius_downstream.py` · `test_430_route_edit_rules.py` · `test_432_mc_on_station.py` · `test_345_5b_plan_visible_area.py` · `test_353_2_contour_lock.py` · `test_552_2_button.py` · `npm run typecheck`.
|
||||
|
||||
---
|
||||
|
||||
## (나) 단축키 · 마우스 제어
|
||||
|
||||
### 지금 어디 있나
|
||||
|
||||
| 자리 | 무엇 | 파일:줄 | 사용자 바꿈 |
|
||||
| --- | --- | --- | --- |
|
||||
| 공용 Ctrl 판정 | 한글 자판 안전(`code` 로) · Z · Shift+Z · Y · S · A | `A00_Common/key_shortcut.ts:11-49` | 없음 |
|
||||
| 설정 창 | ☰ [설정] 탭 셋 — 마우스 · CAD 단축키 · 다른 곳 단축키 | `A00_Common/app_settings.ts:26-54` · `:109-165` · 여는 곳 `A00_Common/app_shell.ts:231` · `B01_Dashboard/B01_Dashboard_UI_Shell.ts:147` | — |
|
||||
| 마우스 값 | 휠 확대 방향 하나(밂 기본) · 핀치는 늘 벌림 확대 | `A00_Common/input_prefs.ts:11-64` | **휠 방향만** |
|
||||
| 휠 방향 따르는 곳 | B05 · D03 지도 · SVG 확대 · B04 3D · 돋보기 · 시트 · CAD | `A00_Common/touch_bridge.ts:37` · `b_svg_zoom_pan.ts:222` · `B04_PreProcess_UI_Camera.ts:254` · `ui_template_loupe.ts:93` · `spreadsheet_grid.ts:275` · `openwebcad/src/inputController/input-wheel.ts:26` | — |
|
||||
| 안 따르는 곳 | D02 기준지정 = 카카오 지도 자체 휠 · 끌기 | `ui_template/ui_template_kakao_map.ts:125-170` | 없음(요구 445 첫 줄 「설정과 기준지정 안 이어짐」의 까닭 후보 · 445-A 몫) |
|
||||
| 마우스 버튼 | 가운데 끌기 = 팬 · 왼쪽 = 고름 · 오른쪽 = 메뉴 — 고정 | `B05_Profile_UI_RouteEdit_Input.ts:87-105`(왼쪽 팬 칸 `leftPan` 있음 · 추천 지도만 씀 `_Recommend_Map.ts:168`) · CAD 오른쪽 = Enter `input-controller.ts:170-180` | 없음 |
|
||||
| CAD 키 | F3 · F7 · F8 · F10 · Tab · Ctrl · Space · 방향 · Delete · Esc · 글자 = 명령행 | `B07_DesignDetail/openwebcad/src/inputController/input-controller.ts:374-505` · Ctrl 명령 `input-shortcut.ts:15-31` | 없음 |
|
||||
| CAD 별칭 | 기본 = 명령 정의 · 내 별칭 = 설정 | `openwebcad/src/commands/registry.ts:52-59` · `:118-134` | **내 별칭만**(acad.pgp 꼴) |
|
||||
| CAD 명령 목록 | 154개 · 칸 = id · label · aliases(**묶음 없음**) | `openwebcad/src/commands/command-catalog.json` · 거울 시험 `resources/tester/cad/command-catalog.test.ts` | — |
|
||||
| CAD 묶음 자료 | 리본 탭 › 패널 · import 없는 순수 자료 · 150/154 덮음(빠짐 PLACETABLE · LAYER · RECOVER · TOAREA · 두 번 = EXPORT · QSAVE) | `openwebcad/src/ribbon/ribbon.config.ts:27-211` | — |
|
||||
| CAD 설정 탭 | 154줄 한 표 · 찾기 없음 · 묶음 없음 · 날 `el("input")` | `A00_Common/app_settings_cad.ts:69-120`(입력 `:77-81`) | — |
|
||||
| CAD 안 도움말 | 단축키 도움말 창 없음 — ☰ 설정 글만 | — | — |
|
||||
| 다른 곳 단축키 | **손으로 적은 글**(읽기 전용) — 코드와 따로 놂 | `ui_template/ui_template_locale_common.ts:147-186` | 없음 |
|
||||
| B05 종단 | Ctrl+Z · Y · 방향키 · 자유지정 Enter · Esc · Backspace | `B05_Profile/B05_Profile_UI_Profile_Panel_Tools.ts:338-385` · Esc `:389-405` | 없음 |
|
||||
| B05 노선 편집 | 교각점 방향키 0.1 m(Shift 1 m) · Ctrl+휠 = 돌림 · Shift+누름 = 재기 · 두 번 누름 = 노드 넣기 | `_RouteEdit_Keys.ts:115-153` · `_RouteEdit_Input.ts:58-59` · `:149` · `_Pointer.ts:239` | 없음 |
|
||||
| B06 | 방향키 = 측점 · 상세 표 키 | `B06_Section/B06_Section_UI_Cross_Panel_Base.ts:274-298` · `_Cross_Structure_Panel.ts:439-523` · `_Cross_Detail_Table.ts:377` | 없음 |
|
||||
| D03 | Ctrl+Z · Y · Esc(재기) · 그리기 Enter · Esc · Backspace · 고른 선 Delete · Esc | `D03_PlanAnalysis/D03_PlanAnalysis_UI_Page.ts:595-614` · `_UI_Draw.ts:501-512` · `_UI_Edit.ts:309-313` | 없음 |
|
||||
| 모든 화면 | Esc = 고름 풂 · Z 누른 채 = 돋보기 | `A00_Common/design/design_pick_escape.ts:33` · `ui_template/ui_template_loupe.ts:68-73` · `:156` | 없음 |
|
||||
| 저장 자리 | 등록표 `input-prefs`(pref · global) → localStorage `aislo:pref:input-prefs` → 계정 `/api/dashboard/me/ui-prefs`(표 `user_ui_prefs`) | `A00_Common/b_page_state.ts:99` · `:339` · `B01_Dashboard/B01_Dashboard_Router.py:127` · `B01_Dashboard_Repository.py:530-571` | — |
|
||||
| 시험 | 설정 읽기 · CAD 별칭 · 목록 거울 · 한글 Ctrl | `resources/tester/test_input_prefs.py` · `cad/input-prefs-cad.test.ts` · `cad/command-catalog.test.ts` · `cad/ctrl-shortcut-hangul.test.ts` | — |
|
||||
|
||||
글과 코드가 어긋난 곳:
|
||||
- 「B05 노선 편집」 줄 = Ctrl+Z · Y 뿐 — 방향키 · Ctrl+휠 돌림 · Shift 재기 · 두 번 누름이 빠짐.
|
||||
- 「D03」 줄 — 고른 선 Delete · Esc 가 빠짐.
|
||||
- D03 Ctrl+Z 는 공용 판정을 안 쓰고 `event.key` 를 봄(`D03_PlanAnalysis_UI_Page.ts:599-604`) — 한글 자판에서 「ㅋ」로 와 안 먹을 수 있음(`key_shortcut.ts:3` 주석 근거 · 실측 안 함).
|
||||
|
||||
### CAD 단축키 묶음 + 찾기 화면안
|
||||
|
||||
- 자리 = ☰ [설정] › 「CAD 단축키」 탭(`app_settings_cad.ts` `buildCadAliasTab`).
|
||||
- 맨 위 찾기 칸 하나 — 명령 이름 · 한글 이름 · 기본 별칭 · 내 별칭 어디든 맞으면 보임 · 띄어 나눈 낱말 모두 · 대소문자 무시(`ui_template_logic_find.ts` 낱말 규칙과 같은 꼴) · 찾는 동안 맞는 묶음만 펼침 · 0건 = 빈 안내.
|
||||
- 묶음 = 리본과 같은 이름(사용자가 CAD 에서 보는 그대로):
|
||||
홈 › 그리기 · 수정 · 레이어 · 특성 · 그룹 · 유틸리티 · 클립보드 / 삽입 › 가져오기 · 블록 · 참조 / 주석 › 문자 · 치수 · 지시선 · 표 · 표식 / 뷰 › 탐색 / 출력 › 내보내기 / 기타(리본에 없는 넷).
|
||||
- 묶음 맨 위에 「키 · 마우스」 하나 — 지금 ③ 탭의 CAD 줄(F3 · F7 · Ctrl+1 …)을 같은 탭으로 옮김.
|
||||
- 부품 = 찾기 칸 `createInputField` · 묶음 = 접이 구역(`ui_template_collapsible` 구역 머리) + 명령 수 배지(`ui_template_badge`) · 묶음 안 = 지금 표(`createTable` data) 그대로 · 빈 안내 `ui_template_empty`. 날 `el("input")`(`:77`)도 이때 부품으로 바꿈.
|
||||
- 묶음 셈은 화면 없는 작은 파일 하나(카탈로그 JSON + `RIBBON_TABS` 만 읽음) — 시험 = `command-catalog.test.ts` 에 「154개가 꼭 한 묶음 · 기타 넷」 한 줄(이미 `RIBBON_TABS` 를 읽음).
|
||||
- ③ 「다른 곳 단축키」 탭에도 같은 찾기 칸.
|
||||
|
||||
### 사용자 바꾸기 설계안
|
||||
|
||||
**갈래 1 — 한 등록부 + 사용자 덮어쓰기(권함 · VS Code 축소판)**
|
||||
- 등록부 = `A00_Common` 에 동작 한 줄씩: 동작 이름(예 D03 고른 선 지움) · 자리(모든 화면 · B05 종단 · B05 노선 편집 · B06 · D03 · CAD · B08 · B09 표 · M02) · 기본 키 · 바꿀 수 있음 여부.
|
||||
- 판정 = 키 처리 자리마다 「이 키가 그 동작인가」 한 줄을 등록부 부름으로 바꿈 — 사용자 값 있으면 그것, 없으면 기본. 한글 자판 안전 판정(`keyLetter`) 재사용.
|
||||
- 기본값 = 지금 동작 그대로 — 아무것도 안 바꾸면 화면이 그대로.
|
||||
- 덮어쓰기 저장 = 지금 `input-prefs` 한 벌에 「바꾼 키」 칸 하나 더함(기본과 다른 것만) — 계정 pref 라 다른 PC 에서도 따라감 · 새 저장 자리 안 만듦.
|
||||
- 키 넣기 = 칸을 누르고 키를 누르면 그 조합이 들어감(「키 기록 칸」 — 부품 상자 입력에 새 꼴로 더함).
|
||||
- 겹침 검사 = 같은 자리 안 · 「모든 화면」과 같은 키면 저장 막음(지금 CAD 별칭 검사 꼴) · CAD 는 글자 하나 단독 금지(명령행 몫) · 브라우저 몫 금지(F5 · F11 · F12 · Ctrl+W · T · N).
|
||||
- 되돌리기 = 줄마다 [기본값] · 탭 [모두 기본값] · [저장] 전엔 창 안 사본만(지금 규칙 그대로).
|
||||
- ③ 탭 = 등록부에서 그린 표 → 손글씨(locale) 지움 → 도움말 · 실제 동작 어긋남이 없어짐.
|
||||
- 마우스 = 휠 방향(있음) + 「화면 옮기기 단추」 고르기 하나(가운데 · Space+왼쪽) — 바탕 칸 `leftPan` 이미 있음 · 왼쪽 고름 · 오른쪽 메뉴는 고정.
|
||||
- 시트 안 엑셀 키 · 입력 칸 안 키는 범위 밖.
|
||||
|
||||
**갈래 2 — 가장 작은: 묶음 · 찾기만**
|
||||
- CAD 묶음 + 찾기 · ③ 탭 찾기만 · 바꾸기는 지금 그대로(CAD 내 별칭 · 휠 방향).
|
||||
- 작음 · 요구 「마음대로 바꾸기」는 반쪽.
|
||||
|
||||
**권함 차례(갈래 1)**
|
||||
1. CAD 묶음 + 찾기(갈래 2 몫 · 바로 쓸모)
|
||||
2. 등록부를 세우고 ③ 탭을 그 표로 갈음(읽기 전용 · 어긋남 먼저 없앰) · D03 Ctrl 판정도 공용으로
|
||||
3. 덮어쓰기 · 키 기록 칸 · 겹침 · 되돌리기
|
||||
4. 화면 옮기기 단추 고르기 · D02 카카오 지도 휠 방향(445-A 와 함께)
|
||||
|
||||
**다른 프로그램 사례**(일반 지식 · 링크 확인 안 함)
|
||||
- 오토캐드 — 별칭은 acad.pgp 글 파일(ALIASEDIT) · Ctrl · F 키는 CUI 편집기 「키보드 바로 가기」 나무(묶음 · 찾기 · 겹치면 경고).
|
||||
- VS Code — 「Keyboard Shortcuts」 표: 찾기 칸 · 키를 눌러 찾기(Record Keys) · 출처(기본 · 사용자) · 줄마다 되돌림 · 같은 키 보기 · 저장은 바꾼 것만 keybindings.json.
|
||||
- 블렌더 — 환경설정 › 키맵: 편집기별 접이 나무 · 이름 · 키 찾기 전환 · 줄마다 되돌림.
|
||||
|
||||
---
|
||||
|
||||
## 사용자 결정 물음
|
||||
|
||||
1. [닫기] 를 누르면 — 정보 창만 닫고 교각점 고름은 유지(기본안 · 요구 글 해석) · 지금처럼 고름까지 풂.
|
||||
2. 정보 창을 연 채 다른 교각점을 누르면 — 창이 새 교각점으로 따라감(기본안) · 아이콘 상태로 돌아감.
|
||||
3. 단축키 — 이번엔 CAD 묶음 · 찾기 + ③ 탭을 실제 동작 표로(차례 1 · 2)까지만 · 키 바꾸기(차례 3)와 화면 옮기기 단추 고르기(차례 4)까지 한 번에.
|
||||
|
||||
## 확인 못 함
|
||||
|
||||
- 아이콘이 교각점 번호 · 곡선 이름표와 겹치는지 — 화면 실측 안 함.
|
||||
- 근처 40 px · 숨김 0.7 s 가 손에 맞는지 — 실측 안 함(상수로 조절).
|
||||
- D03 Ctrl+Z 가 한글 자판에서 실제로 안 먹는지 — 코드 주석 근거만.
|
||||
- 카카오 지도(D02) 휠을 막고 설정 방향으로 직접 확대할 수 있는지 — SDK 문서 안 봄.
|
||||
@@ -0,0 +1,38 @@
|
||||
# 요구서 445 — 예정노선 고르기 · 연도 · 지도 성능 · B05 교각점 아이콘 · 단축키
|
||||
|
||||
원문 = `사용자요구_1025.md` 요구 445 · 근거 분석 = `_분석_445-A_예정노선_선택_연도.md` · `_분석_445-B_지도성능_타일.md` · `_분석_445-C_교각점아이콘_단축키.md`.
|
||||
|
||||
## 1. 요구 · 지금 · 고칠 것
|
||||
|
||||
| # | 요구 | 지금 (조사) | 고칠 것 |
|
||||
| --- | --- | --- | --- |
|
||||
| A1 | 마우스 제어(줌 · 팬)가 설정과 기준지정 지도에 안 이어짐 | 기준지정 지도 = 카카오 지도 제 동작(가운데 끌기 옮김 없음 · 「당김」 무시) | 공용 카카오 부품 한 곳에서 설정을 따름(B08 이정표 지도도 같이) |
|
||||
| A2 | 시점 · 종점 구분 없앰 · 지점마다 자동 색 | 시점 목록 · 종점 목록 따로(579) | 「지점 목록」 하나 · 옛 시점 · 종점은 읽을 때 이어 붙임 · 여섯 색 차례 돌림 |
|
||||
| A3 | 기준 지점을 노선분석에서 잘 보이게 | 작은 초록 · 빨강 점 · 이름 없음 | 핀 + 「지점 N」 · 기준지정과 같은 색 · 늘 맨 위 |
|
||||
| A4 | 개별 선 · 구역 선 · 연도 선 고르기 자유도 · 고른 뒤 속성 | 선 하나 고르기 · 왼쪽 판 연도 | 구간을 낱으로 고르고 「구간 → 선 → 같은 해」로 넓힘 · 지도 위 속성 판에서 연도 등 고침 |
|
||||
| A5 | 오토캐드식 끌어 고르기 | 없음 | 빈 곳 끌기 · 오른쪽으로 = 창 안에 다 든 구간만 · 왼쪽으로 = 걸친 구간까지 |
|
||||
| A6 | 연도 구분 마커 끌기로 연도 나눔 | 왼쪽 판 「긋는 해」 · [연도 구분] | 도구줄 마커를 선 위로 끌어 놓으면 그 자리부터 나뉨 · 마커 끌기 = 경계 옮김 · 지우면 앞 구간과 합침 · 왼쪽 「긋는 해」 · [연도 구분] 걷음 |
|
||||
| B | 노선분석 지도 카카오맵처럼 빠르게 | 화면 옮길 때마다 겹 20 개를 처음부터 칠함 · 큰 프로젝트 굵은 계곡선 칠하기 36 ms(한 화면 한도 16.7 ms) | 바탕 지도만 MapLibre(WebGL · BSD · 설치만 됨)로 · 긋기 · 재기 · 고치기는 지금 화면 그대로 · 자료는 지금 받는 것 그대로 · 큰 등고선(169만 꼭짓점) 1.3 초 준비 실측 |
|
||||
| B0 | (곁 발견) | 위성 · 등고선 쪽과 그은 선 · 급경사 그림 쪽 맞춤이 셈으로 가장자리 최대 64 m(큰 프로젝트 95 m) 어긋날 수 있음(화면 확인 못 함) | 시제품 전에 화면에서 어긋남 확인 · 있으면 먼저 고침 |
|
||||
| C1 | B05 교각점 모달이 넓게 가림 → 근처 아이콘 | 교각점 누르면 정보 창 바로 · [✕] 는 고름까지 풂 | 고른 채 마우스 근처 = 작은 아이콘(등고선 고정 아이콘과 비슷 · 부품 상자 아이콘 단추에 「유리」 꼴) · 멀면 숨김 · 아이콘 누름 = 정보 창(멀어져도 유지) · [닫기] = 닫힘 · 다시 근처 규칙 |
|
||||
| C2 | CAD 단축키 묶음 · 찾기 | ☰ [설정] 탭 셋 · CAD 명령 154 개 한 표 · 찾기 없음 | 리본 이름(홈 › 그리기 · 수정 …) 접이 묶음 + 맨 위 찾기 칸(리본 자료가 150/154 덮음) |
|
||||
| C3 | 단축키 · 마우스 제어 사용자 바꾸기 | 휠 방향 · CAD 별칭만 · 「다른 곳 단축키」 탭은 손글이라 실제와 어긋남(B05 방향키 · D03 Delete 빠짐) | 동작을 한 등록부에 · 사용자가 바꾼 키만 계정 설정에 · 같은 자리 겹치면 저장 막음 · 줄마다 [기본값] · 차례 ① CAD 묶음 · 찾기 ② 실제 동작 표 ③ 키 바꾸기 ④ 화면 옮기기 단추 고르기 |
|
||||
|
||||
## 2. 사용자 결정
|
||||
|
||||
1. (A4) 「개별 선」 = 그은 선 하나 맞는지(권함 = 예 · 구간 = 마커로 나뉜 조각).
|
||||
2. (A6) 마커 뒤 구간의 연도 — 다음 해(권함 · 끌어 나누는 뜻에 맞음 · 요구 441 「같은 해」를 바꿈) · 같은 해.
|
||||
3. (A2) 지점이 하나로 합쳐진 뒤 측점 No.0 — 지금처럼 자동(반대쪽 끝) + 「방향 바꾸기」(권함) · 긋기 시작한 지점.
|
||||
4. (B) 선 · 글 모양이 지금보다 매끈해지는 정도로 달라져도 되는지(권함 = 예 · 굵기 · 색은 같게).
|
||||
5. (B) 위성 사진을 볼 때마다 인터넷으로 받아도 되는지 — 인터넷 없이 쓰는 경우가 있는지.
|
||||
6. (C1) [닫기] 가 교각점 고름도 풀지 — 고름 유지(권함) · 같이 풂.
|
||||
7. (C1) 정보 창을 연 채 다른 교각점을 누르면 창이 따라감(권함) · 닫힘.
|
||||
8. (C3) 단축키 일 한 번에 — ①~③(권함) · ①~④ · ① 만.
|
||||
|
||||
## 3. 배정안 (승인 뒤)
|
||||
|
||||
- 585(A1~A6) = 한 창 Opus high(D02 · D03 · 공용 카카오 부품 · 속성 판 새 파일).
|
||||
- 586(B0 → B 시제품) = 한 창 Opus high(먼저 어긋남 화면 확인 · 겹 여섯으로 MapLibre 시제품 · 582 와 같은 잣대로 잼).
|
||||
- 587(C1) = 한 창 Sonnet high(B05 `_CurveBar.ts` + 새 파일 둘 · 부품 상자 「유리」 꼴).
|
||||
- 588(C2 · C3) = 한 창 Opus high(차례 ① → ② → ③).
|
||||
- 585 · 586 은 D03 지도 파일이 겹침 — 586 은 바탕(지도) · 585 는 위(고르기 · 속성 판)로 몫을 나누고 send 로 이음.
|
||||
Reference in New Issue
Block a user