288 lines
9.0 KiB
TypeScript
288 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import Gis from "@common/business_components/ui/map/Gis";
|
|
import { useEffect, useRef, useState, useCallback } from "react";
|
|
import { mapService } from "../../service";
|
|
import GisApp from "@common/business_components/ui/map/lib/gis.core";
|
|
import { SearchBar } from "@common/business_components/ui/map/searchBar/searchBar";
|
|
import { useWrStore } from "@/app/store";
|
|
import {
|
|
featurePopUpOpen,
|
|
getClickFeatureId,
|
|
getFeatureCd,
|
|
getSelectedLayers,
|
|
getWrFeaturePk,
|
|
getWrLayerNm,
|
|
} from "@/components/lib/func/mapUtil";
|
|
import toast, { Toaster } from "react-hot-toast";
|
|
|
|
const Map = () => {
|
|
const { comMap } = useWrStore((state) => state);
|
|
const { isFeatured } = comMap;
|
|
const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
|
|
const gisMaps = useRef<any | null>(null);
|
|
const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
|
|
const [isSearchModalOpen, setIsSearchModalOpen] = useState(true); // SearchModal 열림 상태
|
|
const [featureData, setFeatureData] = useState<any>(null); // 선택된 피쳐 데이터
|
|
const [checkedLayers, setCheckedLayers] = useState<string[]>([]);
|
|
const [checkedLayersData, setCheckedLayersData] = useState<any[]>([]);
|
|
const popupRef = useRef<Window | null>(null);
|
|
const popupDetailRef = useRef<Window | null>(null);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await mapService.getLyrStngs("WR_NETWORK");
|
|
setTreeData(response); // API 응답 저장
|
|
} catch (error) {
|
|
console.error("데이터 불러오기 실패:", error);
|
|
}
|
|
};
|
|
|
|
// 팝업 닫기 핸들러를 useCallback으로 메모이제이션
|
|
// const handlePopupClose = useCallback(() => {
|
|
// setIsOpen(false);
|
|
// setFeatureData(null);
|
|
// }, []);
|
|
|
|
// 컴포넌트 마운트 시 1회 실행
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const messageHandler = (event: MessageEvent) => {
|
|
if (event.data.type === "POPUP_CLOSED") {
|
|
if (event.data.target === "detail") {
|
|
setFeatureData(null);
|
|
setIsOpen(false);
|
|
setIsSearchModalOpen(true);
|
|
popupDetailRef.current = null;
|
|
} else {
|
|
popupRef.current = null;
|
|
}
|
|
}
|
|
};
|
|
window.addEventListener("message", messageHandler);
|
|
return () => {
|
|
window.removeEventListener("message", messageHandler);
|
|
};
|
|
}, []);
|
|
|
|
// 체크된 레이어 정보를 받는 핸들러
|
|
const handleCheckedLayersChange = (
|
|
checkedIds: string[],
|
|
checkedNodesData: any[]
|
|
) => {
|
|
setCheckedLayers(checkedIds);
|
|
setCheckedLayersData(checkedNodesData);
|
|
};
|
|
|
|
// SearchModal, GisContent 등에서 호출
|
|
const onFeatureFocus = (data: any) => {
|
|
console.log('data',data)
|
|
};
|
|
|
|
const onFeatureSelect = (data: any ,popUpClick?:boolean) => {
|
|
|
|
const map = gisMaps.current;
|
|
if (!map) {
|
|
console.warn("지도가 초기화되지 않았습니다.");
|
|
return;
|
|
}
|
|
|
|
// 항상 같은 select 객체 사용
|
|
const select = GisApp.Module.select as any;
|
|
if (!select) return;
|
|
|
|
// 1. 기존 선택 초기화
|
|
select.resetSelectedFeature();
|
|
|
|
// 2. data가 OpenLayers Feature 인스턴스인지 확인
|
|
let foundFeature: any = null;
|
|
let featureId = data.fid;
|
|
|
|
if(popUpClick){
|
|
const layerName = getWrLayerNm(data);
|
|
const featurePk = getWrFeaturePk(layerName ?? "");
|
|
// 재이용시설
|
|
if (featurePk) {
|
|
|
|
const lastPk = layerName==='tb_wr_ruse_fclt_dmd_co'? data[featurePk].replaceAll("-", "") : data[featurePk]
|
|
featureId = `${layerName}.${lastPk}`;
|
|
} else {
|
|
console.warn("해당 피처는 선택된 레이어에서 찾을수 없습니다.");
|
|
}
|
|
}else{
|
|
featureId=getClickFeatureId(data)
|
|
|
|
}
|
|
map
|
|
.getLayers()
|
|
.getArray()
|
|
.forEach((layer: any) => {
|
|
const source = layer.getSource?.();
|
|
if (source?.getFeatureById) {
|
|
const feature = source.getFeatureById(String(featureId).trim());
|
|
if (feature) foundFeature = feature;
|
|
}
|
|
});
|
|
|
|
// 3. 피처 선택
|
|
if (foundFeature) {
|
|
const geometry = foundFeature.getGeometry();
|
|
if (geometry) {
|
|
const extent = geometry.getExtent();
|
|
|
|
map.getView().fit(extent, {
|
|
duration: 300,
|
|
padding: [50, 50, 50, 50],
|
|
maxZoom: 16,
|
|
constrainResolution: true,
|
|
nearest: true,
|
|
});
|
|
}
|
|
select.selectFeature(foundFeature, true);
|
|
} else {
|
|
// toast.error('위치정보를 찾을수 없습니다')
|
|
console.warn("OpenLayers Feature를 찾을 수 없습니다:");
|
|
console.log("foundFeature :", foundFeature );
|
|
console.warn("featureId : ", featureId);
|
|
console.warn("data : ", data);
|
|
console.warn(": 끝");
|
|
}
|
|
const currentId = data?.fid || data?.id || data?.ftrIdn;
|
|
const lastId = featureData?.fid || featureData?.id || featureData?.ftrIdn;
|
|
if (featureData && currentId === lastId) return; // 이전과 같으면 무시
|
|
setFeatureData(data);
|
|
setIsOpen(true);
|
|
setIsSearchModalOpen(false);
|
|
|
|
if (popUpClick && foundFeature&&!(
|
|
Object.keys(foundFeature?.getProperties()).length === 0 &&
|
|
foundFeature.constructor === Object
|
|
)){
|
|
const layerName = getWrLayerNm(data);
|
|
const isColumn = getFeatureCd(foundFeature.getProperties(), String(layerName));
|
|
if(layerName&&isColumn)
|
|
featurePopUpOpen(layerName,isColumn,popupDetailRef)
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isFeatured) {
|
|
onFeatureSelect(isFeatured);
|
|
}
|
|
}, [isFeatured]);
|
|
|
|
useEffect(() => {
|
|
const bc = new BroadcastChannel("mapDetailPopUp");
|
|
bc.onmessage = (event) => {
|
|
if (event.data.type === "SELECT_FEATURE") {
|
|
onFeatureSelect(event.data.feature,true);
|
|
closePopup();
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
|
|
|
|
const renderDetailView = useCallback(
|
|
(props: any) => {
|
|
const map = gisMaps.current;
|
|
if (!map) {
|
|
console.warn("지도가 초기화되지 않았습니다.");
|
|
return;
|
|
}
|
|
|
|
const isFeature = props?.featureData;
|
|
if (typeof isFeature.getProperties === "function") {
|
|
if (
|
|
!(
|
|
Object.keys(isFeature?.getProperties()).length === 0 &&
|
|
isFeature.constructor === Object
|
|
)
|
|
) {
|
|
const layerNm = getSelectedLayers(isFeature,gisMaps);
|
|
const safeProps = isFeature.getProperties();
|
|
const featureCd = getFeatureCd(safeProps, String(layerNm));
|
|
if(layerNm)
|
|
featurePopUpOpen(layerNm,featureCd,popupDetailRef)
|
|
}
|
|
} else {
|
|
console.log(" data확인 필요");
|
|
}
|
|
},
|
|
[checkedLayers, checkedLayersData, featureData] // 필요 시 의존성 넣기
|
|
);
|
|
const closePopup = () => {
|
|
if (popupRef.current && !popupRef.current.closed) {
|
|
popupRef.current.close();
|
|
popupRef.current = null;
|
|
setIsOpen(false);
|
|
setFeatureData(null);
|
|
}
|
|
};
|
|
|
|
const onOpenPopup = (data: any) => {
|
|
if (data) {
|
|
setIsOpen(true);
|
|
setFeatureData(null);
|
|
const url = `/mapDetailPopUp?layerNm=${encodeURIComponent(data)}`;
|
|
const width = window.screen.availWidth;
|
|
const height = window.screen.availHeight;
|
|
const left = 0;
|
|
const top = 0;
|
|
const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=no`;
|
|
popupRef.current = window.open(url, "지도 레이어 팝업", popupOptions);
|
|
} else {
|
|
toast.error("시설 및 수요처가 선택되지 않았습니다.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-container">
|
|
<Gis
|
|
treeData={treeData}
|
|
isSearch={false}
|
|
gisMaps={gisMaps}
|
|
isMiniMap={false}
|
|
searchView={undefined}
|
|
detailView={renderDetailView}
|
|
onFeatureSelect={onFeatureSelect}
|
|
setIsOpen={setIsOpen}
|
|
setFeatureData={setFeatureData}
|
|
featureData={featureData}
|
|
setIsSearchModalOpen={setIsSearchModalOpen}
|
|
isOpen={isOpen}
|
|
isSearchModalOpen={isSearchModalOpen}
|
|
onCheckedLayersChange={handleCheckedLayersChange}
|
|
imgVisble={true}
|
|
searchBar={
|
|
<SearchBar
|
|
gisMaps={gisMaps}
|
|
facilityTypes={[
|
|
{ text: "하수처리시설", val: "tb_il_swage_prcs_fclt" },
|
|
{ text: "하수재이용시설", val: "tb_wr_bdst_ruse_fclt" },
|
|
{ text: "빗물이용시설", val: "tb_wr_rnwtr_utztn_fclt" },
|
|
{ text: "중수도시설", val: "tb_wr_rswtr_fclt" },
|
|
{ text: "온배수시설", val: "tb_wr_htdfl_fclt" },
|
|
{ text: "수요처", val: "tb_wr_ruse_fclt_dmd_co" },
|
|
{ text: "잠재수요처", val: "tb_wr_tmpr_dmd_co" },
|
|
]}
|
|
onFeatureFocus={onFeatureFocus}
|
|
/>
|
|
}
|
|
waterDepth={undefined}
|
|
onOpenPopup={(data: any) => {
|
|
onOpenPopup(data);
|
|
}}
|
|
defaultZoom={7.5}
|
|
defaultLonLat={[127.75, 36]}
|
|
/>
|
|
<Toaster position="top-center" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Map;
|