fix: mapSearchBar 주석 처리
This commit is contained in:
swcho
@@ -125,16 +125,17 @@ const Map = () => {
|
||||
isSearch={false}
|
||||
gisMaps={gisMaps}
|
||||
isMiniMap={true}
|
||||
searchView={(props: any) => (
|
||||
<MapSearchBar
|
||||
searchType="공급처 후보지 조회"
|
||||
showApplyButton={false}
|
||||
checkedLayers={checkedLayers}
|
||||
checkedLayersData={checkedLayersData}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
searchView={undefined}
|
||||
// searchView={(props: any) => (
|
||||
// <MapSearchBar
|
||||
// searchType="공급처 후보지 조회"
|
||||
// showApplyButton={false}
|
||||
// checkedLayers={checkedLayers}
|
||||
// checkedLayersData={checkedLayersData}
|
||||
// {...props}
|
||||
// />
|
||||
// )
|
||||
// }
|
||||
detailView={(props: any) => (
|
||||
<NewWindowPopup
|
||||
onClose={handlePopupClose} // 메모이제이션된 함수 사용
|
||||
|
||||
+385
-386
@@ -1,415 +1,414 @@
|
||||
"use client"
|
||||
// "use client"
|
||||
|
||||
import { useWrStore } from "@/app/store";
|
||||
import SearchInputText from "@/components/ui/searchInput/searchInput";
|
||||
import type { EnvPartSelectDataType, ReturnType, SelectDataType } from "@common/business_components/ui";
|
||||
import { SelectBox } from "@common/business_components/ui";
|
||||
import { Button, Input, Label } from "@common/components/ui";
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { MapSearchFormLeft } from "./mapSearchForm";
|
||||
// import { useWrStore } from "@/app/store";
|
||||
// import SearchInputText from "@/components/ui/searchInput/searchInput";
|
||||
// import type { EnvPartSelectDataType, ReturnType, SelectDataType } from "@common/business_components/ui";
|
||||
// import { SelectBox } from "@common/business_components/ui";
|
||||
// import { Button, Input, Label } from "@common/components/ui";
|
||||
// import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
// import { MapSearchFormLeft } from "./mapSearchForm";
|
||||
|
||||
|
||||
// 건물 검색 타입 정의
|
||||
interface BuildingInfo {
|
||||
bdstInfoPk: number;
|
||||
ctpvCd: number;
|
||||
sggCd: number;
|
||||
daddr: string;
|
||||
bdstNm: string;
|
||||
frstArchPrmsnDt: string;
|
||||
archArea: number;
|
||||
ctpvNm: string | null;
|
||||
sggNm: string | null;
|
||||
lat: number | null;
|
||||
lot: number | null;
|
||||
regDt: string;
|
||||
rgtr: string | null;
|
||||
mdfcnDt: string;
|
||||
mdfr: string | null;
|
||||
}
|
||||
// // 건물 검색 타입 정의
|
||||
// interface BuildingInfo {
|
||||
// bdstInfoPk: number;
|
||||
// ctpvCd: number;
|
||||
// sggCd: number;
|
||||
// daddr: string;
|
||||
// bdstNm: string;
|
||||
// frstArchPrmsnDt: string;
|
||||
// archArea: number;
|
||||
// ctpvNm: string | null;
|
||||
// sggNm: string | null;
|
||||
// lat: number | null;
|
||||
// lot: number | null;
|
||||
// regDt: string;
|
||||
// rgtr: string | null;
|
||||
// mdfcnDt: string;
|
||||
// mdfr: string | null;
|
||||
// }
|
||||
|
||||
type SearchBaseType = {
|
||||
searchType: string;
|
||||
selectSidoData?: SelectDataType[] | [];
|
||||
selectSigunData?: SelectDataType[] | [];
|
||||
selectRegionData?: SelectDataType[] | [];
|
||||
selectUnitWaterShedData?: SelectDataType[] | [];
|
||||
selectMiddleRegionData?: SelectDataType[] | [];
|
||||
selectEnvPartData?: EnvPartSelectDataType[] | [];
|
||||
onFeatureSelect: () => void;
|
||||
btnClass?: string;
|
||||
ref?: React.RefObject<ReturnType>;
|
||||
isAdmin?: boolean;
|
||||
leftClassName?: string;
|
||||
rightClassName?: string;
|
||||
showQueryButton?: boolean;
|
||||
showInitButton?: boolean;
|
||||
showApplyButton?: boolean;
|
||||
checkedLayers?: string[];
|
||||
checkedLayersData?: any[];
|
||||
}
|
||||
// type SearchBaseType = {
|
||||
// searchType: string;
|
||||
// selectSidoData?: SelectDataType[] | [];
|
||||
// selectSigunData?: SelectDataType[] | [];
|
||||
// selectRegionData?: SelectDataType[] | [];
|
||||
// selectUnitWaterShedData?: SelectDataType[] | [];
|
||||
// selectMiddleRegionData?: SelectDataType[] | [];
|
||||
// selectEnvPartData?: EnvPartSelectDataType[] | [];
|
||||
// onFeatureSelect: () => void;
|
||||
// btnClass?: string;
|
||||
// ref?: React.RefObject<ReturnType>;
|
||||
// isAdmin?: boolean;
|
||||
// leftClassName?: string;
|
||||
// rightClassName?: string;
|
||||
// showQueryButton?: boolean;
|
||||
// showInitButton?: boolean;
|
||||
// showApplyButton?: boolean;
|
||||
// checkedLayers?: string[];
|
||||
// checkedLayersData?: any[];
|
||||
// }
|
||||
|
||||
const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;
|
||||
// const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;
|
||||
|
||||
const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`);
|
||||
// const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`);
|
||||
|
||||
interface SearchModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onFeatureSelect: (row: any) => void;
|
||||
}
|
||||
// interface SearchModalProps {
|
||||
// open: boolean;
|
||||
// onOpenChange: (open: boolean) => void;
|
||||
// onFeatureSelect: (row: any) => void;
|
||||
// }
|
||||
|
||||
interface SelectedDataTypeWithSggNm {
|
||||
text: string;
|
||||
val: string;
|
||||
sggNm: string;
|
||||
}
|
||||
// interface SelectedDataTypeWithSggNm {
|
||||
// text: string;
|
||||
// val: string;
|
||||
// sggNm: string;
|
||||
// }
|
||||
|
||||
export function MapSearchBar({
|
||||
searchType,
|
||||
selectSidoData,
|
||||
selectSigunData,
|
||||
selectRegionData,
|
||||
selectUnitWaterShedData,
|
||||
selectMiddleRegionData,
|
||||
selectEnvPartData,
|
||||
btnClass,
|
||||
onFeatureSelect,
|
||||
isAdmin = false,
|
||||
leftClassName,
|
||||
rightClassName,
|
||||
showQueryButton = true,
|
||||
showInitButton = true,
|
||||
showApplyButton = true,
|
||||
checkedLayers = [],
|
||||
checkedLayersData = [],
|
||||
}: SearchBaseType) {
|
||||
// export function MapSearchBar({
|
||||
// searchType,
|
||||
// selectSidoData,
|
||||
// selectSigunData,
|
||||
// selectRegionData,
|
||||
// selectUnitWaterShedData,
|
||||
// selectMiddleRegionData,
|
||||
// selectEnvPartData,
|
||||
// btnClass,
|
||||
// onFeatureSelect,
|
||||
// isAdmin = false,
|
||||
// leftClassName,
|
||||
// rightClassName,
|
||||
// showQueryButton = true,
|
||||
// showInitButton = true,
|
||||
// showApplyButton = true,
|
||||
// checkedLayers = [],
|
||||
// checkedLayersData = [],
|
||||
// }: SearchBaseType) {
|
||||
|
||||
// 로딩바
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
// 상세 정보 조회를 위한 상태 추가
|
||||
const [popupFeature, setPopupFeature] = useState<any>(null);
|
||||
const [isChHead, setIsChHead] = useState(false);
|
||||
const ref = useRef<ReturnType>({} as ReturnType);
|
||||
// // 로딩바
|
||||
// const [isLoading, setIsLoading] = useState(false);
|
||||
// // 상세 정보 조회를 위한 상태 추가
|
||||
// const [popupFeature, setPopupFeature] = useState<any>(null);
|
||||
// const [isChHead, setIsChHead] = useState(false);
|
||||
// const ref = useRef<ReturnType>({} as ReturnType);
|
||||
|
||||
// zustand store에서 건물 검색 함수와 데이터 가져오기
|
||||
const {
|
||||
code,
|
||||
bdst,
|
||||
findBdst,
|
||||
wrMap,
|
||||
// buildingSearchRes,
|
||||
buildingNmSearch,
|
||||
buildingNmSearchMultiple
|
||||
} = useWrStore((state) => state);
|
||||
// // zustand store에서 건물 검색 함수와 데이터 가져오기
|
||||
// const {
|
||||
// code,
|
||||
// bdst,
|
||||
// findBdst,
|
||||
// wrMap,
|
||||
// buildingSearchRes,
|
||||
// buildingNmSearch,
|
||||
// buildingNmSearchMultiple
|
||||
// } = useWrStore((state) => state);
|
||||
|
||||
const [selectedBuilding, setSelectedBuilding] = useState<BuildingInfo | null>(null);
|
||||
const [buildingSearchText, setBuildingSearchText] = useState("");
|
||||
const [buildingList, setBuildingList] = useState<BuildingInfo[]>([]);
|
||||
// const [selectedBuilding, setSelectedBuilding] = useState<BuildingInfo | null>(null);
|
||||
// const [buildingSearchText, setBuildingSearchText] = useState("");
|
||||
// const [buildingList, setBuildingList] = useState<BuildingInfo[]>([]);
|
||||
|
||||
// 전체 목록
|
||||
const [partValue, setPartValue] = useState<string>("A");
|
||||
const [sidoValue, setSidoValue] = useState<string>("0");
|
||||
const [sigunValue, setSigunValue] = useState<string>("0");
|
||||
const [regionValue, setRegionValue] = useState<string>("0");
|
||||
const [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0");
|
||||
const [middleRegionValue, setMiddleRegionValue] = useState<string>("0");
|
||||
const [envPartValue, setEnvPartValue] = useState<string>("0");
|
||||
const [resetTrigger, setResetTrigger] = useState(false);
|
||||
const [sidoText, setSidoText] = useState<string>("0");
|
||||
const [sigunText, setSigunText] = useState<string>("0");
|
||||
// 공급처 후보지 조회 필터 목록
|
||||
const [selectedSido, setSelectedSido] = useState<SelectDataType>({ text: "전체", val: '0' });
|
||||
const [selectedSigun, setSelectedSigun] = useState<SelectDataType>({ text: "전체", val: '0' });
|
||||
const [selectedFclt, setSelectedFclt] = useState<SelectedDataTypeWithSggNm>({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태
|
||||
// 전체 시설
|
||||
let allFclt: SelectedDataTypeWithSggNm[] = [{ text: "전체", val: '0', sggNm: '전체' }];
|
||||
// 우리동네가뭄지도 필터 목록
|
||||
const [selectedDong, setSelectedDong] = useState<SelectedDataTypeWithSggNm>({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 // 행정동
|
||||
// // 전체 목록
|
||||
// const [partValue, setPartValue] = useState<string>("A");
|
||||
// const [sidoValue, setSidoValue] = useState<string>("0");
|
||||
// const [sigunValue, setSigunValue] = useState<string>("0");
|
||||
// const [regionValue, setRegionValue] = useState<string>("0");
|
||||
// const [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0");
|
||||
// const [middleRegionValue, setMiddleRegionValue] = useState<string>("0");
|
||||
// const [envPartValue, setEnvPartValue] = useState<string>("0");
|
||||
// const [resetTrigger, setResetTrigger] = useState(false);
|
||||
// const [sidoText, setSidoText] = useState<string>("0");
|
||||
// const [sigunText, setSigunText] = useState<string>("0");
|
||||
// // 공급처 후보지 조회 필터 목록
|
||||
// const [selectedSido, setSelectedSido] = useState<SelectDataType>({ text: "전체", val: '0' });
|
||||
// const [selectedSigun, setSelectedSigun] = useState<SelectDataType>({ text: "전체", val: '0' });
|
||||
// const [selectedFclt, setSelectedFclt] = useState<SelectedDataTypeWithSggNm>({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태
|
||||
// // 전체 시설
|
||||
// let allFclt: SelectedDataTypeWithSggNm[] = [{ text: "전체", val: '0', sggNm: '전체' }];
|
||||
// const [selectedDong, setSelectedDong] = useState<SelectedDataTypeWithSggNm>({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 // 행정동
|
||||
|
||||
const filteredSigunData = useMemo(() => {
|
||||
if (!selectedSido || selectedSido.val === '0' || !selectedSido.val) return [{ text: "전체", val: '0' }];
|
||||
return [
|
||||
{ text: "전체", val: '0' },
|
||||
...code.sggCd.filter(item => item.val.substring(0, 2) === selectedSido.val.substring(0, 2))
|
||||
];
|
||||
}, [selectedSido]);
|
||||
// const filteredSigunData = useMemo(() => {
|
||||
// if (!selectedSido || selectedSido.val === '0' || !selectedSido.val) return [{ text: "전체", val: '0' }];
|
||||
// return [
|
||||
// { text: "전체", val: '0' },
|
||||
// ...code.sggCd.filter((item: { val: string; }) => item.val.substring(0, 2) === selectedSido.val.substring(0, 2))
|
||||
// ];
|
||||
// }, [selectedSido]);
|
||||
|
||||
const filteredFcltData = useMemo(() => {
|
||||
if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }];
|
||||
return [
|
||||
{ text: "전체", val: '0', sggNm: '전체' },
|
||||
...allFclt.filter(item => item.sggNm === selectedSido.text)
|
||||
];
|
||||
}, [selectedSigun]);
|
||||
// const filteredFcltData = useMemo(() => {
|
||||
// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }];
|
||||
// return [
|
||||
// { text: "전체", val: '0', sggNm: '전체' },
|
||||
// ...allFclt.filter(item => item.sggNm === selectedSido.text)
|
||||
// ];
|
||||
// }, [selectedSigun]);
|
||||
|
||||
const filteredDong = useMemo(() => {
|
||||
if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }];
|
||||
return [
|
||||
{ text: "전체", val: '0', sggNm: '전체' },
|
||||
// ...code.dong.filter(item => item.sggNm === selectedSido.text)
|
||||
];
|
||||
}, [selectedSigun]);
|
||||
// const filteredDong = useMemo(() => {
|
||||
// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }];
|
||||
// return [
|
||||
// { text: "전체", val: '0', sggNm: '전체' },
|
||||
// // ...code.dong.filter(item => item.sggNm === selectedSido.text)
|
||||
// ];
|
||||
// }, [selectedSigun]);
|
||||
|
||||
// 조회 함수
|
||||
const queryVal = () => {
|
||||
// 46 : 하수처리시설
|
||||
// 47 : 하수재이용시설
|
||||
// 48 : 빗물이용시설
|
||||
// 49 : 중수도시설
|
||||
// 50 : 온배수시설
|
||||
console.log("조회버튼 클릭: ", checkedLayers);
|
||||
if (checkedLayers && checkedLayers.includes('48')) {
|
||||
// searchBuildings
|
||||
}
|
||||
}
|
||||
// // 조회 함수
|
||||
// const queryVal = () => {
|
||||
// // 46 : 하수처리시설
|
||||
// // 47 : 하수재이용시설
|
||||
// // 48 : 빗물이용시설
|
||||
// // 49 : 중수도시설
|
||||
// // 50 : 온배수시설
|
||||
// console.log("조회버튼 클릭: ", checkedLayers);
|
||||
// if (checkedLayers && checkedLayers.includes('48')) {
|
||||
// // searchBuildings
|
||||
// }
|
||||
// }
|
||||
|
||||
// 초기화 함수
|
||||
const initVal = () => {
|
||||
setPartValue("A");
|
||||
setSidoValue("0");
|
||||
setSigunValue("0");
|
||||
setRegionValue("0");
|
||||
setUntitWaterShedValue("0");
|
||||
setMiddleRegionValue("0");
|
||||
setEnvPartValue("0");
|
||||
setSidoText("전체");
|
||||
setSigunText("전체");
|
||||
setSelectedSido({ text: "전체", val: '0' });
|
||||
setSelectedSigun({ text: "전체", val: '0' });
|
||||
setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' });
|
||||
setSelectedDong({ text: "전체", val: '0', sggNm: '전체' });
|
||||
setResetTrigger(true);
|
||||
};
|
||||
// // 초기화 함수
|
||||
// const initVal = () => {
|
||||
// setPartValue("A");
|
||||
// setSidoValue("0");
|
||||
// setSigunValue("0");
|
||||
// setRegionValue("0");
|
||||
// setUntitWaterShedValue("0");
|
||||
// setMiddleRegionValue("0");
|
||||
// setEnvPartValue("0");
|
||||
// setSidoText("전체");
|
||||
// setSigunText("전체");
|
||||
// setSelectedSido({ text: "전체", val: '0' });
|
||||
// setSelectedSigun({ text: "전체", val: '0' });
|
||||
// setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' });
|
||||
// setSelectedDong({ text: "전체", val: '0', sggNm: '전체' });
|
||||
// setResetTrigger(true);
|
||||
// };
|
||||
|
||||
// 적용 버튼
|
||||
const applyVal = () => {
|
||||
onFeatureSelect();
|
||||
};
|
||||
// // 적용 버튼
|
||||
// const applyVal = () => {
|
||||
// onFeatureSelect();
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
if (resetTrigger) {
|
||||
setResetTrigger(false);
|
||||
}
|
||||
}, [resetTrigger]);
|
||||
// useEffect(() => {
|
||||
// if (resetTrigger) {
|
||||
// setResetTrigger(false);
|
||||
// }
|
||||
// }, [resetTrigger]);
|
||||
|
||||
// 시설 조회
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setIsLoading(true);
|
||||
if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) {
|
||||
allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
// // 시설 조회
|
||||
// useEffect(() => {
|
||||
// const fetchData = async () => {
|
||||
// setIsLoading(true);
|
||||
// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) {
|
||||
// allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]);
|
||||
// setIsLoading(false);
|
||||
// return;
|
||||
// }
|
||||
|
||||
try {
|
||||
const queryParamsFacility = new URLSearchParams({
|
||||
lyrTypeNm: 'tb_il_swage_prcs_fclt',
|
||||
page: '0',
|
||||
size: '100000',
|
||||
sort: 'string',
|
||||
});
|
||||
const cqlFiltersFacility: string[] = [];
|
||||
if (selectedSigun.text && selectedSigun.val !== '0') {
|
||||
cqlFiltersFacility.push(`sgg_nm ILIKE '%${selectedSigun.text}%'`);
|
||||
}
|
||||
if (cqlFiltersFacility.length > 0) {
|
||||
queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and '));
|
||||
}
|
||||
console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`);
|
||||
// try {
|
||||
// const queryParamsFacility = new URLSearchParams({
|
||||
// lyrTypeNm: 'tb_il_swage_prcs_fclt',
|
||||
// page: '0',
|
||||
// size: '100000',
|
||||
// sort: 'string',
|
||||
// });
|
||||
// const cqlFiltersFacility: string[] = [];
|
||||
// if (selectedSigun.text && selectedSigun.val !== '0') {
|
||||
// cqlFiltersFacility.push(`sgg_nm ILIKE '%${selectedSigun.text}%'`);
|
||||
// }
|
||||
// if (cqlFiltersFacility.length > 0) {
|
||||
// queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and '));
|
||||
// }
|
||||
// console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`);
|
||||
|
||||
const facilityRes = await fetch(`${API_URL}/v1/fclts?${queryParamsFacility.toString()}`, {
|
||||
method: "GET",
|
||||
headers: { accept: "application/json" }
|
||||
}).then(res => res.json());
|
||||
// const facilityRes = await fetch(`${API_URL}/v1/fclts?${queryParamsFacility.toString()}`, {
|
||||
// method: "GET",
|
||||
// headers: { accept: "application/json" }
|
||||
// }).then(res => res.json());
|
||||
|
||||
const facilities = (facilityRes.data || []).map((item: any) => ({
|
||||
text: item.swtrmtFcltNm,
|
||||
val: item.fid,
|
||||
sggNm: item.sggNm
|
||||
}));
|
||||
allFclt = (facilities);
|
||||
// const facilities = (facilityRes.data || []).map((item: any) => ({
|
||||
// text: item.swtrmtFcltNm,
|
||||
// val: item.fid,
|
||||
// sggNm: item.sggNm
|
||||
// }));
|
||||
// allFclt = (facilities);
|
||||
|
||||
} catch (error) {
|
||||
console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error);
|
||||
allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
// } catch (error) {
|
||||
// console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error);
|
||||
// allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]);
|
||||
// } finally {
|
||||
// setIsLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
fetchData();
|
||||
}, [selectedSigun]);
|
||||
// fetchData();
|
||||
// }, [selectedSigun]);
|
||||
|
||||
useEffect(() => {
|
||||
if (ref && ref.current) {
|
||||
const customRef = ref.current;
|
||||
customRef.partValue = partValue;
|
||||
customRef.sidoValue = sidoValue;
|
||||
customRef.sigunValue = sigunValue;
|
||||
customRef.regionValue = regionValue;
|
||||
customRef.unitWaterShedValue = untitWaterShedValue;
|
||||
customRef.middleRegionValue = middleRegionValue;
|
||||
customRef.envPartValue = envPartValue;
|
||||
customRef.sidoText = selectedSido.text;
|
||||
customRef.sigunText = selectedSigun.text;
|
||||
}
|
||||
}, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]);
|
||||
// useEffect(() => {
|
||||
// if (ref && ref.current) {
|
||||
// const customRef = ref.current;
|
||||
// customRef.partValue = partValue;
|
||||
// customRef.sidoValue = sidoValue;
|
||||
// customRef.sigunValue = sigunValue;
|
||||
// customRef.regionValue = regionValue;
|
||||
// customRef.unitWaterShedValue = untitWaterShedValue;
|
||||
// customRef.middleRegionValue = middleRegionValue;
|
||||
// customRef.envPartValue = envPartValue;
|
||||
// customRef.sidoText = selectedSido.text;
|
||||
// customRef.sigunText = selectedSigun.text;
|
||||
// }
|
||||
// }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]);
|
||||
|
||||
// buildingSearchText가 변경될 때 API 호출
|
||||
useEffect(() => {
|
||||
if (buildingSearchText && buildingSearchText.length > 1) {
|
||||
if (checkedLayers && checkedLayers.length > 0) {
|
||||
// 다중 레이어 검색
|
||||
// buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", buildingSearchText);
|
||||
buildingNmSearch("RNB", selectedSigun.val, buildingSearchText);
|
||||
} else {
|
||||
// 단일 레이어 검색
|
||||
// buildingNmSearch(checkedLayers[0], selectedSigun.val, buildingSearchText);
|
||||
}
|
||||
} else {
|
||||
// 검색 텍스트가 짧으면 리스트 초기화
|
||||
if (checkedLayers && checkedLayers.length > 0) {
|
||||
// buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", "");
|
||||
} else {
|
||||
buildingNmSearch("RNB", selectedSigun.val || "", "");
|
||||
}
|
||||
}
|
||||
}, [buildingSearchText]);
|
||||
// // buildingSearchText가 변경될 때 API 호출
|
||||
// useEffect(() => {
|
||||
// if (buildingSearchText && buildingSearchText.length > 1) {
|
||||
// if (checkedLayers && checkedLayers.length > 0) {
|
||||
// // 다중 레이어 검색
|
||||
// // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", buildingSearchText);
|
||||
// buildingNmSearch("RNB", selectedSigun.val, buildingSearchText);
|
||||
// } else {
|
||||
// // 단일 레이어 검색
|
||||
// // buildingNmSearch(checkedLayers[0], selectedSigun.val, buildingSearchText);
|
||||
// }
|
||||
// } else {
|
||||
// // 검색 텍스트가 짧으면 리스트 초기화
|
||||
// if (checkedLayers && checkedLayers.length > 0) {
|
||||
// // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", "");
|
||||
// } else {
|
||||
// buildingNmSearch("RNB", selectedSigun.val || "", "");
|
||||
// }
|
||||
// }
|
||||
// }, [buildingSearchText]);
|
||||
|
||||
return (
|
||||
<div className="absolute left-1/2 -translate-x-1/2 bg-white flex items-center justify-center p-4 rounded-md shadow-lg w-auto min-w-fit">
|
||||
<div className={leftClassName ? leftClassName : `flex items-center justify-center space-x-2 `}>
|
||||
<div className="flex gap-8 items-center">
|
||||
{searchType == "공급처 후보지 조회" && (
|
||||
<>
|
||||
<SelectBox
|
||||
className="flex items-center"
|
||||
label={'시도'}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
const selected = code.cityCd.find(item => (item.val === val));
|
||||
setSelectedSido(selected || { text: "전체", val: '0' });
|
||||
setSelectedSigun({ text: "전체", val: '0' });
|
||||
}}
|
||||
value={selectedSido.val}
|
||||
selectClass={'w-32'}
|
||||
/>
|
||||
<SelectBox
|
||||
className="flex items-center"
|
||||
label={'시군구'}
|
||||
selectArray={filteredSigunData}
|
||||
onSelectValue={(val) => {
|
||||
const selected = filteredSigunData.find(item => (item.val === val));
|
||||
setSelectedSigun(selected || { text: "전체", val: '0' });
|
||||
setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' });
|
||||
}}
|
||||
value={selectedSigun.val}
|
||||
selectClass={'w-32'}
|
||||
/>
|
||||
<div className="flex items-center">
|
||||
<Label className="w-20 text-xl text-gray-600">시설명</Label>
|
||||
<div className="w-64">
|
||||
<SearchInputText
|
||||
label="시설명"
|
||||
initValue={buildingSearchText}
|
||||
setValue={(searchNm?: string) => {
|
||||
setBuildingSearchText(searchNm || "");
|
||||
}}
|
||||
setRtnData={function (rtnData: any): void {
|
||||
// 선택된 건물 데이터 처리
|
||||
// if (rtnData && rtnData.bdstInfoPk) {
|
||||
// setSelectedBuilding(rtnData);
|
||||
// setBuildingSearchText(rtnData.bdstNm || "");
|
||||
// }
|
||||
}}
|
||||
searchList={wrMap.buildingSearchRes || []}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{searchType == "우리동네가뭄지도보기" && (
|
||||
<>
|
||||
<SelectBox
|
||||
className="flex items-center"
|
||||
label={'시도'}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
const selected = code.cityCd.find(item => (item.val === val));
|
||||
setSelectedSido(selected || { text: "전체", val: '0' });
|
||||
setSelectedSigun({ text: "전체", val: '0' });
|
||||
}}
|
||||
value={selectedSido.val}
|
||||
selectClass={'w-44'}
|
||||
/>
|
||||
<SelectBox
|
||||
className="flex items-center"
|
||||
label={'시군구'}
|
||||
selectArray={filteredSigunData}
|
||||
onSelectValue={(val) => {
|
||||
const selected = filteredSigunData.find(item => (item.val === val));
|
||||
setSelectedSigun(selected || { text: "전체", val: '0' });
|
||||
setSelectedDong({ text: "전체", val: '0', sggNm: '전체' });
|
||||
}}
|
||||
value={selectedSigun.val}
|
||||
selectClass={'w-32'}
|
||||
/>
|
||||
<SelectBox
|
||||
className="flex items-center mr-8"
|
||||
label={'행정동'}
|
||||
selectArray={filteredDong}
|
||||
onSelectValue={(val) => {
|
||||
const selected = filteredDong.find(item => (item.val === val));
|
||||
setSelectedDong(selected || { text: "전체", val: '0', sggNm: '전체' });
|
||||
}}
|
||||
value={selectedDong.val}
|
||||
selectClass={'w-32'}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{searchType == "지도보기" && (
|
||||
<div className="flex items-center gap-2 w-[800px]">
|
||||
<div className="flex min-w-0"> {/* SearchFormLeft 래퍼 */}
|
||||
<MapSearchFormLeft
|
||||
isShowPart={true}
|
||||
selectSidoData={code.cityCd}
|
||||
selectSigunData={filteredSigunData}
|
||||
selectRegionData={code.rvbsnCd}
|
||||
selectUnitWaterShedData={selectUnitWaterShedData}
|
||||
selectMiddleRegionData={selectMiddleRegionData}
|
||||
selectEnvPartData={selectEnvPartData}
|
||||
setRtnPartValue={setPartValue}
|
||||
setRtnSidoValue={setSidoValue}
|
||||
setRtnSigunValue={setSigunValue}
|
||||
setRtnRegionValue={setRegionValue}
|
||||
setRtnUnitWaterShedValue={setUntitWaterShedValue}
|
||||
setRtnMiddleRegionValue={setMiddleRegionValue}
|
||||
setRtnEnvPartValue={setEnvPartValue}
|
||||
setRtnEnvPartSidoValue={setSidoValue}
|
||||
setRtnEnvPartSigunValue={setSigunValue}
|
||||
setRtnSidoText={setSidoText}
|
||||
setRtnSigunText={setSigunText}
|
||||
resetTrigger={resetTrigger}
|
||||
isAdmin={isAdmin}
|
||||
children={undefined}
|
||||
/>
|
||||
</div>
|
||||
<Label className="w-auto text-xl text-gray-600 whitespace-nowrap">시설명</Label>
|
||||
<div className="w-44">
|
||||
<Input className="mr-4" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* 버튼 부분 */}
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
{showQueryButton && <Button className={btnClass} onClick={queryVal}>조회</Button>}
|
||||
{showInitButton && <Button className={btnClass} onClick={initVal}>초기화</Button>}
|
||||
{showApplyButton && <Button className={btnClass} onClick={applyVal}>적용</Button>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// return (
|
||||
// <div className="absolute left-1/2 -translate-x-1/2 bg-white flex items-center justify-center p-4 rounded-md shadow-lg w-auto min-w-fit">
|
||||
// <div className={leftClassName ? leftClassName : `flex items-center justify-center space-x-2 `}>
|
||||
// <div className="flex gap-8 items-center">
|
||||
// {searchType == "공급처 후보지 조회" && (
|
||||
// <>
|
||||
// <SelectBox
|
||||
// className="flex items-center"
|
||||
// label={'시도'}
|
||||
// selectArray={code.cityCd}
|
||||
// onSelectValue={(val) => {
|
||||
// const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val));
|
||||
// setSelectedSido(selected || { text: "전체", val: '0' });
|
||||
// setSelectedSigun({ text: "전체", val: '0' });
|
||||
// }}
|
||||
// value={selectedSido.val}
|
||||
// selectClass={'w-32'}
|
||||
// />
|
||||
// <SelectBox
|
||||
// className="flex items-center"
|
||||
// label={'시군구'}
|
||||
// selectArray={filteredSigunData}
|
||||
// onSelectValue={(val) => {
|
||||
// const selected = filteredSigunData.find(item => (item.val === val));
|
||||
// setSelectedSigun(selected || { text: "전체", val: '0' });
|
||||
// setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' });
|
||||
// }}
|
||||
// value={selectedSigun.val}
|
||||
// selectClass={'w-32'}
|
||||
// />
|
||||
// <div className="flex items-center">
|
||||
// <Label className="w-20 text-xl text-gray-600">시설명</Label>
|
||||
// <div className="w-64">
|
||||
// <SearchInputText
|
||||
// label="시설명"
|
||||
// initValue={buildingSearchText}
|
||||
// setValue={(searchNm?: string) => {
|
||||
// setBuildingSearchText(searchNm || "");
|
||||
// }}
|
||||
// setRtnData={function (rtnData: any): void {
|
||||
// // 선택된 건물 데이터 처리
|
||||
// // if (rtnData && rtnData.bdstInfoPk) {
|
||||
// // setSelectedBuilding(rtnData);
|
||||
// // setBuildingSearchText(rtnData.bdstNm || "");
|
||||
// // }
|
||||
// }}
|
||||
// searchList={buildingSearchRes || []}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// </>
|
||||
// )}
|
||||
// {searchType == "우리동네가뭄지도보기" && (
|
||||
// <>
|
||||
// <SelectBox
|
||||
// className="flex items-center"
|
||||
// label={'시도'}
|
||||
// selectArray={code.cityCd}
|
||||
// onSelectValue={(val) => {
|
||||
// const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val));
|
||||
// setSelectedSido(selected || { text: "전체", val: '0' });
|
||||
// setSelectedSigun({ text: "전체", val: '0' });
|
||||
// }}
|
||||
// value={selectedSido.val}
|
||||
// selectClass={'w-44'}
|
||||
// />
|
||||
// <SelectBox
|
||||
// className="flex items-center"
|
||||
// label={'시군구'}
|
||||
// selectArray={filteredSigunData}
|
||||
// onSelectValue={(val) => {
|
||||
// const selected = filteredSigunData.find(item => (item.val === val));
|
||||
// setSelectedSigun(selected || { text: "전체", val: '0' });
|
||||
// setSelectedDong({ text: "전체", val: '0', sggNm: '전체' });
|
||||
// }}
|
||||
// value={selectedSigun.val}
|
||||
// selectClass={'w-32'}
|
||||
// />
|
||||
// <SelectBox
|
||||
// className="flex items-center mr-8"
|
||||
// label={'행정동'}
|
||||
// selectArray={filteredDong}
|
||||
// onSelectValue={(val) => {
|
||||
// const selected = filteredDong.find(item => (item.val === val));
|
||||
// setSelectedDong(selected || { text: "전체", val: '0', sggNm: '전체' });
|
||||
// }}
|
||||
// value={selectedDong.val}
|
||||
// selectClass={'w-32'}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// {searchType == "지도보기" && (
|
||||
// <div className="flex items-center gap-2 w-[800px]">
|
||||
// <div className="flex min-w-0"> {/* SearchFormLeft 래퍼 */}
|
||||
// <MapSearchFormLeft
|
||||
// isShowPart={true}
|
||||
// selectSidoData={code.cityCd}
|
||||
// selectSigunData={filteredSigunData}
|
||||
// selectRegionData={code.rvbsnCd}
|
||||
// selectUnitWaterShedData={selectUnitWaterShedData}
|
||||
// selectMiddleRegionData={selectMiddleRegionData}
|
||||
// selectEnvPartData={selectEnvPartData}
|
||||
// setRtnPartValue={setPartValue}
|
||||
// setRtnSidoValue={setSidoValue}
|
||||
// setRtnSigunValue={setSigunValue}
|
||||
// setRtnRegionValue={setRegionValue}
|
||||
// setRtnUnitWaterShedValue={setUntitWaterShedValue}
|
||||
// setRtnMiddleRegionValue={setMiddleRegionValue}
|
||||
// setRtnEnvPartValue={setEnvPartValue}
|
||||
// setRtnEnvPartSidoValue={setSidoValue}
|
||||
// setRtnEnvPartSigunValue={setSigunValue}
|
||||
// setRtnSidoText={setSidoText}
|
||||
// setRtnSigunText={setSigunText}
|
||||
// resetTrigger={resetTrigger}
|
||||
// isAdmin={isAdmin}
|
||||
// children={undefined}
|
||||
// />
|
||||
// </div>
|
||||
// <Label className="w-auto text-xl text-gray-600 whitespace-nowrap">시설명</Label>
|
||||
// <div className="w-44">
|
||||
// <Input className="mr-4" />
|
||||
// </div>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// {/* 버튼 부분 */}
|
||||
// <div className="flex items-center justify-center gap-4">
|
||||
// {showQueryButton && <Button className={btnClass} onClick={queryVal}>조회</Button>}
|
||||
// {showInitButton && <Button className={btnClass} onClick={initVal}>초기화</Button>}
|
||||
// {showApplyButton && <Button className={btnClass} onClick={applyVal}>적용</Button>}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
@@ -48,7 +48,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
onClose
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "0");
|
||||
const [showDetailView, setShowDetailView] = useState(false); // 상세정보 화면 표시 상태 추가
|
||||
// swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음
|
||||
const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가
|
||||
|
||||
// onClose 함수를 useCallback으로 메모이제이션
|
||||
const memoizedOnClose = useCallback(() => {
|
||||
@@ -183,14 +184,15 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설')
|
||||
);
|
||||
|
||||
// swcho : true, false 값 변경하여 시설 변경하여 테스트하였음
|
||||
// 재이용시설
|
||||
const isPbnst = false;
|
||||
// 빗물이용시설
|
||||
const isRain = false;
|
||||
// 중수도시설
|
||||
const isRswt = false;
|
||||
const isRswt = true;
|
||||
// 온배수시설
|
||||
const isHtdfl = true;
|
||||
const isHtdfl = false;
|
||||
|
||||
|
||||
return (
|
||||
|
||||
@@ -16,6 +16,7 @@ import GisToolBar from './GisToolBar';
|
||||
import GisTree from './GisTree';
|
||||
import './lib/css/gis.common.css';
|
||||
import GisApp from './lib/gis.core';
|
||||
// import FacilityInfoPopup from './FacilityInfoPopup';
|
||||
|
||||
export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null });
|
||||
export const useGisContext = () => useContext(GisContext);
|
||||
@@ -47,8 +48,8 @@ function Gis({
|
||||
const checkedLayerIds = useRef([]);
|
||||
|
||||
// 팝업 데이터를 저장할 상태와 오버레이 참조를 저장할 ref 추가
|
||||
const [facilityInfoPopupData, setFacilityInfoPopupData] = useState([]);
|
||||
const facilityOverlaysRef = useRef([]);
|
||||
// const [facilityInfoPopupData, setFacilityInfoPopupData] = useState([]);
|
||||
// const facilityOverlaysRef = useRef([]);
|
||||
// 체크된 레이어 상태 관리
|
||||
const [checkedLayers, setCheckedLayers] = useState([]);
|
||||
const [checkedLayersData, setCheckedLayersData] = useState([]);
|
||||
@@ -225,119 +226,119 @@ function Gis({
|
||||
}
|
||||
}
|
||||
|
||||
// 데이터 로드 및 팝업 생성 로직
|
||||
useEffect(() => {
|
||||
if (!mapInstanceRef.current) return; // 맵이 생성되지 않았으면 실행 안 함
|
||||
// // 데이터 로드 및 팝업 생성 로직
|
||||
// useEffect(() => {
|
||||
// if (!mapInstanceRef.current) return; // 맵이 생성되지 않았으면 실행 안 함
|
||||
|
||||
// 1. 팝업 데이터 가져오기 (feature.js의 getData와 유사)
|
||||
const fetchPopupData = async () => {
|
||||
// 실제 API 호출 로직으로 대체해야 합니다.
|
||||
// 예시: const response = await yourApiService.getFcltyWtCnt();
|
||||
// setFacilityInfoPopupData(response.data);
|
||||
// // 1. 팝업 데이터 가져오기 (feature.js의 getData와 유사)
|
||||
// const fetchPopupData = async () => {
|
||||
// // 실제 API 호출 로직으로 대체해야 합니다.
|
||||
// // 예시: const response = await yourApiService.getFcltyWtCnt();
|
||||
// // setFacilityInfoPopupData(response.data);
|
||||
|
||||
// 임시 목업 데이터
|
||||
const mockData = [
|
||||
{ ftrIdn: 1, ftrCde: 'SA206', bplcNm: '처리장A', fcltyUseYn: 'Y', x: 127.005, y: 37.282, aCnt: 10, cCnt: 5, eCnt: 3, mCnt: 8, iCnt: 2 },
|
||||
{ ftrIdn: 2, ftrCde: 'SA112', bplcNm: '처리장B', fcltyUseYn: 'N', x: 127.010, y: 37.285, aCnt: 8, cCnt: 4, eCnt: 2, mCnt: 6, iCnt: 1 }
|
||||
];
|
||||
setFacilityInfoPopupData(mockData);
|
||||
};
|
||||
// // 임시 목업 데이터
|
||||
// const mockData = [
|
||||
// { ftrIdn: 1, ftrCde: 'SA206', bplcNm: '처리장A', fcltyUseYn: 'Y', x: 127.005, y: 37.282, aCnt: 10, cCnt: 5, eCnt: 3, mCnt: 8, iCnt: 2 },
|
||||
// { ftrIdn: 2, ftrCde: 'SA112', bplcNm: '처리장B', fcltyUseYn: 'N', x: 127.010, y: 37.285, aCnt: 8, cCnt: 4, eCnt: 2, mCnt: 6, iCnt: 1 }
|
||||
// ];
|
||||
// setFacilityInfoPopupData(mockData);
|
||||
// };
|
||||
|
||||
fetchPopupData();
|
||||
// fetchPopupData();
|
||||
|
||||
}, [mapInstanceRef.current]); // 맵 인스턴스가 생성된 후 한 번만 실행
|
||||
// }, [mapInstanceRef.current]); // 맵 인스턴스가 생성된 후 한 번만 실행
|
||||
|
||||
// 데이터가 변경되면 오버레이를 생성/업데이트하는 로직
|
||||
useEffect(() => {
|
||||
const map = mapInstanceRef.current;
|
||||
if (!map || facilityInfoPopupData.length === 0) return;
|
||||
// // 데이터가 변경되면 오버레이를 생성/업데이트하는 로직
|
||||
// useEffect(() => {
|
||||
// const map = mapInstanceRef.current;
|
||||
// if (!map || facilityInfoPopupData.length === 0) return;
|
||||
|
||||
// 기존 오버레이 정리
|
||||
facilityOverlaysRef.current.forEach(overlay => map.removeOverlay(overlay));
|
||||
facilityOverlaysRef.current = [];
|
||||
// // 기존 오버레이 정리
|
||||
// facilityOverlaysRef.current.forEach(overlay => map.removeOverlay(overlay));
|
||||
// facilityOverlaysRef.current = [];
|
||||
|
||||
facilityInfoPopupData.forEach(data => {
|
||||
const popupId = `${data.ftrIdn}_${data.ftrCde}`;
|
||||
// facilityInfoPopupData.forEach(data => {
|
||||
// const popupId = `${data.ftrIdn}_${data.ftrCde}`;
|
||||
|
||||
// 팝업을 담을 div 엘리먼트 생성
|
||||
const popupElement = document.createElement('div');
|
||||
popupElement.id = popupId;
|
||||
// // 팝업을 담을 div 엘리먼트 생성
|
||||
// const popupElement = document.createElement('div');
|
||||
// popupElement.id = popupId;
|
||||
|
||||
// OpenLayers Overlay 생성
|
||||
const position = olProj.transform([Number(data.x), Number(data.y)], GisApp.FROM_PROJ, GisApp.TO_PROJ);
|
||||
const overlay = new Overlay({
|
||||
element: popupElement,
|
||||
position: position,
|
||||
offset: [-75, -210], // 팝업 너비의 절반, 높이만큼 오프셋 조정
|
||||
positioning: 'bottom-center',
|
||||
className: 'facility-popup-overlay' // 필요시 공통 클래스 추가
|
||||
});
|
||||
// // OpenLayers Overlay 생성
|
||||
// const position = olProj.transform([Number(data.x), Number(data.y)], GisApp.FROM_PROJ, GisApp.TO_PROJ);
|
||||
// const overlay = new Overlay({
|
||||
// element: popupElement,
|
||||
// position: position,
|
||||
// offset: [-75, -210], // 팝업 너비의 절반, 높이만큼 오프셋 조정
|
||||
// positioning: 'bottom-center',
|
||||
// className: 'facility-popup-overlay' // 필요시 공통 클래스 추가
|
||||
// });
|
||||
|
||||
map.addOverlay(overlay);
|
||||
facilityOverlaysRef.current.push(overlay);
|
||||
// map.addOverlay(overlay);
|
||||
// facilityOverlaysRef.current.push(overlay);
|
||||
|
||||
// React 컴포넌트를 popupElement에 렌더링
|
||||
const root = createRoot(popupElement);
|
||||
root.render(<FacilityInfoPopup data={data} />);
|
||||
});
|
||||
// // React 컴포넌트를 popupElement에 렌더링
|
||||
// const root = createRoot(popupElement);
|
||||
// root.render(<FacilityInfoPopup data={data} />);
|
||||
// });
|
||||
|
||||
// 초기 가시성 업데이트
|
||||
updatePopupVisibility();
|
||||
// // 초기 가시성 업데이트
|
||||
// updatePopupVisibility();
|
||||
|
||||
}, [facilityInfoPopupData]); // 팝업 데이터가 변경될 때마다 실행
|
||||
// }, [facilityInfoPopupData]); // 팝업 데이터가 변경될 때마다 실행
|
||||
|
||||
// 레이어 가시성에 따라 팝업 가시성을 제어하는 함수
|
||||
const updatePopupVisibility = useCallback(() => {
|
||||
const map = mapInstanceRef.current;
|
||||
if (!map) return;
|
||||
// // 레이어 가시성에 따라 팝업 가시성을 제어하는 함수
|
||||
// const updatePopupVisibility = useCallback(() => {
|
||||
// const map = mapInstanceRef.current;
|
||||
// if (!map) return;
|
||||
|
||||
const visibleLayers = new Set();
|
||||
map.getLayers().forEach(layer => {
|
||||
if (layer.getVisible()) {
|
||||
// feature.js의 로직처럼 typeName이나 ftrCde를 사용해 필터링
|
||||
const typeName = layer.get('typeName');
|
||||
if (typeName === 'VW_WTL_FCLTY_AS') { // 예시 레이어 이름
|
||||
visibleLayers.add(layer.get('ftrCde'));
|
||||
}
|
||||
}
|
||||
});
|
||||
// const visibleLayers = new Set();
|
||||
// map.getLayers().forEach(layer => {
|
||||
// if (layer.getVisible()) {
|
||||
// // feature.js의 로직처럼 typeName이나 ftrCde를 사용해 필터링
|
||||
// const typeName = layer.get('typeName');
|
||||
// if (typeName === 'VW_WTL_FCLTY_AS') { // 예시 레이어 이름
|
||||
// visibleLayers.add(layer.get('ftrCde'));
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
facilityOverlaysRef.current.forEach(overlay => {
|
||||
const element = overlay.getElement();
|
||||
const ftrCde = element.querySelector('table')?.classList[0]; // FacilityPopup의 클래스에서 ftrCde 가져오기
|
||||
// facilityOverlaysRef.current.forEach(overlay => {
|
||||
// const element = overlay.getElement();
|
||||
// const ftrCde = element.querySelector('table')?.classList[0]; // FacilityPopup의 클래스에서 ftrCde 가져오기
|
||||
|
||||
if (visibleLayers.has(ftrCde)) {
|
||||
element.style.display = '';
|
||||
} else {
|
||||
element.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
// if (visibleLayers.has(ftrCde)) {
|
||||
// element.style.display = '';
|
||||
// } else {
|
||||
// element.style.display = 'none';
|
||||
// }
|
||||
// });
|
||||
// }, []);
|
||||
|
||||
// GisTree에서 체크 상태가 변경될 때 이 함수를 호출하도록 연결해야 합니다.
|
||||
// 예시: GisTree 컴포넌트에 onCheck 콜백을 추가하고, 그 콜백에서 이 함수를 호출
|
||||
useEffect(() => {
|
||||
// 레이어 가시성이 변경될 때마다 팝업 가시성 업데이트
|
||||
const map = mapInstanceRef.current;
|
||||
if (!map) return;
|
||||
// useEffect(() => {
|
||||
// // 레이어 가시성이 변경될 때마다 팝업 가시성 업데이트
|
||||
// const map = mapInstanceRef.current;
|
||||
// if (!map) return;
|
||||
|
||||
const handleLayerVisibilityChange = () => {
|
||||
updatePopupVisibility();
|
||||
};
|
||||
// const handleLayerVisibilityChange = () => {
|
||||
// updatePopupVisibility();
|
||||
// };
|
||||
|
||||
map.getLayers().on('change:length', handleLayerVisibilityChange);
|
||||
map.getLayers().forEach(layer => {
|
||||
layer.on('change:visible', handleLayerVisibilityChange);
|
||||
});
|
||||
// map.getLayers().on('change:length', handleLayerVisibilityChange);
|
||||
// map.getLayers().forEach(layer => {
|
||||
// layer.on('change:visible', handleLayerVisibilityChange);
|
||||
// });
|
||||
|
||||
return () => {
|
||||
// 클린업
|
||||
map.getLayers().un('change:length', handleLayerVisibilityChange);
|
||||
map.getLayers().forEach(layer => {
|
||||
layer.un('change:visible', handleLayerVisibilityChange);
|
||||
});
|
||||
};
|
||||
}, [updatePopupVisibility]);
|
||||
// return () => {
|
||||
// // 클린업
|
||||
// map.getLayers().un('change:length', handleLayerVisibilityChange);
|
||||
// map.getLayers().forEach(layer => {
|
||||
// layer.un('change:visible', handleLayerVisibilityChange);
|
||||
// });
|
||||
// };
|
||||
// }, [updatePopupVisibility]);
|
||||
|
||||
// 체크된 레이어 정보를 처리하는 함수
|
||||
const handleCheckedLayersChange = useCallback((checkedIds, checkedNodesData) => {
|
||||
@@ -359,18 +360,21 @@ function Gis({
|
||||
|
||||
{/* <GisContent onFeatureSelect={handleFeatureSelect} isSearch={isSearch} isSearchModalOpen={isSearchModalOpen} setIsSearchModalOpen={setIsSearchModalOpen} /> */}
|
||||
|
||||
{/* isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
|
||||
{/* DetailView가 존재할 때만 렌더링 isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
|
||||
{isOpen && featureData && !isSearchModalOpen && (
|
||||
<DetailView
|
||||
featureData={featureData}
|
||||
onClose={closePopup} // 닫기 콜백 전달
|
||||
/>
|
||||
)}
|
||||
<SearchView
|
||||
open={isSearchModalOpen}
|
||||
onOpenChange={setIsSearchModalOpen}
|
||||
onFeatureSelect={handleFeatureSelect}
|
||||
/>
|
||||
{/* SearchView가 존재할 때만 렌더링 */}
|
||||
{SearchView && (
|
||||
<SearchView
|
||||
open={isSearchModalOpen}
|
||||
onOpenChange={setIsSearchModalOpen}
|
||||
onFeatureSelect={handleFeatureSelect}
|
||||
/>
|
||||
)}
|
||||
<GisLonLat />
|
||||
<GisToolBar />
|
||||
<GisMapToggle />
|
||||
|
||||
Reference in New Issue
Block a user