feat(map): Phase 6 MapLibre GL JS + deck.gl 전환 + 탭 시각화 개선 #51

htlee · 2026-03-01T09:01:41+09:00

htlee 코멘트됨,

2026-03-01 09:01:41 +09:00

소유자

Summary

Phase 6: Leaflet → MapLibre GL JS 5.x + deck.gl 9.x 지도 엔진 전환
항공탐색 탭 개선: CctvView 크래시 수정, AerialView 단순화, SensorAnalysis Canvas 2D 전환, RealtimeDrone MapLibre+deck.gl 전환
확산분석 탭 개선: 시뮬레이션 데모 궤적 fallback, AI 방어선 자동 배치, 민감자원 레이어, 해류 화살표 표시

Changes

Phase 6 Core (Leaflet → MapLibre GL JS + deck.gl)

MapView, ScatMap, Weather 레이어 전체 MapLibre + deck.gl 전환
CartoDB Dark Matter 타일 베이스맵
DeckGLOverlay 공통 패턴 (useControl<MapboxOverlay>)
ScatterplotLayer, PathLayer, TextLayer 기반 시각화

항공탐색 탭

CctvView: cctvCameras → cameras API 필드 매핑 수정
AerialView: useState/useEffect 이중 라우팅 → activeSubTab 단일 switch
SensorAnalysis: SVG 300pt → Canvas 2D 5000/8000pt 고밀도 포인트 클라우드
RealtimeDrone: CSS gradient 시뮬레이션 → 실제 MapLibre 지도 + deck.gl 레이어

확산분석 탭

generateDemoTrajectory: mulberry32 seeded PRNG 기반 모델별 60입자 궤적
시뮬레이션 API 실패 시 클라이언트 데모 fallback → AI 방어선 자동 배치
MapView 민감자원 레이어: 양식장/해수욕장/보호구역 ScatterplotLayer + TextLayer
해류 화살표 11×11 그리드 TextLayer

Test plan

프론트엔드 빌드 성공 (npm run build)
ESLint 통과 (npx eslint .)
Pre-SCAT 지도 표시 및 인터랙션 확인
해양기상 오버레이 정상 표시
항공탐색 > CCTV 탭 크래시 없이 정상 표시
항공탐색 > 실시간드론 탭 MapLibre 지도 + 드론/선박 표시
항공탐색 > 센서분석 Canvas 2D 포인트 클라우드 정상 렌더링
확산예측 > 확산분석 > 확산 예측 실행 → 데모 입자 확산 + 방어선 + 민감자원 표시
타임라인 슬라이더로 시간별 입자 재생
기존 기능 (역추적, 재계산, 보고서) 정상 동작

🤖 Generated with Claude Code

## Summary - **Phase 6**: Leaflet → MapLibre GL JS 5.x + deck.gl 9.x 지도 엔진 전환 - **항공탐색 탭 개선**: CctvView 크래시 수정, AerialView 단순화, SensorAnalysis Canvas 2D 전환, RealtimeDrone MapLibre+deck.gl 전환 - **확산분석 탭 개선**: 시뮬레이션 데모 궤적 fallback, AI 방어선 자동 배치, 민감자원 레이어, 해류 화살표 표시 ## Changes ### Phase 6 Core (Leaflet → MapLibre GL JS + deck.gl) - MapView, ScatMap, Weather 레이어 전체 MapLibre + deck.gl 전환 - CartoDB Dark Matter 타일 베이스맵 - DeckGLOverlay 공통 패턴 (`useControl<MapboxOverlay>`) - ScatterplotLayer, PathLayer, TextLayer 기반 시각화 ### 항공탐색 탭 - CctvView: `cctvCameras` → `cameras` API 필드 매핑 수정 - AerialView: useState/useEffect 이중 라우팅 → activeSubTab 단일 switch - SensorAnalysis: SVG 300pt → Canvas 2D 5000/8000pt 고밀도 포인트 클라우드 - RealtimeDrone: CSS gradient 시뮬레이션 → 실제 MapLibre 지도 + deck.gl 레이어 ### 확산분석 탭 - `generateDemoTrajectory`: mulberry32 seeded PRNG 기반 모델별 60입자 궤적 - 시뮬레이션 API 실패 시 클라이언트 데모 fallback → AI 방어선 자동 배치 - MapView 민감자원 레이어: 양식장/해수욕장/보호구역 ScatterplotLayer + TextLayer - 해류 화살표 11×11 그리드 TextLayer ## Test plan - [ ] 프론트엔드 빌드 성공 (`npm run build`) - [ ] ESLint 통과 (`npx eslint .`) - [ ] Pre-SCAT 지도 표시 및 인터랙션 확인 - [ ] 해양기상 오버레이 정상 표시 - [ ] 항공탐색 > CCTV 탭 크래시 없이 정상 표시 - [ ] 항공탐색 > 실시간드론 탭 MapLibre 지도 + 드론/선박 표시 - [ ] 항공탐색 > 센서분석 Canvas 2D 포인트 클라우드 정상 렌더링 - [ ] 확산예측 > 확산분석 > 확산 예측 실행 → 데모 입자 확산 + 방어선 + 민감자원 표시 - [ ] 타임라인 슬라이더로 시간별 입자 재생 - [ ] 기존 기능 (역추적, 재계산, 보고서) 정상 동작 🤖 Generated with [Claude Code](https://claude.com/claude-code)

htlee added 1 commit 2026-03-01 09:01:41 +09:00

feat(frontend): 항공탐색 탭 개선 + 확산분석 데모 데이터 시각화 6356b0a3bd

항공탐색 탭:
- CctvView 크래시 수정 (cctvCameras → cameras 필드 매핑)
- AerialView 이중 서브메뉴 분기 → 플랫 switch 단순화
- SensorAnalysis SVG 300pt → Canvas 2D 5000/8000pt 고밀도 전환
- RealtimeDrone CSS 시뮬레이션 → MapLibre + deck.gl 실제 지도 전환

확산분석 탭:
- 시뮬레이션 백엔드 미구현 시 클라이언트 데모 궤적 fallback 생성
- AI 방어선 3개(직교차단/U형포위/연안보호) 자동 배치
- 민감자원 5개소(양식장/해수욕장/보호구역) deck.gl 레이어 표시
- 해류 화살표 11x11 그리드 TextLayer 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

htlee merged commit 60d8d1af95 into develop

2026-03-01 09:02:05 +09:00

htlee 삭제된 브랜치 feature/phase6-maplibre-deckgl

2026-03-01 09:02:05 +09:00

htlee 커밋

2026-03-01 09:02:06 +09:00

에서 이 이슈 언급

Merge pull request 'feat(map): Phase 6 MapLibre GL JS + deck.gl 전환 + 탭 시각화 개선' (#51) from feature/phase6-maplibre-deckgl into develop

"로그인하여 이 대화에 참여"

No reviewers

레이블 없음

마일스톤 없음

담당자 없음

참여자 1명

알림

마감일

기한이 올바르지 않거나 범위를 벗어났습니다. 'yyyy-mm-dd'형식을 사용해주십시오.

마감일이 설정되지 않았습니다.

의존성

No dependencies set.

Reference: gc/wing-ops#51