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>
160 lines
3.3 KiB
CSS
160 lines
3.3 KiB
CSS
/* D03 예정노선 2단계 노선분석(PLAN 530-3 · 563-1) — 평면이 본문을 채움 · 위에 도구줄 · 좌측 지형 · 그리기 · 구역 · 연도. */
|
|
|
|
.d03-plan-layout .ui-workflow-layout__main {
|
|
height: calc(100dvh - var(--app-header-h));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.d03-plan {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.d03-plan__map {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: #1f2937;
|
|
}
|
|
|
|
.d03-plan__map canvas {
|
|
display: block;
|
|
touch-action: none;
|
|
}
|
|
|
|
/* 582 바탕 캔버스 — 위 캔버스 밑에 겹침 · 누름은 위가 받음 */
|
|
.d03-plan__map .d03-plan__base {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 586-1 GL 바탕 시험 — 바탕 캔버스 밑 MapLibre · 누름은 위 캔버스가 받음 */
|
|
.d03-plan__map .d03-plan__gl {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.d03-plan__map canvas:not(.d03-plan__base) {
|
|
position: relative;
|
|
}
|
|
|
|
/* 571-1 — 왼쪽은 겹 단추줄(폭 = JS `--d03-layers-w`) 오른쪽까지 · 모자라면 도구줄이 가로 밀림 · 오른쪽 붙임 그대로 */
|
|
.d03-plan__tools {
|
|
position: absolute;
|
|
top: var(--spacing-8);
|
|
right: var(--spacing-8);
|
|
left: calc(2 * var(--spacing-8) + var(--d03-layers-w, 222px));
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/* 569-2 · 581-1 바탕 겹 단추 — 왼쪽 위 · 지도 반 넘으면 가로 밀림 · 범례 — 왼쪽 아래(켠 겹마다 한 줄) */
|
|
.d03-plan__layers {
|
|
position: absolute;
|
|
top: var(--spacing-8);
|
|
left: var(--spacing-8);
|
|
max-width: calc(55% - var(--spacing-8));
|
|
}
|
|
|
|
.d03-plan__legend {
|
|
position: absolute;
|
|
bottom: var(--spacing-8);
|
|
left: var(--spacing-8);
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-surface);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
max-width: calc(100% - 2 * var(--spacing-8));
|
|
}
|
|
|
|
.d03-plan__legend[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.d03-plan__hint {
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.d03-plan__row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-8);
|
|
align-items: flex-end;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.d03-plan__row > .ui-field {
|
|
flex: 1 1 6rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.d03-plan__draw {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.d03-plan__pieces {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.d03-plan__piece-head {
|
|
margin: 6px 0 0;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.d03-plan__piece {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.d03-plan__piece > .ui-text {
|
|
margin: 0;
|
|
}
|
|
|
|
.d03-plan__piece > .ui-field {
|
|
flex: 0 0 6.5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 지형 받기 범위 미리보기 — 카카오 지도 */
|
|
.d03-plan__extent > .ui-text {
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
/* 3D 큰 모달 — 3D 화면이 모달 몸을 꽉 채움 · 몸 스크롤 없음 */
|
|
.ui-modal--wide > .ui-modal__body.d03-plan__3d-body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.d03-plan__3d-body > .b05-route__viewport {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.d03-plan__3d-top {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* 580-3 고른 선 · 조각 줄 밝힘 */
|
|
.d03-plan__piece.is-selected {
|
|
background: var(--color-accent-soft);
|
|
border-radius: var(--radius-md);
|
|
}
|