htlee
f0c991c9ec
- deck.gl 9.2 설치 + DeckGLOverlay(MapboxOverlay interleaved) 통합 - 정적 마커 11종 → useStaticDeckLayers (IconLayer/TextLayer, SVG DataURI) - 분석 오버레이 → useAnalysisDeckLayers (ScatterplotLayer/TextLayer) - 불법어선/어구/수역 라벨 → deck.gl ScatterplotLayer/TextLayer - 줌 레벨별 스케일 (0~6: 0.6x, 7~9: 1.0x, 10~12: 1.4x, 13+: 1.8x) - NK 미사일 궤적 PathLayer 추가 + 정적 마커 클릭 Popup - 해저케이블 날짜변경선(180도) 좌표 보정 - 기존 DOM Marker 제거로 렌더링 성능 대폭 개선 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import { Popup } from 'react-map-gl/maplibre';
|
|
import type { Port } from '../../data/ports';
|
|
|
|
const COUNTRY_STYLE: Record<string, { color: string; flag: string; label: string }> = {
|
|
KR: { color: '#3b82f6', flag: '🇰🇷', label: '한국' },
|
|
CN: { color: '#ef4444', flag: '🇨🇳', label: '중국' },
|
|
JP: { color: '#f472b6', flag: '🇯🇵', label: '일본' },
|
|
KP: { color: '#f97316', flag: '🇰🇵', label: '북한' },
|
|
TW: { color: '#10b981', flag: '🇹🇼', label: '대만' },
|
|
};
|
|
|
|
function getStyle(p: Port) {
|
|
return COUNTRY_STYLE[p.country] || COUNTRY_STYLE.KR;
|
|
}
|
|
|
|
interface Props {
|
|
selected: Port | null;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function PortLayer({ selected, onClose }: Props) {
|
|
if (!selected) return null;
|
|
const s = getStyle(selected);
|
|
return (
|
|
<Popup longitude={selected.lng} latitude={selected.lat}
|
|
onClose={onClose} closeOnClick={false}
|
|
anchor="bottom" maxWidth="280px" className="gl-popup">
|
|
<div className="popup-body-sm" style={{ minWidth: 200 }}>
|
|
<div className="popup-header" style={{ background: s.color, color: '#fff', gap: 6, padding: '6px 10px' }}>
|
|
<span style={{ fontSize: 16 }}>{s.flag}</span>
|
|
<strong style={{ fontSize: 13 }}>⚓ {selected.nameKo}</strong>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
|
|
<span style={{
|
|
background: s.color, color: '#fff',
|
|
padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
|
|
}}>
|
|
{selected.type === 'major' ? '주요항만' : '항만'}
|
|
</span>
|
|
<span style={{
|
|
background: '#333', color: '#ccc',
|
|
padding: '2px 8px', borderRadius: 3, fontSize: 10,
|
|
}}>
|
|
{s.label}
|
|
</span>
|
|
</div>
|
|
<div className="popup-grid" style={{ gap: '2px 12px' }}>
|
|
<div><span className="popup-label">항구 : </span><strong>{selected.nameKo}</strong></div>
|
|
<div><span className="popup-label">영문 : </span>{selected.name}</div>
|
|
</div>
|
|
<div style={{ marginTop: 6, fontSize: 10, color: '#999' }}>
|
|
{selected.lat.toFixed(4)}°N, {selected.lng.toFixed(4)}°E
|
|
</div>
|
|
<div style={{ marginTop: 4, fontSize: 10, textAlign: 'right' }}>
|
|
<a href={`https://www.marinetraffic.com/en/ais/details/ports/${selected.id}`}
|
|
target="_blank" rel="noopener noreferrer" style={{ color: '#60a5fa' }}>
|
|
MarineTraffic →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Popup>
|
|
);
|
|
}
|