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>
61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import { Popup } from 'react-map-gl/maplibre';
|
|
import type { WindFarm } from '../../data/windFarms';
|
|
|
|
const COLOR = '#00bcd4';
|
|
|
|
const STATUS_COLOR: Record<string, string> = {
|
|
'운영중': '#22c55e',
|
|
'건설중': '#eab308',
|
|
'계획': '#64748b',
|
|
};
|
|
|
|
interface Props {
|
|
selected: WindFarm | null;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function WindFarmLayer({ selected, onClose }: Props) {
|
|
if (!selected) return null;
|
|
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: COLOR, color: '#000', gap: 6, padding: '6px 10px' }}>
|
|
<span style={{ fontSize: 16 }}>🌀</span>
|
|
<strong>{selected.name}</strong>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
|
|
<span style={{
|
|
background: STATUS_COLOR[selected.status] || '#666', color: '#fff',
|
|
padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
|
|
}}>
|
|
{selected.status}
|
|
</span>
|
|
<span style={{
|
|
background: COLOR, color: '#000',
|
|
padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
|
|
}}>
|
|
해상풍력
|
|
</span>
|
|
<span style={{
|
|
background: '#333', color: '#ccc',
|
|
padding: '2px 8px', borderRadius: 3, fontSize: 10,
|
|
}}>
|
|
{selected.region}
|
|
</span>
|
|
</div>
|
|
<div className="popup-grid" style={{ gap: '2px 12px' }}>
|
|
<div><span className="popup-label">용량 : </span><strong>{selected.capacityMW} MW</strong></div>
|
|
<div><span className="popup-label">터빈 : </span><strong>{selected.turbines}기</strong></div>
|
|
{selected.year && <div><span className="popup-label">준공 : </span><strong>{selected.year}년</strong></div>}
|
|
<div><span className="popup-label">지역 : </span>{selected.region}</div>
|
|
</div>
|
|
<div style={{ marginTop: 6, fontSize: 10, color: '#999' }}>
|
|
{selected.lat.toFixed(4)}°N, {selected.lng.toFixed(4)}°E
|
|
</div>
|
|
</div>
|
|
</Popup>
|
|
);
|
|
}
|