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>
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { Source, Layer } from 'react-map-gl/maplibre';
|
|
import fishingZonesData from '../../data/zones/fishing-zones-wgs84.json';
|
|
|
|
const ZONE_FILL: Record<string, string> = {
|
|
ZONE_I: 'rgba(59, 130, 246, 0.15)',
|
|
ZONE_II: 'rgba(16, 185, 129, 0.15)',
|
|
ZONE_III: 'rgba(245, 158, 11, 0.15)',
|
|
ZONE_IV: 'rgba(239, 68, 68, 0.15)',
|
|
};
|
|
|
|
const ZONE_LINE: Record<string, string> = {
|
|
ZONE_I: 'rgba(59, 130, 246, 0.6)',
|
|
ZONE_II: 'rgba(16, 185, 129, 0.6)',
|
|
ZONE_III: 'rgba(245, 158, 11, 0.6)',
|
|
ZONE_IV: 'rgba(239, 68, 68, 0.6)',
|
|
};
|
|
|
|
|
|
const fillColor = [
|
|
'match', ['get', 'id'],
|
|
'ZONE_I', ZONE_FILL.ZONE_I,
|
|
'ZONE_II', ZONE_FILL.ZONE_II,
|
|
'ZONE_III', ZONE_FILL.ZONE_III,
|
|
'ZONE_IV', ZONE_FILL.ZONE_IV,
|
|
'rgba(0,0,0,0)',
|
|
] as maplibregl.ExpressionSpecification;
|
|
|
|
const lineColor = [
|
|
'match', ['get', 'id'],
|
|
'ZONE_I', ZONE_LINE.ZONE_I,
|
|
'ZONE_II', ZONE_LINE.ZONE_II,
|
|
'ZONE_III', ZONE_LINE.ZONE_III,
|
|
'ZONE_IV', ZONE_LINE.ZONE_IV,
|
|
'rgba(0,0,0,0)',
|
|
] as maplibregl.ExpressionSpecification;
|
|
|
|
export function FishingZoneLayer() {
|
|
return (
|
|
<Source id="fishing-zones" type="geojson" data={fishingZonesData as GeoJSON.FeatureCollection}>
|
|
<Layer
|
|
id="fishing-zone-fill"
|
|
type="fill"
|
|
paint={{ 'fill-color': fillColor, 'fill-opacity': 1 }}
|
|
/>
|
|
<Layer
|
|
id="fishing-zone-line"
|
|
type="line"
|
|
paint={{
|
|
'line-color': lineColor,
|
|
'line-opacity': 1,
|
|
'line-width': 1.5,
|
|
'line-dasharray': [4, 2],
|
|
}}
|
|
/>
|
|
</Source>
|
|
);
|
|
}
|