From 9d77ff2fd26b04e17f436ba921c3158f593ee223 Mon Sep 17 00:00:00 2001 From: yschoi Date: Fri, 2 May 2025 15:20:55 +0900 Subject: [PATCH] =?UTF-8?q?=ED=94=BC=EC=B3=90=20=EC=A0=95=EB=B3=B4=20?= =?UTF-8?q?=EB=B0=98=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/map/Gis.js | 45 +++++++++---------- .../src/ui/map/GisSelect.js | 26 ++++++----- .../business_components/src/ui/map/GisTree.js | 4 +- .../src/ui/map/lib/gis.select.js | 1 + 4 files changed, 38 insertions(+), 38 deletions(-) diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index 2b5f9fc35..6baef1e6b 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/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 ( <> - +
- +
diff --git a/packages/common/business_components/src/ui/map/GisSelect.js b/packages/common/business_components/src/ui/map/GisSelect.js index ae4e15966..7d459a4c1 100644 --- a/packages/common/business_components/src/ui/map/GisSelect.js +++ b/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 ( <> {/*
diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js index 01a3fabc3..d01786187 100644 --- a/packages/common/business_components/src/ui/map/GisTree.js +++ b/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; diff --git a/packages/common/business_components/src/ui/map/lib/gis.select.js b/packages/common/business_components/src/ui/map/lib/gis.select.js index 973ae6f95..7f52ab2a3 100644 --- a/packages/common/business_components/src/ui/map/lib/gis.select.js +++ b/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];