gis 원복
iipbs_wr / build (push) Waiting to run

This commit is contained in:
yschoi
2025-07-01 19:32:25 +09:00
parent 929290588b
commit 9cf281db7e
3 changed files with 31 additions and 67 deletions
@@ -1,6 +1,5 @@
import { Search } from 'lucide-react';
import OlMap from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import { defaults as defaultControls, OverviewMap } from 'ol/control';
import { defaults } from 'ol/interaction';
@@ -19,22 +18,7 @@ import GisApp from './lib/gis.core';
export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null });
export const useGisContext = () => useContext(GisContext);
function Gis({
isOpen,
gisMaps,
isSearchModalOpen,
treeData = [],
isSearch = false,
isMiniMap = false,
setIsOpen,
setFeatureData,
featureData,
searchView: SearchView,
detailView: DetailView,
onFeatureSelect,
setIsSearchModalOpen,
onCheckedLayersChange
}) {
function Gis({ isOpen, gisMaps, isSearchModalOpen, treeData = [], isSearch = false, isMiniMap = false, setIsOpen, setFeatureData, featureData, searchView: SearchView, detailView: DetailView, onFeatureSelect, setIsSearchModalOpen }) {
const mapRef = useRef();
const [mapObject, setMapObject] = useState({});
const [tabVisible, setTabVisible] = useState(true);
@@ -44,17 +28,13 @@ function Gis({
const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []);
const mapInstanceRef = useRef(null);
const checkedLayerIds = useRef([]);
// 체크된 레이어 상태 관리
const [checkedLayers, setCheckedLayers] = useState([]);
const [checkedLayersData, setCheckedLayersData] = useState([]);
let gisMap = null;
const closePopup = () => {
setIsOpen(false); // 팝업 닫기
setFeatureData(null)
};
// Feature Click Event
// SearchModal, GisContent 등에서 호출
const handleFeatureSelect = useCallback((data) => {
gisMap = mapInstanceRef.current;
@@ -109,10 +89,8 @@ function Gis({
setFeatureData(data);
setIsOpen(true);
setIsSearchModalOpen(false);
onFeatureSelect?.(data); // 선택된 피쳐 데이터 콜백 호출
}, [mapInstanceRef]);
// 지도 생성 및 초기화
useEffect(() => {
if (!mapRef.current) return;
if (mapInstanceRef.current) return; // 이미 생성된 맵이 있다면 중단
@@ -126,7 +104,7 @@ function Gis({
]);
register(proj4);
// OpenLayers 지도 객체 생성
//맵 생성
const map = new OlMap({
layers: [gisCore.baseLayers['base'], gisCore.baseLayers['satellite']],
renderer: 'webgl',
@@ -154,7 +132,7 @@ function Gis({
gisMaps.current = map
// 미니맵 추가
//미니맵
if (isMiniMap) {
const overviewMap = new OverviewMap({
layers: [GisApp.Module.core.baseMiniMapLayers['base']],
@@ -169,7 +147,6 @@ function Gis({
map.addControl(overviewMap);
}
// 스케일 컨트롤 및 베이스 레이어 설정
gisCore.__proto__.map = map;
gisCore.scaleControl();
gisCore.changeBaseLayer('base');
@@ -177,20 +154,16 @@ function Gis({
mapInstanceRef.current = map; // 생성 완료 플래그 설정
}, []);
// treeData 변경 시 레이어 코드 생성
useEffect(() => {
if (!treeData || treeData.length === 0) return;
// 기존 오버레이 및 레이어 모두 삭제
gisCore.deleteAllOverlay();
gisCore.deleteAllLayer();
// 트리 데이터를 레이어 코드 객체로 변환
const layerCode = gisCore.convertLayerInfosToLayerCode(treeData, 'lyrSn');
GisApp.layerCode = layerCode; // 전역 레이어 코드 설정
GisApp.layerCode = layerCode;
//setTreeData(data);
// 편집 가능한 레이어 목록 생성
const layerItems = getLayerItems(layerCode);
//setEditLayerItems(prev => [...layerItems])
}, [treeData]);
@@ -220,45 +193,31 @@ function Gis({
}
}
// 체크된 레이어 정보를 처리하는 함수
const handleCheckedLayersChange = useCallback((checkedIds, checkedNodesData) => {
setCheckedLayers(checkedIds);
setCheckedLayersData(checkedNodesData);
onCheckedLayersChange?.(checkedIds, checkedNodesData);
}, [onCheckedLayersChange]);
return (
<>
<GisContext.Provider value={{ gisCore, gisMap: mapInstanceRef.current, treeData, checkedLayerIds }}>
<div className="h-[calc(100vh-10rem)] flex relative">
<div ref={mapRef} className="gis-map flex-1 relative" style={{ height: '100%', padding: 0 }} />
<GisTree
visible={tabVisible}
setVisible={setTabVisible}
onCheckedChange={handleCheckedLayersChange}
/>
<GisTree visible={tabVisible} setVisible={setTabVisible} />
{/* <GisContent onFeatureSelect={handleFeatureSelect} isSearch={isSearch} isSearchModalOpen={isSearchModalOpen} setIsSearchModalOpen={setIsSearchModalOpen} /> */}
{/* DetailView가 존재할 때만 렌더링 isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
{/* isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
{isOpen && featureData && !isSearchModalOpen && (
<DetailView
featureData={featureData}
onClose={closePopup} // 닫기 콜백 전달
/>
)}
{/* SearchView가 존재할 때만 렌더링 */}
{SearchView && (
<SearchView
open={isSearchModalOpen}
onOpenChange={setIsSearchModalOpen}
onFeatureSelect={handleFeatureSelect}
onFeatureSelect={onFeatureSelect}
/>
)}
<GisLonLat />
<GisToolBar />
<GisMapToggle />
<GisSelect onFeatureSelect={handleFeatureSelect} />
<GisSelect onFeatureSelect={onFeatureSelect} />
</div>
{isSearch && (
@@ -1,24 +1,26 @@
import MousePosition from 'ol/control/MousePosition';
import ScaleLine from 'ol/control/ScaleLine';
import { getTopLeft } from 'ol/extent';
import Feature from 'ol/Feature';
import GeoSJON from 'ol/format/GeoJSON';
import WKT from 'ol/format/WKT';
import { Point } from 'ol/geom';
import LinearRing from 'ol/geom/LinearRing';
import Draw from 'ol/interaction/Draw';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import * as olProj from 'ol/proj';
import VectorSource from 'ol/source/Vector';
import TileWMTS from 'ol/source/WMTS';
import XYZ from 'ol/source/XYZ';
import GeoSJON from 'ol/format/GeoJSON';
import { Fill, Stroke, Style } from 'ol/style';
import CircleStyle from 'ol/style/Circle';
import VectorLayer from 'ol/layer/Vector';
import { Point } from 'ol/geom';
import { getTopLeft } from 'ol/extent';
import TileWMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
// import { get as getProjection } from 'ol/proj';
import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import olSourceImageWMS from 'ol/source/ImageWMS';
import { GeoJSON } from 'ol/format';
import GisOlEditLayer from './gis.edit';
import GisOlLayer from './gis.layer';
@@ -560,7 +562,6 @@ GisApp.core.prototype = {
*
* Returns:
*/
// 레이어를 지도에 표시/숨김
setLayerOnMap: function (layerIds, visible, addQurryFlter) {
for (let i in layerIds) {
let id = layerIds[i];
@@ -572,13 +573,9 @@ GisApp.core.prototype = {
const queryFlter = layerCode?.flterSql || '' + ' ' + (addQurryFlter || '');
layerCode['flterSql'] = queryFlter;
//layer = this.addWmsLayer(layerCode);
// WFS 레이어 생성 및 지도에 추가
layer = this.addWfsLayer(layerCode);
}
}
// 선택 인터랙션 및 스냅 기능 설정
if (GisApp.Module.select) {
this.setSelectInteraction();
}
@@ -77,7 +77,15 @@ GisOlLayer.prototype = {
let lyrTyNm = options.lyrTyNm;
let typename = this.storageNm + lyrTyNm;
if(options.lyrTyNm == "om_dt_untrt_swg_rain"){ //중점우수토실실
if(options.lyrTyNm == "om_dt_untrt_swg_rain" //중점우수토실
|| options.lyrTyNm == "om_wqlt_station" //관측소
|| options.lyrTyNm == "tb_wr_bdst_ruse_fclt" //재이용시설
|| options.lyrTyNm == "tb_wr_rnwtr_utztn_fclt" //빗물이용시설
|| options.lyrTyNm == "tb_wr_rswtr_fclt" //중수도시설
|| options.lyrTyNm == "tb_wr_htdfl_fclt" //온배수시설
|| options.lyrTyNm == "tb_wr_tmpr_dmd_co" //잠재수요처
)
{
url = GisApp.SN_GEOSERVER_URL;
typename = lyrTyNm;
}