91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import Gis from "@common/business_components/ui/map/Gis";
|
|
import { useEffect, useRef, useState, useCallback } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { mapService } from "../../(map-layout)/service";
|
|
import { DrgtLegend, DRGT_LAYER_TYPES, EXPRS_ORDERED_LAYERS } from "./drgtLegend";
|
|
import { SearchBar } from "./searchBar";
|
|
|
|
|
|
export default function MapDrgtPopUp() {
|
|
const searchParams = useSearchParams();
|
|
const ctpvCd = searchParams.get('ctpvCd') || '';
|
|
const sggCd = searchParams.get('sggCd') || '';
|
|
const fromDate = searchParams.get('fromDate') || '';
|
|
const toDate = searchParams.get('toDate') || '';
|
|
|
|
const gisMaps = useRef<any | null>(null);
|
|
const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
|
|
const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
|
|
const [showDrgtLegend, setShowDrgtLegend] = useState(false); // DrgtLegend 표시 여부
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
|
|
// 컴포넌트 마운트 시 1회 실행
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
function fetchData() {
|
|
(async () => {
|
|
try {
|
|
const response = await mapService.getLyrStngs('WR_DROUGHT');
|
|
setTreeData(response); // API 응답 저장
|
|
console.log("Drought layers fetched:", response);
|
|
} catch (error) {
|
|
console.error("데이터 불러오기 실패:", error);
|
|
}
|
|
})();
|
|
}
|
|
|
|
// WaterDepth 표시 여부를 결정하는 함수
|
|
const handleDrgtLegndVisibility = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
|
|
const drgtLegndLayers = checkedNodesData.filter(node =>
|
|
DRGT_LAYER_TYPES.includes(node.data?.lyrTyNm)
|
|
);
|
|
|
|
const hasDrgtLegndLayer = drgtLegndLayers.length > 0;
|
|
setShowDrgtLegend(hasDrgtLegndLayer);
|
|
}, []);
|
|
|
|
// 체크된 레이어 변경 처리 함수
|
|
const handleCheckedLayersChange = useCallback((checkedIds: string[], checkedNodesData: any[]) => {
|
|
handleDrgtLegndVisibility(checkedIds, checkedNodesData);
|
|
}, [handleDrgtLegndVisibility]);
|
|
|
|
|
|
|
|
return (
|
|
<div className="bg-container">
|
|
<Gis
|
|
treeData={treeData}
|
|
isSearch={false}
|
|
gisMaps={gisMaps}
|
|
isMiniMap={false}
|
|
searchView={undefined}
|
|
detailView={undefined}
|
|
onFeatureSelect={undefined}
|
|
setIsOpen={setIsOpen}
|
|
setFeatureData={undefined}
|
|
featureData={undefined}
|
|
setIsSearchModalOpen={undefined}
|
|
isOpen={isOpen}
|
|
isSearchModalOpen={undefined}
|
|
onCheckedLayersChange={handleCheckedLayersChange}
|
|
imgVisble={true}
|
|
searchBar={<SearchBar gisMaps={gisMaps} ctpvCode={ctpvCd} sggCode={sggCd} fromDate={fromDate} toDate={toDate} />}
|
|
waterDepth={showDrgtLegend ? DrgtLegend : undefined}
|
|
isPlaying={isPlaying}
|
|
setIsPlaying={setIsPlaying as any}
|
|
targetLayerTypes={DRGT_LAYER_TYPES as any}
|
|
orderedLayers={EXPRS_ORDERED_LAYERS as any}
|
|
checkInterval={2500}
|
|
height={`h-[100vh]`}
|
|
droughtDates={{ startYmd: fromDate, endYmd: toDate }}
|
|
defaultZoom={7}
|
|
defaultLonLat={[127.4875, 36.4916]}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|