htlee
3f2052a46e
- @fontsource-variable Inter, Noto Sans KR, Fira Code 자체 호스팅 - 전체 font-family 통일 (CSS, deck.gl, 인라인 스타일) - 이란 시설물 색상 사막 대비 고채도 팔레트로 교체 - 이란 라벨 fontWeight 600→700, alpha 200→255 - 접힘 패널 상하 패딩 균일화
157 lines
6.5 KiB
TypeScript
157 lines
6.5 KiB
TypeScript
import { IconLayer, TextLayer } from '@deck.gl/layers';
|
|
import type { Layer, PickingInfo } from '@deck.gl/core';
|
|
import { svgToDataUri } from '../../utils/svgToDataUri';
|
|
import { iranOilFacilities } from '../../data/oilFacilities';
|
|
import type { OilFacility, OilFacilityType } from '../../types';
|
|
import { FONT_MONO } from '../../styles/fonts';
|
|
|
|
export { type OilFacility };
|
|
|
|
export const IRAN_OIL_COUNT = iranOilFacilities.length;
|
|
|
|
const TYPE_COLORS: Record<OilFacilityType, string> = {
|
|
refinery: '#fb7185', // rose-400 (was amber — desert에 묻힘)
|
|
oilfield: '#34d399', // emerald-400
|
|
gasfield: '#818cf8', // indigo-400
|
|
terminal: '#c084fc', // purple-400
|
|
petrochemical: '#f472b6', // pink-400
|
|
desalination: '#22d3ee', // cyan-400
|
|
};
|
|
|
|
function refinerySvg(color: string, size: number): string {
|
|
return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" stroke="${color}" stroke-width="1.2"/>
|
|
<rect x="5" y="10" width="14" height="8" rx="1" fill="${color}" opacity="0.7"/>
|
|
<rect x="7" y="6" width="2" height="5" fill="${color}" opacity="0.6"/>
|
|
<rect x="11" y="4" width="2" height="7" fill="${color}" opacity="0.6"/>
|
|
<rect x="15" y="7" width="2" height="4" fill="${color}" opacity="0.6"/>
|
|
</svg>`;
|
|
}
|
|
|
|
function oilfieldSvg(color: string, size: number): string {
|
|
return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" stroke="${color}" stroke-width="1.2"/>
|
|
<line x1="6" y1="18" x2="18" y2="18" stroke="${color}" stroke-width="1.5"/>
|
|
<line x1="12" y1="8" x2="8" y2="18" stroke="${color}" stroke-width="1.5"/>
|
|
<line x1="12" y1="8" x2="16" y2="18" stroke="${color}" stroke-width="1.5"/>
|
|
<line x1="5" y1="10" x2="17" y2="9" stroke="${color}" stroke-width="2"/>
|
|
<circle cx="12" cy="8" r="1.5" fill="${color}"/>
|
|
</svg>`;
|
|
}
|
|
|
|
function gasfieldSvg(color: string, size: number): string {
|
|
return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" stroke="${color}" stroke-width="1.2"/>
|
|
<ellipse cx="12" cy="14" rx="5" ry="4" fill="${color}" opacity="0.6"/>
|
|
<line x1="12" y1="10" x2="12" y2="5" stroke="${color}" stroke-width="1.5"/>
|
|
<path d="M9 7 Q12 4 15 7" fill="none" stroke="${color}" stroke-width="1"/>
|
|
<path d="M10 5.5 Q12 3 14 5.5" fill="none" stroke="${color}" stroke-width="0.8" opacity="0.7"/>
|
|
</svg>`;
|
|
}
|
|
|
|
function terminalSvg(color: string, size: number): string {
|
|
return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" stroke="${color}" stroke-width="1.2"/>
|
|
<line x1="12" y1="5" x2="12" y2="19" stroke="${color}" stroke-width="1.5"/>
|
|
<path d="M8 9 Q12 6 16 9 Q16 14 12 16 Q8 14 8 9Z" fill="${color}" opacity="0.5"/>
|
|
<path d="M6 16 Q12 20 18 16" fill="none" stroke="${color}" stroke-width="1.2"/>
|
|
<line x1="8" y1="12" x2="16" y2="12" stroke="${color}" stroke-width="1"/>
|
|
</svg>`;
|
|
}
|
|
|
|
function petrochemSvg(color: string, size: number): string {
|
|
return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" stroke="${color}" stroke-width="1.2"/>
|
|
<rect x="10" y="5" width="4" height="9" rx="1" fill="${color}" opacity="0.6"/>
|
|
<ellipse cx="12" cy="15" rx="4" ry="2.5" fill="${color}" opacity="0.7"/>
|
|
<line x1="7" y1="10" x2="10" y2="10" stroke="${color}" stroke-width="1"/>
|
|
<line x1="14" y1="10" x2="17" y2="10" stroke="${color}" stroke-width="1"/>
|
|
<path d="M7 10 Q6 13 8 15" fill="none" stroke="${color}" stroke-width="0.8"/>
|
|
</svg>`;
|
|
}
|
|
|
|
function desalinationSvg(color: string, size: number): string {
|
|
return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" stroke="${color}" stroke-width="1.2"/>
|
|
<path d="M12 5 Q16 10 16 14 Q16 18 12 18 Q8 18 8 14 Q8 10 12 5Z" fill="${color}" opacity="0.7"/>
|
|
<path d="M10 14 Q12 16 14 14" fill="none" stroke="#fff" stroke-width="0.8" opacity="0.6"/>
|
|
</svg>`;
|
|
}
|
|
|
|
type SvgFn = (color: string, size: number) => string;
|
|
|
|
const TYPE_SVG_FN: Record<OilFacilityType, SvgFn> = {
|
|
refinery: refinerySvg,
|
|
oilfield: oilfieldSvg,
|
|
gasfield: gasfieldSvg,
|
|
terminal: terminalSvg,
|
|
petrochemical: petrochemSvg,
|
|
desalination: desalinationSvg,
|
|
};
|
|
|
|
const iconCache = new Map<string, string>();
|
|
|
|
function getIconUrl(type: OilFacilityType): string {
|
|
if (!iconCache.has(type)) {
|
|
const color = TYPE_COLORS[type];
|
|
iconCache.set(type, svgToDataUri(TYPE_SVG_FN[type](color, 64)));
|
|
}
|
|
return iconCache.get(type)!;
|
|
}
|
|
|
|
function hexToRgba(hex: string, alpha = 255): [number, number, number, number] {
|
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
return [r, g, b, alpha];
|
|
}
|
|
|
|
export interface IranOilLayerConfig {
|
|
visible: boolean;
|
|
sc: number;
|
|
fs?: number;
|
|
onPick: (facility: OilFacility) => void;
|
|
}
|
|
|
|
export function createIranOilLayers(config: IranOilLayerConfig): Layer[] {
|
|
const { visible, sc, onPick } = config;
|
|
const fs = config.fs ?? 1;
|
|
if (!visible) return [];
|
|
|
|
const iconLayer = new IconLayer<OilFacility>({
|
|
id: 'iran-oil-icon',
|
|
data: iranOilFacilities,
|
|
getPosition: (d) => [d.lng, d.lat],
|
|
getIcon: (d) => ({ url: getIconUrl(d.type), width: 64, height: 64, anchorX: 32, anchorY: 32 }),
|
|
getSize: 18 * sc,
|
|
updateTriggers: { getSize: [sc] },
|
|
pickable: true,
|
|
onClick: (info: PickingInfo<OilFacility>) => {
|
|
if (info.object) onPick(info.object);
|
|
return true;
|
|
},
|
|
});
|
|
|
|
const labelLayer = new TextLayer<OilFacility>({
|
|
id: 'iran-oil-label',
|
|
data: iranOilFacilities,
|
|
getPosition: (d) => [d.lng, d.lat],
|
|
getText: (d) => d.nameKo.length > 10 ? d.nameKo.slice(0, 10) + '..' : d.nameKo,
|
|
getSize: 12 * sc * fs,
|
|
updateTriggers: { getSize: [sc] },
|
|
getColor: (d) => hexToRgba(TYPE_COLORS[d.type]),
|
|
getTextAnchor: 'middle',
|
|
getAlignmentBaseline: 'top',
|
|
getPixelOffset: [0, 10],
|
|
fontFamily: FONT_MONO,
|
|
fontWeight: 700,
|
|
fontSettings: { sdf: true },
|
|
outlineWidth: 3,
|
|
outlineColor: [0, 0, 0, 255],
|
|
billboard: false,
|
|
characterSet: 'auto',
|
|
});
|
|
|
|
return [iconLayer, labelLayer];
|
|
}
|