From e54a3a384e3d7446976d83078db3aa4bd53db310 Mon Sep 17 00:00:00 2001 From: htlee Date: Mon, 23 Mar 2026 08:14:32 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20UX=20=EA=B0=9C=EC=84=A0=20=E2=80=94=20?= =?UTF-8?q?=EC=A4=8C=20=EC=8A=A4=EC=BC=80=EC=9D=BC=20=EC=97=B0=EB=8F=99=20?= =?UTF-8?q?+=20=ED=98=B8=EB=B2=84=20=EC=BB=A4=EC=84=9C=20+=20=EC=84=A0?= =?UTF-8?q?=EB=8B=A8=20=EC=86=8C=EC=86=8D=20=EC=84=A0=EB=B0=95=20=EA=B0=95?= =?UTF-8?q?=EC=A1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - deck.gl 레이어 호버 시 pointer 커서 표시 (DeckGLOverlay) - 선박 아이콘/라벨 줌 레벨 연동 (z4=0.8x ~ z14=4.2x) - deck.gl 정적 레이어 줌 스케일 동기화 (z4=0.8 ~ z14+=4.2) - MapLibre ShipLayer interpolate 표현식 적용 --- frontend/src/components/korea/KoreaMap.tsx | 18 +++++++++++++----- .../src/components/layers/DeckGLOverlay.tsx | 5 ++++- frontend/src/components/layers/ShipLayer.tsx | 12 ++++++++++-- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/korea/KoreaMap.tsx b/frontend/src/components/korea/KoreaMap.tsx index 1a3bcac..2c40b73 100644 --- a/frontend/src/components/korea/KoreaMap.tsx +++ b/frontend/src/components/korea/KoreaMap.tsx @@ -175,12 +175,20 @@ export function KoreaMap({ ships, allShips, aircraft, satellites, layers, osintF ); }, []); - // 줌 레벨별 아이콘/심볼 스케일 배율 + // 줌 레벨별 아이콘/심볼 스케일 배율 — z4=1.0x 기준, 2단계씩 상향 + // 줌 레벨별 아이콘/심볼 스케일 배율 — z4=0.8x, z6=1.0x 시작, 2단계씩 상향 const zoomScale = useMemo(() => { - if (zoomLevel <= 6) return 0.6; - if (zoomLevel <= 9) return 1.0; - if (zoomLevel <= 12) return 1.4; - return 1.8; + if (zoomLevel <= 4) return 0.8; + if (zoomLevel <= 5) return 0.9; + if (zoomLevel <= 6) return 1.0; + if (zoomLevel <= 7) return 1.2; + if (zoomLevel <= 8) return 1.5; + if (zoomLevel <= 9) return 1.8; + if (zoomLevel <= 10) return 2.2; + if (zoomLevel <= 11) return 2.5; + if (zoomLevel <= 12) return 2.8; + if (zoomLevel <= 13) return 3.5; + return 4.2; }, [zoomLevel]); // 불법어선 강조 — deck.gl ScatterplotLayer + TextLayer diff --git a/frontend/src/components/layers/DeckGLOverlay.tsx b/frontend/src/components/layers/DeckGLOverlay.tsx index 154d59c..9e787db 100644 --- a/frontend/src/components/layers/DeckGLOverlay.tsx +++ b/frontend/src/components/layers/DeckGLOverlay.tsx @@ -12,7 +12,10 @@ interface Props { */ export function DeckGLOverlay({ layers }: Props) { const overlay = useControl( - () => new MapboxOverlay({ interleaved: true }), + () => new MapboxOverlay({ + interleaved: true, + getCursor: ({ isHovering }) => isHovering ? 'pointer' : '', + }), ); overlay.setProps({ layers }); return null; diff --git a/frontend/src/components/layers/ShipLayer.tsx b/frontend/src/components/layers/ShipLayer.tsx index 664ee33..dd40192 100644 --- a/frontend/src/components/layers/ShipLayer.tsx +++ b/frontend/src/components/layers/ShipLayer.tsx @@ -559,7 +559,7 @@ export function ShipLayer({ ships, militaryOnly, koreanOnly, hoveredMmsi, focusM layout={{ 'visibility': highlightKorean ? 'visible' : 'none', 'text-field': ['get', 'name'], - 'text-size': 9, + 'text-size': ['interpolate', ['linear'], ['zoom'], 4, 8, 6, 9, 8, 11, 10, 14, 12, 16, 13, 18, 14, 20], 'text-offset': [0, 2.2], 'text-anchor': 'top', 'text-allow-overlap': false, @@ -577,7 +577,15 @@ export function ShipLayer({ ships, militaryOnly, koreanOnly, hoveredMmsi, focusM type="symbol" layout={{ 'icon-image': 'ship-triangle', - 'icon-size': ['get', 'size'], + 'icon-size': ['interpolate', ['linear'], ['zoom'], + 4, ['*', ['get', 'size'], 0.8], + 6, ['*', ['get', 'size'], 1.0], + 8, ['*', ['get', 'size'], 1.5], + 10, ['*', ['get', 'size'], 2.2], + 12, ['*', ['get', 'size'], 2.8], + 13, ['*', ['get', 'size'], 3.5], + 14, ['*', ['get', 'size'], 4.2], + ], 'icon-rotate': ['get', 'heading'], 'icon-rotation-alignment': 'map', 'icon-allow-overlap': true,