htlee
ca5560aff2
- subcable entity 생성 (타입 정의 + 데이터 로딩 hook) - MapLibre 레이어: 케이블 라인 + 호버 하이라이트 + 라벨 - 지도 표시 설정에 해저케이블 토글 추가 - 클릭 시 우측 정보 패널 (길이, 개통, 운영사, landing points) - Map3D + DashboardPage 통합 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
export type MapToggleState = {
|
|
pairLines: boolean;
|
|
pairRange: boolean;
|
|
fcLines: boolean;
|
|
zones: boolean;
|
|
fleetCircles: boolean;
|
|
predictVectors: boolean;
|
|
shipLabels: boolean;
|
|
subcables: boolean;
|
|
};
|
|
|
|
type Props = {
|
|
value: MapToggleState;
|
|
onToggle: (key: keyof MapToggleState) => void;
|
|
};
|
|
|
|
export function MapToggles({ value, onToggle }: Props) {
|
|
const items: Array<{ id: keyof MapToggleState; label: string }> = [
|
|
{ id: "pairLines", label: "쌍 연결선" },
|
|
{ id: "pairRange", label: "쌍 연결범위" },
|
|
{ id: "fcLines", label: "환적 연결선" },
|
|
{ id: "fleetCircles", label: "선단 범위" },
|
|
{ id: "zones", label: "수역 표시" },
|
|
{ id: "predictVectors", label: "예측 벡터" },
|
|
{ id: "shipLabels", label: "선박명 표시" },
|
|
{ id: "subcables", label: "해저케이블" },
|
|
];
|
|
|
|
return (
|
|
<div className="tog tog-map">
|
|
{items.map((t) => (
|
|
<div key={t.id} className={`tog-btn ${value[t.id] ? "on" : ""}`} onClick={() => onToggle(t.id)}>
|
|
{t.label}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|