feat(map): Leaflet → MapLibre GL JS + deck.gl 전환 (Phase 6) #49

htlee · 2026-03-01T03:06:23+09:00

htlee 코멘트됨,

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

소유자

Summary

지도 엔진 전환: Leaflet 1.9 + react-leaflet → MapLibre GL JS 5.x + @vis.gl/react-maplibre + deck.gl 9.x
16개 파일 수정, Leaflet 의존성 완전 제거
z-index 충돌 해결: MapLibre WebGL 단일 canvas로 범례/좌표/타임라인이 지도 위에 정상 표시
성능 향상: 유류 입자 5,000개 CircleMarker → ScatterplotLayer 단일 GPU 렌더링 (10~100x)
Vite 호환: shimMissingExports로 @loaders.gl Node.js 참조 해결

변경 파일 (16개)

MapView.tsx — 핵심 지도 컴포넌트 전체 재작성
BacktrackReplayOverlay.tsx — deck.gl 레이어 함수 패턴
mapUtils.ts — 신규 (hexToRgba)
index.css — z-index 재설계
Weather 6개 — WeatherView/MapOverlay/OceanCurrent/Forecast/Wind/WaterTemp
ScatMap.tsx / ScatPopup.tsx — MapLibre + deck.gl
AssetMap.tsx / IncidentsView.tsx — MapLibre + deck.gl
vite.config.ts — shimMissingExports
package.json — maplibre-gl, @vis.gl/react-maplibre, @deck.gl/* 추가, leaflet 제거

Test plan

CI 빌드 통과
유류 확산 입자/오일펜스/HNS 확산 렌더링
역추적 리플레이 재생
기상 오버레이 (풍향/해류/수온/예보)
SCAT/Assets/Incidents 지도
WMS 레이어 투명도/밝기
범례/좌표/타임라인 z-index 정상

🤖 Generated with Claude Code

## Summary - **지도 엔진 전환**: Leaflet 1.9 + react-leaflet → MapLibre GL JS 5.x + @vis.gl/react-maplibre + deck.gl 9.x - **16개 파일** 수정, Leaflet 의존성 완전 제거 - **z-index 충돌 해결**: MapLibre WebGL 단일 canvas로 범례/좌표/타임라인이 지도 위에 정상 표시 - **성능 향상**: 유류 입자 5,000개 CircleMarker → ScatterplotLayer 단일 GPU 렌더링 (10~100x) - **Vite 호환**: shimMissingExports로 @loaders.gl Node.js 참조 해결 ## 변경 파일 (16개) - `MapView.tsx` — 핵심 지도 컴포넌트 전체 재작성 - `BacktrackReplayOverlay.tsx` — deck.gl 레이어 함수 패턴 - `mapUtils.ts` — 신규 (hexToRgba) - `index.css` — z-index 재설계 - Weather 6개 — WeatherView/MapOverlay/OceanCurrent/Forecast/Wind/WaterTemp - `ScatMap.tsx` / `ScatPopup.tsx` — MapLibre + deck.gl - `AssetMap.tsx` / `IncidentsView.tsx` — MapLibre + deck.gl - `vite.config.ts` — shimMissingExports - `package.json` — maplibre-gl, @vis.gl/react-maplibre, @deck.gl/* 추가, leaflet 제거 ## Test plan - [ ] CI 빌드 통과 - [ ] 유류 확산 입자/오일펜스/HNS 확산 렌더링 - [ ] 역추적 리플레이 재생 - [ ] 기상 오버레이 (풍향/해류/수온/예보) - [ ] SCAT/Assets/Incidents 지도 - [ ] WMS 레이어 투명도/밝기 - [ ] 범례/좌표/타임라인 z-index 정상 🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

fix(map): ScatMap scatDetailData import 제거 + Vite shimMissingExports 설정 195e69c86d

- scatDetailData는 scatConstants에 없는 export — import 제거, seg.id 직접 사용
- deck.gl → @loaders.gl/worker-utils가 Node.js child_process.spawn 참조하나
  브라우저에서 미사용 코드 경로이므로 shimMissingExports: true로 해결

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

htlee merged commit 199b2635e2 into develop

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

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

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

htlee 커밋

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

에서 이 이슈 언급

Merge pull request 'feat(map): Leaflet → MapLibre GL JS + deck.gl 전환 (Phase 6)' (#49) from feature/phase6-maplibre-deckgl into develop

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

No reviewers

레이블 없음

마일스톤 없음

담당자 없음

참여자 1명

알림

마감일

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

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

의존성

No dependencies set.

Reference: gc/wing-ops#49