피쳐 정보 반환

packages/common/business_components/src/ui/map/Gis.js

@@ -12,21 +12,20 @@ import GisApp from './lib/gis.core';
 import GisContent from './GisContent';
 import GisLonLat from './GisLonLat';
 import GisToolBar from './GisToolBar';
+import GisSelect from './GisSelect';
 import GisTab from './GisTab';
 import MapToggleBtn from './MapToggleBtn';
 
-export const GisContext = createContext({gisCore: null, gisMap: null, treeData:null, checkedLayerIds:null});
+export const GisContext = createContext({gisCore: null, gisMap: null, treeData:null});
 export const useGisContext = () => useContext(GisContext);
 
 function Gis({ treeData = [], isSearch = false }) {
 	const mapRef = useRef();
-	const [mapObject, setMapObject] = useState({});
-	const [tabVisible, setTabVisible] = useState(true);
 	const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []);
-	//const [treeData, setTreeData] = useState([]);
-	const checkedLayerIds = useRef([]);
-	let gisMap = null;
+	const [tabVisible, setTabVisible] = useState(true);
+	const [gisMap, setGisMap] = useState(null);
 
+	//맵 생성 및 컨트롤 추가
 	useEffect(() => {
 		if (!mapRef.current) return;
 
@@ -39,7 +38,7 @@ function Gis({ treeData = [], isSearch = false }) {
 		]);
 		register(proj4);
 		
-		//맵 생성성
+		//맵 생성
 		const map = new OlMap({
 			layers: [gisCore.baseLayers['base'], gisCore.baseLayers['satellite']],
 			renderer: 'webgl',
@@ -65,7 +64,7 @@ function Gis({ treeData = [], isSearch = false }) {
 			}),
 		});
 		
-		//미니맵
+		//미니맵 생성
 		const overviewMap = new OverviewMap({
 			layers: [GisApp.Module.core.baseMiniMapLayers['base']],
 			view: new View({
@@ -76,17 +75,17 @@ function Gis({ treeData = [], isSearch = false }) {
 			collapseLabel: '\u00BB',
 			label: '\u00AB',
 		});
-
 		map.addControl(overviewMap);
 		gisCore.__proto__.map = map;
-
+		//스케일 생성
 		gisCore.scaleControl();
+		//배경지도 설정
 		gisCore.changeBaseLayer('base');
-		setMapObject({ map: map });
+		setGisMap(map);
 	}, []);
 
+	// 레이어 정보 설정
 	useEffect(() => {
-		//if (!locgovCd) return null;
 		if (!treeData || treeData.length === 0) return;
 
 		gisCore.deleteAllOverlay();
@@ -96,13 +95,13 @@ function Gis({ treeData = [], isSearch = false }) {
 		GisApp.layerCode = layerCode;
 		
 		//setTreeData(data);
-		const layerItems = getLayerItems(layerCode);
+		//const layerItems = getLayerItems(layerCode);
 		//setEditLayerItems(prev => [...layerItems]);
 	}, [treeData]);
 
+	//레이어 정렬
 	const getLayerItems= (layerCode) => {
 		const layerItems = Object.entries(layerCode)
-			.filter(([key, obj], idx) => obj?.updtPsblYn === 'Y')
 			.map(([key, obj]) => ({
 				...obj,
 				name: obj.lyrNm,
@@ -117,25 +116,23 @@ function Gis({ treeData = [], isSearch = false }) {
 		return layerItems;
 	};
 
-	if (mapObject.map) {
-		try {
-			gisMap = mapObject.map;
-		} catch (e) {
-			console.error('오류 발생:', e); // 시큐어코딩 관련 수정 : 오류 정보를 로그로 출력
-		}
-	}
-
+	//피쳐 클릭 이벤트 핸들러
+	const handleFeatureClick = useCallback((feature) => {
+		console.log('Gis.js: 피처 클릭됨:', feature.getId());
+		console.log('Gis.js: 피처 클릭됨:', feature.getProperties());
+		//우측 피쳐 상세 팝업 호출
+	}, []);
 
 	return (
 		<>
-		<GisContext.Provider value={{gisCore, gisMap, treeData, checkedLayerIds}}>
+		<GisContext.Provider value={{gisCore, gisMap, treeData}}>
 			<div className="h-[calc(100vh-10rem)] flex relative">
 				<GisTab visible={tabVisible} setVisible={setTabVisible} isSearch={isSearch} />
 				<div ref={mapRef} className="gis-map flex-1 relative" style={{ height: '100%', padding: 0 }} />
 				<GisLonLat/>
 				<GisToolBar/>
 				<MapToggleBtn/>
-				<GisContent/>
+				<GisSelect onFeatureClick = {handleFeatureClick} />
 			</div>
 		</GisContext.Provider>
 		</>

packages/common/business_components/src/ui/map/GisSelect.js

@@ -1,19 +1,23 @@
-import React from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import GisApp from './lib/gis.core';
 import GisOlSelect from './lib/gis.select';
-import { useContext } from 'react';
 import { GisContext } from './Gis';
-export default React.memo(function GisSelect() {
+export default React.memo(function GisSelect({onFeatureClick}) {
 	const { gisMap } = useContext(GisContext);
-	const select = new GisOlSelect(gisMap);
-	GisApp.Module.select = select;
-	const reset = () => {
-		select.reset();
-	};
+	
+	useEffect(() => {
+		if (!gisMap) return; // 아직 초기화 안 됐으면 아무것도 안 함
+	  
+		const select = new GisOlSelect(gisMap);
+		GisApp.Module.select = select;
+	  
+		select.getSelectedInfo(function (features) {
+			if (features?.[0]) {
+				onFeatureClick?.(features[0]); // props로 넘긴 함수 실행
+			}
+		});
+	  }, [gisMap, onFeatureClick]);
 
-	select.getSelectedInfo(function (features) {
-		//clickFeature(features[0]);
-	});
 	return (
 		<>
 			{/* <div className="select_control map_control_div ol-unselectable ol-control" style={{ pointerEvents: 'auto', zIndex: '1' }}>

packages/common/business_components/src/ui/map/GisTree.js

@@ -11,7 +11,7 @@ import {
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@common/components/ui/tabs";
 
 export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes = () => {} }) {
-	const { gisCore, treeData, checkedLayerIds } = useGisContext();
+	const { gisCore, treeData } = useGisContext();
 	const [checked, setChecked] = useState([]);
 	const [expanded, setExpanded] = useState([]);
 	const [nodes, setNodes] = useState([]);
@@ -43,7 +43,6 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 			const node = nodes[i];
 			if (node.data.initEprssYn === 'Y') {
 				values.push(node.data.lyrSn);
-				checkedLayerIds?.current.push(node.data.lyrSn + '');
 			}
 		}
 		return values;
@@ -94,7 +93,6 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 			}
 			const allIds = nodes.map((n) => n.id);
 			const unchecked = allIds.filter((nid) => !newChecked.includes(nid));
-			checkedLayerIds.current = newChecked;
 			gisCore.setLayerOnMap(newChecked, true);
 			gisCore.setLayerOnMap(unchecked, false);
 			return newChecked;

packages/common/business_components/src/ui/map/lib/gis.select.js

@@ -345,6 +345,7 @@ GisOlSelect.prototype = {
 		this.selectInteraction.on('select', function (e) {
 			if (!e.auto) {
 				let features = me.selectInteraction.getFeatures();
+				if(features.getArray().length == 0) return;
 				let layers = [];
 				for (let i in features.array_) {
 					let feature = features.array_[0];