gc/wing-ops
8
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동

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

병합
htlee feature/phase6-maplibre-deckgl 에서 develop 로 2 commits 를 머지했습니다 2026-03-01 03:00:26 +09:00
대화 0 커밋 2 파일 변경됨 16 +4998 -2040
htlee 코멘트됨, 2026-03-01 02:49:42 +09:00
소유자
Copy Link

Summary

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

전환 상세

영역 Leaflet MapLibre + deck.gl
지도 코어 MapContainer + TileLayer Map + mapStyle JSON
유류 입자 CircleMarker × 5000 ScatterplotLayer (GPU)
오일펜스 Polyline + CircleMarker PathLayer + ScatterplotLayer
HNS 확산 Circle ScatterplotLayer (radiusUnits: meters)
역추적 리플레이 Polyline + Marker + divIcon PathLayer + ScatterplotLayer
기상 풍향 Marker + DivIcon (SVG) HTML Marker overlay
해류 벡터 L.Layer Canvas ScatterplotLayer
수온 히트맵 L.Layer Canvas RadialGradient HeatmapLayer (GPU)
풍장 입자 Canvas 2D + RAF ScatterplotLayer + RAF
해황예보도 ImageOverlay Source(image) + Layer(raster)
WMS 밝기 DOM CSS filter 해킹 raster-brightness-min/max 네이티브
SCAT 지도 L.map() + L.polyline() Map + PathLayer + ScatterplotLayer
자산 지도 L.map() + L.circleMarker() Map + ScatterplotLayer
사고 마커 L.divIcon() Marker + Popup

Test plan

  • npm run build (tsc -b + vite build) 성공 확인
  • ESLint 통과 확인
  • 유류 확산 입자 렌더링 + 타임라인 재생
  • 오일펜스 표시 + 드로잉
  • HNS 확산 구역 원형 표시
  • 역추적 리플레이 재생
  • 기상 오버레이 (풍향/해류/수온/예보)
  • SCAT 해안구간 ESI 색상 + 줌 연동
  • 자산 기관 마커
  • 사건사고 마커
  • 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개 파일** 수정 (4,977줄 추가 / 1,973줄 삭제), Leaflet 의존성 완전 제거 - **z-index 충돌 해결**: MapLibre WebGL 단일 canvas로 범례/좌표/타임라인이 지도 위에 정상 표시 - **성능 향상**: 유류 입자 5,000개 CircleMarker → ScatterplotLayer 단일 GPU 렌더링 (10~100x) ## 전환 상세 | 영역 | Leaflet | MapLibre + deck.gl | |------|---------|-------------------| | 지도 코어 | MapContainer + TileLayer | Map + mapStyle JSON | | 유류 입자 | CircleMarker × 5000 | ScatterplotLayer (GPU) | | 오일펜스 | Polyline + CircleMarker | PathLayer + ScatterplotLayer | | HNS 확산 | Circle | ScatterplotLayer (radiusUnits: meters) | | 역추적 리플레이 | Polyline + Marker + divIcon | PathLayer + ScatterplotLayer | | 기상 풍향 | Marker + DivIcon (SVG) | HTML Marker overlay | | 해류 벡터 | L.Layer Canvas | ScatterplotLayer | | 수온 히트맵 | L.Layer Canvas RadialGradient | HeatmapLayer (GPU) | | 풍장 입자 | Canvas 2D + RAF | ScatterplotLayer + RAF | | 해황예보도 | ImageOverlay | Source(image) + Layer(raster) | | WMS 밝기 | DOM CSS filter 해킹 | raster-brightness-min/max 네이티브 | | SCAT 지도 | L.map() + L.polyline() | Map + PathLayer + ScatterplotLayer | | 자산 지도 | L.map() + L.circleMarker() | Map + ScatterplotLayer | | 사고 마커 | L.divIcon() | Marker + Popup | ## Test plan - [ ] `npm run build` (tsc -b + vite build) 성공 확인 - [ ] ESLint 통과 확인 - [ ] 유류 확산 입자 렌더링 + 타임라인 재생 - [ ] 오일펜스 표시 + 드로잉 - [ ] HNS 확산 구역 원형 표시 - [ ] 역추적 리플레이 재생 - [ ] 기상 오버레이 (풍향/해류/수온/예보) - [ ] SCAT 해안구간 ESI 색상 + 줌 연동 - [ ] 자산 기관 마커 - [ ] 사건사고 마커 - [ ] WMS 레이어 투명도/밝기 조절 - [ ] 범례/좌표/타임라인이 지도 위에 정상 표시 (z-index 해결 확인) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
htlee added 1 commit 2026-03-01 02:49:43 +09:00 
지도 엔진을 Leaflet 1.9에서 MapLibre GL JS 5.x + deck.gl 9.x로 전환.
15개 파일 수정, Leaflet 완전 제거. WebGL 단일 canvas로 z-index 충돌 해결,
유류 입자 ScatterplotLayer GPU 렌더링으로 10~100배 성능 향상.

- MapView.tsx: MapLibre Map + DeckGLOverlay(MapboxOverlay interleaved)
- 유류 입자/오일펜스/HNS: deck.gl ScatterplotLayer/PathLayer
- 역추적 리플레이: createBacktrackLayers() 함수 패턴
- 기상 오버레이: WeatherMapOverlay/OceanCurrent/WindParticle deck.gl 전환
- 수온 히트맵: WaterTemperatureLayer deck.gl ScatterplotLayer
- 해황예보도: MapLibre image source + raster layer
- SCAT/Assets/Incidents: MapLibre Map + deck.gl 레이어
- WMS 밝기: raster-brightness-min/max 네이티브 속성

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
htlee added 1 commit 2026-03-01 02:59:31 +09:00 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
htlee merged commit 07635d6ed0 into develop 2026-03-01 03:00:26 +09:00
htlee 삭제된 브랜치 feature/phase6-maplibre-deckgl 2026-03-01 03:00:26 +09:00
"로그인하여 이 대화에 참여"
리뷰어
No reviewers
레이블
레이블 초기화
No items
레이블 없음
마일스톤
마일스톤 초기화
No items
마일스톤 없음
담당자
담당자 초기화
담당자 없음
참여자 1명
알림
마감일
기한이 올바르지 않거나 범위를 벗어났습니다. 'yyyy-mm-dd'형식을 사용해주십시오.

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

의존성

No dependencies set.

Reference: gc/wing-ops#47
No description provided.
Delete Branch "feature/phase6-maplibre-deckgl"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?