From f9ea0d36ce56bda9a353c87d8c30b66a95bc2ffe Mon Sep 17 00:00:00 2001 From: yschoi Date: Thu, 24 Apr 2025 20:57:56 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/map/Gis.js | 18 ++++---- .../src/ui/map/GisContent.js | 24 +++++----- .../business_components/src/ui/map/GisEdit.js | 12 ++--- .../src/ui/map/GisSelect.js | 8 ++-- .../business_components/src/ui/map/GisTree.js | 21 +++------ .../src/ui/map/lib/css/gis.common.css | 6 +-- .../src/ui/map/lib/gis.select.js | 44 +++++++++++++++---- 7 files changed, 77 insertions(+), 56 deletions(-) diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index d0fbefe2a..7c625a928 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -21,7 +21,6 @@ export const useGisContext = () => useContext(GisContext); function Gis({ treeData = [] }) { const mapRef = useRef(); - const overviewMapRef = useRef(null); const [mapObject, setMapObject] = useState({}); const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []); //const [treeData, setTreeData] = useState([]); @@ -134,22 +133,23 @@ function Gis({ treeData = [] }) {
- - 레이어 - 시설검색 + + 레이어 + 시설검색 - + - +
- - - + + + +
diff --git a/packages/common/business_components/src/ui/map/GisContent.js b/packages/common/business_components/src/ui/map/GisContent.js index 2179a53d8..e58efcaad 100644 --- a/packages/common/business_components/src/ui/map/GisContent.js +++ b/packages/common/business_components/src/ui/map/GisContent.js @@ -6,7 +6,7 @@ import GisSelect from './GisSelect'; import GisToolBar from './GisToolBar'; import './lib/css/gis.edit.css'; import MapToggleBtn from './MapToggleBtn'; -//import GisEdit from './GisEdit'; +import GisEdit from './GisEdit'; export default function GisContent({ edit = false }) { const { gisMap, gisCore } = useGisContext(); @@ -15,14 +15,14 @@ export default function GisContent({ edit = false }) { const [playShow, setPlayShow] = useState({ show: false }); //셀렉트 버튼 이벤트 - const clickFeature = useCallback(feature => { - if (feature) { - const layer = feature.getLayer(); - setVisibleComponents(prevState => ({ - ...prevState, - })); - } - }, []); + // const clickFeature = useCallback(feature => { + // if (feature) { + // const layer = feature.getLayer(); + // setVisibleComponents(prevState => ({ + // ...prevState, + // })); + // } + // }, []); const selectRslt = useCallback(feature => { GisApp.Module.layer.highLightFeature( @@ -52,9 +52,9 @@ export default function GisContent({ edit = false }) { <> {/**/} {/* */} - - - + {/* { */} + {/* */} + {/* {edit && } */} ); diff --git a/packages/common/business_components/src/ui/map/GisEdit.js b/packages/common/business_components/src/ui/map/GisEdit.js index 7c961c865..dcf51545e 100644 --- a/packages/common/business_components/src/ui/map/GisEdit.js +++ b/packages/common/business_components/src/ui/map/GisEdit.js @@ -1,9 +1,9 @@ import GisApp from './lib/gis.core'; import React, { useContext, useEffect, useRef, useState } from 'react'; import { GisContext, setTree } from './Gis'; -import Button from '../button/Button'; +import { Button } from "@common/components"; import { gAlert, gConfirm } from './lib/util'; -import { fclApi } from '../../js/apis/fcl/fclApi'; +// import { fclApi } from '../../js/apis/fcl/fclApi'; export default React.memo(function GisEdit() { const { editLayerItems = [], siteSn, locgovCd, checkedLayerIds } = useContext(GisContext); @@ -96,10 +96,10 @@ export default React.memo(function GisEdit() { return; } if (!gConfirm('CONFIRM', 'SAVE_QUEST')) return false; - const result = await fclApi.saveEditFeatures(editFeatures); - if (result.code === 200) { - editModule.clearUndoRedo(); - } + // const result = await fclApi.saveEditFeatures(editFeatures); + // if (result.code === 200) { + // editModule.clearUndoRedo(); + // } }; useEffect(() => { diff --git a/packages/common/business_components/src/ui/map/GisSelect.js b/packages/common/business_components/src/ui/map/GisSelect.js index 85354d8b5..ae4e15966 100644 --- a/packages/common/business_components/src/ui/map/GisSelect.js +++ b/packages/common/business_components/src/ui/map/GisSelect.js @@ -3,7 +3,7 @@ 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({ clickFeature }) { +export default React.memo(function GisSelect() { const { gisMap } = useContext(GisContext); const select = new GisOlSelect(gisMap); GisApp.Module.select = select; @@ -12,11 +12,11 @@ export default React.memo(function GisSelect({ clickFeature }) { }; select.getSelectedInfo(function (features) { - clickFeature(features[0]); + //clickFeature(features[0]); }); return ( <> -
+ {/*

선,면,다각형을 이용한 시설물 선택 영역

  • @@ -30,7 +30,7 @@ export default React.memo(function GisSelect({ clickFeature }) {
-
+
*/} ); }); diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js index 487e8bfec..2e9d6f9c0 100644 --- a/packages/common/business_components/src/ui/map/GisTree.js +++ b/packages/common/business_components/src/ui/map/GisTree.js @@ -23,7 +23,6 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes setNodes(nodeData); gisCore.setAllLayersOnMap(false); } - console.log(treeData) }, [treeData]); useEffect(() => { @@ -37,7 +36,6 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes setExpanded(defaultExpanded); gisCore.setLayerOnMap(defaultChecked, true); } - console.log(nodes) }, [nodes]); const getDefaultCheckedNodes = (nodes, values = []) => { @@ -113,7 +111,7 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes parent: item.upperLyrSn, droppable: !!item.children, data: item, - icon: src ? {item.lyrNm} : '', + icon: src ? {item.lyrNm} : '', }; }); }; @@ -208,18 +206,13 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes style={{ marginInlineStart: depth * 16 + (!node.droppable ? 16 : 0) }} > {node.droppable && ( - + + )} - handleCheck(node.id)} - className="cursor-pointer" - /> - {node.icon && {node.icon}} - {node.text} + handleCheck(node.id)} className="cursor-pointer"/> + {node.icon && {node.icon}} + {node.text} )} sort={(a, b) => { diff --git a/packages/common/business_components/src/ui/map/lib/css/gis.common.css b/packages/common/business_components/src/ui/map/lib/css/gis.common.css index de98d8a9b..190a98e2e 100644 --- a/packages/common/business_components/src/ui/map/lib/css/gis.common.css +++ b/packages/common/business_components/src/ui/map/lib/css/gis.common.css @@ -102,7 +102,7 @@ .tool-bar { position: absolute; - top: 140px; + top: 70px; right: 20px; z-index: 2; } @@ -244,7 +244,7 @@ background: url(../images/toolbar/btn_cont_zoomin_on.png) no-repeat center #67aee3; } .btn_control_zoomout { - background: url(../images/toolbar/btn_cont_zoomout.png) no-repeat center !important; + background: url(../images/toolbar/btn_cont_zoomout.png) no-repeat center; } .btn_control_zoomout:hover { background: url(../images/toolbar/btn_cont_zoomout_on.png) no-repeat center #67aee3; @@ -346,7 +346,7 @@ .select_control { position: absolute; top: 80px; - left: 250px; + left: 450px; } .select_control h3 { overflow: hidden; 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 d48c67a5e..973ae6f95 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 @@ -48,19 +48,31 @@ GisOlSelect.prototype = { this.removeInteration(); } let baseStyle = new Style({ - stroke: new Stroke({ - color: 'rgba(135, 116, 243, 0.4)', - width: 10, + image : new CircleStyle({ + fill : new Fill({ + color : 'rgba(135, 116, 243, 0.4)', + }), + radius : 30 }), + stroke : new Stroke({ + color : 'rgba(135, 116, 243, 0.4)', + width : 10, + }) }); this.selectInteraction = new Select({ - style: function (feature) { + style: function (feature, resolution) { let styles = []; let layer = feature.getLayer(); - let style = GisApp.Module.style.getLayerStyle(layer, null); - if (style) { - styles.push(style); + let styleFn = GisApp.Module.style.getLayerStyleFunction(layer, null); + + if (styleFn) { + const style = styleFn(feature, resolution); + if (Array.isArray(style)) { + styles.push(...style); + } else { + styles.push(style); + } } styles.push(baseStyle); return styles; @@ -72,9 +84,25 @@ GisOlSelect.prototype = { condition: click, hitTolerance: me.defaults.hitTolerance, }); - map.addInteraction(this.selectInteraction); + map.addInteraction(this.selectInteraction); this.selectedFeatures = this.selectInteraction.getFeatures(); + + // 선택된 피처 중심으로 지도 이동 + this.selectInteraction.on('select', function (e) { + const feature = e.selected[0]; + if (feature) { + const geometry = feature.getGeometry(); + if (geometry) { + const extent = geometry.getExtent(); + map.getView().fit(extent, { + duration: 300, + padding: [50, 50, 50, 50], + maxZoom: 16 + }); + } + } + }); }, /** * SELECT 피처 초기화 From 81afc9f3413a3dd92515566c0e1bf361274e911d Mon Sep 17 00:00:00 2001 From: yschoi Date: Fri, 25 Apr 2025 16:12:09 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=ED=83=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=20=EB=B6=84=EB=A6=AC/=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/map/page.tsx | 2 +- .../business_components/src/ui/map/Gis.js | 26 ++----- .../business_components/src/ui/map/GisTab.js | 67 +++++++++++++++++++ .../business_components/src/ui/map/GisTree.js | 16 ----- .../src/ui/map/lib/css/gis.common.css | 2 - 5 files changed, 74 insertions(+), 39 deletions(-) create mode 100644 packages/common/business_components/src/ui/map/GisTab.js diff --git a/apps/sn/app/map/page.tsx b/apps/sn/app/map/page.tsx index 4dbb90c49..bd8feb360 100644 --- a/apps/sn/app/map/page.tsx +++ b/apps/sn/app/map/page.tsx @@ -27,7 +27,7 @@ const Map = () => { return (
- +
); }; diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index 7c625a928..2b5f9fc35 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -10,18 +10,18 @@ import proj4 from 'proj4'; import { register } from 'ol/proj/proj4'; import GisApp from './lib/gis.core'; import GisContent from './GisContent'; -import GisTree from './GisTree'; import GisLonLat from './GisLonLat'; import GisToolBar from './GisToolBar'; -import GisSearch from './GisSearch'; +import GisTab from './GisTab'; import MapToggleBtn from './MapToggleBtn'; export const GisContext = createContext({gisCore: null, gisMap: null, treeData:null, checkedLayerIds:null}); export const useGisContext = () => useContext(GisContext); -function Gis({ treeData = [] }) { +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([]); @@ -125,34 +125,20 @@ function Gis({ treeData = [] }) { } } - const [isSidebarOpen, setIsSidebarOpen] = useState(true); return ( + <> - <>
-
- - - 레이어 - 시설검색 - - - - - - - - -
+
- + ); } diff --git a/packages/common/business_components/src/ui/map/GisTab.js b/packages/common/business_components/src/ui/map/GisTab.js new file mode 100644 index 000000000..baf268879 --- /dev/null +++ b/packages/common/business_components/src/ui/map/GisTab.js @@ -0,0 +1,67 @@ +import React, { useState } from 'react'; +import { Tabs, TabsList, TabsTrigger } from '@common/components/ui/tabs'; +import GisTree from './GisTree'; +import GisSearch from './GisSearch'; +import { ChevronLeft, ChevronRight } from 'lucide-react'; + +function GisTab({ visible, setVisible, isSearch }) { + const [activeTab, setActiveTab] = useState('layers'); + + return ( + <> +
+ + + 레이어 + {isSearch && ( + 검색 + )} + + + {/* GisTree는 항상 마운트되며, 탭 상태에 따라 보여주기만 함 */} +
+ +
+ + {/* GisSearch도 동일하게 처리 */} + {isSearch && ( +
+ +
+ )} + + + {/* 접기 버튼 */} + +
+ + {/* 열기 버튼 */} + {!visible && ( + + )} + + ); +} + +export default React.memo(GisTab); diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js index 2e9d6f9c0..01a3fabc3 100644 --- a/packages/common/business_components/src/ui/map/GisTree.js +++ b/packages/common/business_components/src/ui/map/GisTree.js @@ -116,22 +116,6 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes }); }; - const findUpLyrId = (nodes, targetLyrId) => { - for (let i = 0; i < nodes.length; i++) { - const node = nodes[i]; - if (node.data && node.data.lyrSn === targetLyrId) { - return node.data.upperLyrSn; - } - if (node.children) { - const upLyrId = findUpLyrId(node.children, targetLyrId); - if (upLyrId) { - return upLyrId; - } - } - } - return null; - }; - const makeLegendSrc = layerinfo => { if(!layerinfo.gobjTy) return null; diff --git a/packages/common/business_components/src/ui/map/lib/css/gis.common.css b/packages/common/business_components/src/ui/map/lib/css/gis.common.css index 190a98e2e..e479fc501 100644 --- a/packages/common/business_components/src/ui/map/lib/css/gis.common.css +++ b/packages/common/business_components/src/ui/map/lib/css/gis.common.css @@ -759,8 +759,6 @@ .puGrayTb { position: relative; width: 98.3%; - cellpadding: 0; - cellspcing: 0; margin-top: 5px; table-layout: fixed; font-family: Verdana;