From 371be92a16db99ef4bdae80d102b229dd2dc6e77 Mon Sep 17 00:00:00 2001 From: thkim Date: Tue, 28 Oct 2025 14:50:23 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EC=A7=88=EB=8F=84=20=EB=B2=94?= =?UTF-8?q?=EB=A1=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../img/map-service/geology/index/ga01.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga02.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga03.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga04.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga05.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga06.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga07.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga08.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga09.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga10.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga11.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga12.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga13.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga14.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga15.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga16.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga17.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga18.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga19.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/ga20.gif | Bin 0 -> 84 bytes .../img/map-service/geology/index/txt_c.gif | Bin 0 -> 60 bytes .../img/map-service/geology/index/txt_pc.gif | Bin 0 -> 71 bytes src/main/webapp/js/map/main/map.js | 349 +++++++++++++++++- 23 files changed, 344 insertions(+), 5 deletions(-) create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga01.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga02.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga03.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga04.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga05.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga06.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga07.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga08.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga09.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga10.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga11.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga12.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga13.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga14.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga15.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga16.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga17.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga18.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga19.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/ga20.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/txt_c.gif create mode 100644 src/main/webapp/com/img/map-service/geology/index/txt_pc.gif diff --git a/src/main/webapp/com/img/map-service/geology/index/ga01.gif b/src/main/webapp/com/img/map-service/geology/index/ga01.gif new file mode 100644 index 0000000000000000000000000000000000000000..4dc8a2f12a77bf1e8bfa6e55308385ae527f3925 GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcLY|LYI~1B2pE79h#MpaUX6G7L=GE&VG`zvW*%XUnbb&G+{F l=5KrCG3{CBvR9|Jz2iRq$>;jF-siv0egDVLGmDGC8UT{aBK!aV literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga02.gif b/src/main/webapp/com/img/map-service/geology/index/ga02.gif new file mode 100644 index 0000000000000000000000000000000000000000..b18999ad8bf635a9e109099c1dbe66e118f6f2d7 GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcLY|E-mQfkE*n3y@@B&;b!383rcpmj0Ee-|{b>v*lLz=6id7 l^S3?nnD(r5*{f6A-f;jF-siv0egDVLGmDGC8UTbBBE|p! literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga04.gif b/src/main/webapp/com/img/map-service/geology/index/ga04.gif new file mode 100644 index 0000000000000000000000000000000000000000..d5ec62203c7053b94e3412e443965ad021936162 GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcLYf47c-fkE*n3y@@B&;b!383rcpmj0Ee-|{b>v*lLz=6id7 l^S3?nnD(r5*{f6A-f;jF-siv0egDVLGmDGC8UTmBBGdo? literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga06.gif b/src/main/webapp/com/img/map-service/geology/index/ga06.gif new file mode 100644 index 0000000000000000000000000000000000000000..04d5d40f3058bfe3313ef1193860c4ff8f20475e GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcLYHe(tC1B2pE79h#MpaUX6G7L=GE&VG`zvW*%XUnbb&G+{F l=5KrCG3{CBvR9|Jz2iRq$>;jF-siv0egDVLGmDGC8USgfB4q#o literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga07.gif b/src/main/webapp/com/img/map-service/geology/index/ga07.gif new file mode 100644 index 0000000000000000000000000000000000000000..28aa96d6b41bc9abe64848a505d3683b45ab26f3 GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcKtRy31=fkE*n3y@@B&;b!383rcpmj0Ee-|{b>v*lLz=6id7 l^S3?nnD(r5*{f6A-f;jF-siv0egDVLGmDGC8USyuB76V< literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga10.gif b/src/main/webapp/com/img/map-service/geology/index/ga10.gif new file mode 100644 index 0000000000000000000000000000000000000000..6d9be663db0b7ecb9dada8450e36b21fdd79fbed GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcJ4soKZDz@Ye(1xPY5=zs{23bCU^SwR4 l`P&|OOncV3?A57l@3@bD^11%4_xZ1L-~aLR%;I9O1^_l|A*}!a literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga11.gif b/src/main/webapp/com/img/map-service/geology/index/ga11.gif new file mode 100644 index 0000000000000000000000000000000000000000..6d9be663db0b7ecb9dada8450e36b21fdd79fbed GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcJ4soKZDz@Ye(1xPY5=zs{23bCU^SwR4 l`P&|OOncV3?A57l@3@bD^11%4_xZ1L-~aLR%;I9O1^_l|A*}!a literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga12.gif b/src/main/webapp/com/img/map-service/geology/index/ga12.gif new file mode 100644 index 0000000000000000000000000000000000000000..fc1d718f2547264465c6bd9916f226ae2796c02b GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcLIyYYj8fkE*n3y@@B&;b!383rcpmj0Ee-|{b>v*lLz=6id7 l^S3?nnD(r5*{f6A-fbCU^SwR4 l`P&|OOncV3?A57l@3@bD^11%4_xZ1L-~aLR%;I9O1^^*kAz%Oi literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga14.gif b/src/main/webapp/com/img/map-service/geology/index/ga14.gif new file mode 100644 index 0000000000000000000000000000000000000000..0e27e7816ea9b01f866c644f1e77497f58ea12bf GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcKtar6KK1B2pE79h#MpaUX6G7L=GE&VG`zvW*%XUnbb&G+{F l=5KrCG3{CBvR9|Jz2iRq$>;jF-siv0egDVLGmDGC8UT3nBAx&M literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga15.gif b/src/main/webapp/com/img/map-service/geology/index/ga15.gif new file mode 100644 index 0000000000000000000000000000000000000000..3aa674b7dcd844af8b632faba7bf79fa83704b70 GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcL2u*r;pfkE*n3y@@B&;b!383rcpmj0Ee-|{b>v*lLz=6id7 l^S3?nnD(r5*{f6A-fv*lLz=6id7 l^S3?nnD(r5*{f6A-fv*lLz=6id7 l^S3?nnD(r5*{f6A-fv*lLz=6id7 l^S3?nnD(r5*{f6A-f;jF-siv0egDVLGmDGC8USOvB2WMT literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/ga20.gif b/src/main/webapp/com/img/map-service/geology/index/ga20.gif new file mode 100644 index 0000000000000000000000000000000000000000..60ccd7543726983d4f5feb8bd6be49de1e22527a GIT binary patch literal 84 zcmZ?wbhEHbG-ps|XkcJCx1*1NfkE*n3y@@B&;b!383rcpmj0Ee-|{b>v*lLz=6id7 l^S3?nnD(r5*{f6A-f1}5R2#)Q>xxShM(=e11SGWGp& J6>mlcYXHn_5iS4# literal 0 HcmV?d00001 diff --git a/src/main/webapp/com/img/map-service/geology/index/txt_pc.gif b/src/main/webapp/com/img/map-service/geology/index/txt_pc.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e26d2f33cb1f25ce7f260ff8d685b8d68fc2e5a GIT binary patch literal 71 zcmZ?wbhEHb6lCCHXkcJ)aB%ql|G(l-76uT|0TCb>1}3={*_rIO_#Q`x+?15tXLI|s V&Y2yd^UJ3_YtLL>tij4)4FI9n75V@G literal 0 HcmV?d00001 diff --git a/src/main/webapp/js/map/main/map.js b/src/main/webapp/js/map/main/map.js index 476e1d4a..043004aa 100644 --- a/src/main/webapp/js/map/main/map.js +++ b/src/main/webapp/js/map/main/map.js @@ -435,6 +435,224 @@ var geologyLayers = { }; var geologyLayersKey = null; // 지질 광산 layer명 +var geologyLegendPopup = null; // 지질도 범례 팝업 객체를 저장할 변수 + +//사용자가 제공한 범례 HTML (템플릿 리터럴로 저장) +//Iframe에 맞도록 bodyClass의 width를 760px에서 98%로 수정 +var GEOLOGY_LEGEND_HTML = ` + + + + + 암상시대별 색상 + + + +
+
+

