From f9ea0d36ce56bda9a353c87d8c30b66a95bc2ffe Mon Sep 17 00:00:00 2001 From: yschoi Date: Thu, 24 Apr 2025 20:57:56 +0900 Subject: [PATCH] =?UTF-8?q?=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4=ED=8A=B8?= =?UTF-8?q?=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 피처 초기화