fix: UX 개선 — 줌 스케일 연동 + 호버 커서 + 선단 소속 선박 강조
- deck.gl 레이어 호버 시 pointer 커서 표시 (DeckGLOverlay) - 선박 아이콘/라벨 줌 레벨 연동 (z4=0.8x ~ z14=4.2x) - deck.gl 정적 레이어 줌 스케일 동기화 (z4=0.8 ~ z14+=4.2) - MapLibre ShipLayer interpolate 표현식 적용
This commit is contained in:
부모
41a780794b
커밋
e54a3a384e
@ -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
|
||||
|
||||
@ -12,7 +12,10 @@ interface Props {
|
||||
*/
|
||||
export function DeckGLOverlay({ layers }: Props) {
|
||||
const overlay = useControl<MapboxOverlay>(
|
||||
() => new MapboxOverlay({ interleaved: true }),
|
||||
() => new MapboxOverlay({
|
||||
interleaved: true,
|
||||
getCursor: ({ isHovering }) => isHovering ? 'pointer' : '',
|
||||
}),
|
||||
);
|
||||
overlay.setProps({ layers });
|
||||
return null;
|
||||
|
||||
@ -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,
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user