암상시대별 색상

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
코드번호시대명시대기호기본색
GA01제4기(Quaternary)충적층
(Alluvium)		Qa 제4기 충적층 RGB 기본색
GA02홍적층
(Diluvium)		Qd 제4기 홍적층 RGB 기본색
GA03신제3기
(Neogene)
N2신제3기 RGB 기본색
GA04고제3기
(Paleogene)		PG고제3기 RGB 기본색
GA05백악기
(Cretaceous)
K 백악기 RGB 기본색
GA06쥬라기
(Jurassic)		J쥬라기 RGB 기본색
GA07삼첩기
(Triassic)		T 삼첩기 RGB 기본색
GA08페름기
(Permian)		P폐름기 RGB 기본색
GA09석탄기
(Carboniferous)		C석탄기 RGB 기본색
GA10데본기
(Devonian)		D데본기 RGB 기본색
GA11사일루리아기
(Silurian)		S사일루리아기 RGB 기본색
GA12오도비스기
(Ordovician)		O오도비스기 RGB 기본색
GA13캠브리아기
(Cambrian)		C캠브리아기 RGB 기본색
GA14원생대
(Proterozoic)		PRgrPR,
PC		원생대 PRgr RGB 기본색
GA15PR3원생대 PR3 RGB 기본색
GA16PR2원생대 PR2 RGB 기본색
GA17PR1원생대 PR1 RGB 기본색
GA18시생대
(Archean)		AR3AR,
PC		시생대 AR3 RGB 기본색
GA19AR2시생대 AR2 RGB 기본색
GA20AR1시생대 AR1 RGB 기본색
+
+
+
+ + +`; + + + + function initApp(param){ // --------------------- // 지도 생성 @@ -5066,8 +5284,113 @@ function showSichuInfo2(){ } +/** + * 지질도 범례 팝업이 열려있으면 닫습니다. + */ +function removeGeologyLegend() { + // 팝업 드래그 이벤트를 해제합니다. + $(document).off('mousemove.legendPopup').off('mouseup.legendPopup'); + + // 팝업 DOM을 제거합니다. + if (geologyLegendPopup) { + geologyLegendPopup.remove(); + geologyLegendPopup = null; + } +} +/** + * WMS 지질도 범례를 드래그 가능한 모달로 띄웁니다. + * (Iframe을 사용하여 외부 CSS/HTML 충돌을 방지합니다) + */ +function showGeologyLegend() { + // 1. 기존 팝업이 있다면 제거합니다. + removeGeologyLegend(); + + // 2. 모달의 기본 HTML 구조를 정의합니다. + var popupHtml = + ''; + + // 3. HTML을 body에 추가하고 jQuery 객체 참조를 저장합니다. + $('body').append(popupHtml); + geologyLegendPopup = $('#geologyLegendPopup'); // 전역 변수에 할당 + var iframeContainer = $('#legendIframeContainer'); + + // 4. Iframe을 생성하고 설정합니다. + var iframe = document.createElement('iframe'); + iframe.style.width = '100%'; + iframe.style.height = '500px'; // 모달 내용물의 높이 + iframe.style.border = 'none'; + iframe.setAttribute('frameborder', '0'); // 구형 브라우저 호환 + + // 5. Iframe을 모달 컨테이너에 추가합니다. + iframeContainer.append(iframe); + + // 6. Iframe 내부에 범례 HTML을 동적으로 씁니다. + // (CSS/HTML 격리를 위해 이 방식이 가장 안전합니다) + try { + var doc = iframe.contentWindow || iframe.contentDocument; + if (doc.document) doc = doc.document; + + doc.open(); + doc.write(GEOLOGY_LEGEND_HTML); // 위에서 정의한 HTML 변수 사용 + doc.close(); + } catch (e) { + console.error("범례 Iframe에 내용을 쓰는 데 실패했습니다:", e); + } + + // 7. 모달의 초기 위치를 화면 중앙으로 설정합니다. + var popupWidth = geologyLegendPopup.outerWidth(); + var popupHeight = geologyLegendPopup.outerHeight(); + var initialTop = Math.max(20, ($(window).height() - popupHeight) / 2); + var initialLeft = Math.max(20, ($(window).width() - popupWidth) / 2); + + geologyLegendPopup.css({ + top: initialTop + 'px', + left: initialLeft + 'px', + visibility: 'visible' // 이제 보이도록 설정 + }); + + // 8. 드래그 이벤트를 구현합니다. (geologyMine 함수와 동일한 로직) + var isDragging = false; + var offset = { x: 0, y: 0 }; + var header = geologyLegendPopup.find('.popup-header'); + + header.on('mousedown', function(e) { + isDragging = true; + var popupPos = geologyLegendPopup.offset(); + offset.x = e.pageX - popupPos.left; + offset.y = e.pageY - popupPos.top; + e.preventDefault(); + }); + + // 이벤트 이름에 .legendPopup 네임스페이스를 지정하여 다른 드래그와 충돌 방지 + $(document).on('mousemove.legendPopup', function(e) { + if (isDragging) { + geologyLegendPopup.offset({ + top: e.pageY - offset.y, + left: e.pageX - offset.x + }); + } + }); + + $(document).on('mouseup.legendPopup', function() { + isDragging = false; + }); + + // 9. 닫기 버튼 이벤트를 설정합니다. + $('#closeLegendPopupBtn').on('click', function() { + removeGeologyLegend(); + }); +} + -//기존 geologyMode 함수를 지우고 아래의 코드로 교체하세요. function geologyMode() { initControl(); // 다른 컨트롤 상태 초기화 @@ -5086,15 +5409,17 @@ function geologyMode() { GEOLOGY_LAYER.setVisibility(false); CTL_INFO.setText("지질 Off"); CTL_INFO.deactivate(); // 정보창도 비활성화 + + removeGeologyLegend(); // 지질도를 끌 때 범례도 닫습니다. + } else { // 레이어가 현재 숨겨져 있다면, // 1. 표시할 기본 지질도 키를 설정합니다. - geologyLayersKey = "지질도_25만_지질도"; + geologyLayersKey = "지질도_25만_지질도"; var wmsLayerName = geologyLayers[geologyLayersKey]; if (wmsLayerName) { // 2. 정규표현식을 사용하여 URL에서 'LAYERS=' 파라미터의 값만 교체합니다. - // (광산 뷰에서 다른 레이어로 변경되었을 수 있으므로 항상 기본값으로 재설정) var newUrl = GEOLOGY_LAYER.url.replace(/(LAYERS=)([^&]*)/, '$1' + wmsLayerName); // 3. 레이어 객체의 url 속성을 직접 변경합니다. @@ -5104,18 +5429,32 @@ function geologyMode() { GEOLOGY_LAYER.setVisibility(true); GEOLOGY_LAYER.redraw(true); - // 5. 정보창 텍스트를 업데이트합니다. + // 5. 정보창 텍스트 및 버튼을 업데이트합니다. + + // '범례 보기' 버튼 HTML 정의 (이전 단계에서 수정한 내용) + var legendButtonHtml = '
' + + '범례 보기
'; + + // CTL_INFO의 infoDiv가 내부 요소를 absolute 포지셔닝할 수 있도록 'relative'로 설정 + $(CTL_INFO.infoDiv).css("position", "relative"); + + // CTL_INFO 텍스트 설정 시 버튼 HTML을 함께 삽입 + //CTL_INFO.setText("지질 On" + legendButtonHtml); CTL_INFO.setText("지질 On"); CTL_INFO.activate(); + showGeologyLegend(); $("#CTL_INFO").css("bottom", "65px"); $("#CTL_INFO").css("left", "20px"); + } else { console.error("기본 지질도 레이어를 찾을 수 없습니다:", geologyLayersKey); } } } - function geologyMine() { initControl(); // 다른 컨트롤 상태 초기화