feat: 지도에서 지도구분 문구 클릭 시 전체 CALS 해제 또는 선택되도록 구현

main
thkim 2025-12-09 11:12:31 +09:00
parent 1a3f94524c
commit 9bde6258f7
3 changed files with 254 additions and 104 deletions

View File

@ -33,11 +33,16 @@
$(".report_menu_pdf_button");
} else {
$(".report_menu_save_button").hide();
$(".report_menu_pdf_button").hide();
//$(".report_menu_pdf_button").hide();
}
$(".report_menu_excel_button").hide();
//$(".report_menu_excel_button").hide();
$(".report_menu_hwp_button").hide();
$(".report_menu_print_button").hide();
report.pdfDownLoad();
report.excelDownLoad();
}
</script>
</head>

View File

@ -1372,7 +1372,7 @@ function table3display(){
}
</script>
<div class="map-division-wrapper">
<div class="map-division-title" onclick="forceUncheckHoleLayerOnOff();">
<div class="map-division-title" id="map-label-cals" onclick="forceUncheckHoleLayerOnOff();" style="cursor: pointer;">
지도구분
</div>
<div class="map-division-contents">
@ -1674,34 +1674,40 @@ function table3display(){
</label>
</li>
<li>
<input id="geology-mode" name="geology-mode" type="checkbox" value="checkbox" onclick="geologyMode();">
<label for="geology-mode">
<span class="folder">지질정보</span>
</label>
<input id="geology-mode" name="geology-group" type="radio" value="geology-mode" onclick="geologyMode();">
<label for="geology-mode">
<span class="folder">지질정보</span>
</label>
</li>
<li>
<input id="geology-mine" name="geology-mine" type="checkbox" value="checkbox" onclick="geologyMine();">
<label for="geology-mine">
<span class="folder">광산정보</span>
</label>
<input id="geology-mine" name="geology-group" type="radio" value="geology-mine" onclick="geologyMine();">
<label for="geology-mine">
<span class="folder">광산정보</span>
</label>
</li>
<li>
<input id="geology-well" name="geology-well" type="checkbox" value="checkbox" onclick="geologyWell();">
<label for="geology-well">
<span class="folder">관정정보</span>
</label>
<input id="geology-well" name="geology-group" type="radio" value="geology-well" onclick="geologyWell();">
<label for="geology-well">
<span class="folder">관정정보</span>
</label>
</li>
<li>
<input id="geology-steep-slope" name="geology-steep-slope" type="checkbox" value="checkbox" onclick="geologySteepSlope();">
<label for="geology-steep-slope">
<span class="folder">급경사지정보</span>
</label>
<input id="geology-steep-slope" name="geology-group" type="radio" value="geology-steep-slope" onclick="geologySteepSlope();">
<label for="geology-steep-slope">
<span class="folder">급경사지정보</span>
</label>
</li>
<li>
<input id="geology-resistivity-survey" name="geology-steep-slope" type="checkbox" value="checkbox" onclick="geologyResistivitySurvey();">
<label for="geology-resistivity-survey">
<span class="folder">물리탐사</span>
</label>
<input id="geology-resistivity-survey" name="geology-group" type="radio" value="geology-resistivity-survey" onclick="geologyResistivitySurvey();">
<label for="geology-resistivity-survey">
<span class="folder">물리탐사(전기비저항)</span>
</label>
</li>
<li>
<input id="geology-resistivity-survey2" name="geology-group" type="radio" value="geology-resistivity-survey2" onclick="geologyRefractionSurvey();">
<label for="geology-resistivity-survey2">
<span class="folder">물리탐사(굴절탄성파)</span>
</label>
</li>
</ul>
</li>

View File

@ -28,9 +28,8 @@ function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function removeClassOverlayLayer(targetEleId) {
function myRemoveClass(targetEleId, toggleClass) {
var targetBtn = document.getElementById(targetEleId);
var toggleClass = 'active';
if (!targetBtn) {
console.error(targetEleId + " 버튼이 존재하지 않습니다.");
@ -43,12 +42,11 @@ function removeClassOverlayLayer(targetEleId) {
}
}
function addClassOverlayLayer(targetEleId) {
function myAddClass(targetEleId, toggleClass) {
var targetBtn = document.getElementById(targetEleId);
var toggleClass = 'active';
if (!targetBtn) {
console.error(targetEleId + " 버튼이 존재하지 않습니다.");
//console.error(targetEleId + " 버튼이 존재하지 않습니다.");
return;
}
targetBtn.className += " " + toggleClass;
@ -259,6 +257,80 @@ OpenLayers.Control.DragPopup = OpenLayers.Class(OpenLayers.Control, {
CLASS_NAME: "OpenLayers.Control.DragPopup"
});
/**
* 광산 정보 모달 표시 함수
* @param {String} title 제목
* @param {String} content 내용 (HTML 태그 사용 가능)
* @param {Function} onCloseCallback 닫기 버튼 클릭 실행될 콜백 함수
*/
function showMineInfoModal(title, content, onCloseCallback) {
// 이미 열려있는 모달이 있다면 제거
if ($('#mineInfoModal').length > 0) {
$('#mineInfoModal').remove();
}
// 모달 HTML 생성 (스타일은 지질도 팝업과 유사하게 맞춤)
var popupHtml =
'<div id="mineInfoModal" style="position: absolute; width: 400px; z-index: 10002; ' +
'box-shadow: 0 5px 15px rgba(0,0,0,0.5); font-family: \'Malgun Gothic\', sans-serif; ' +
'background-color: #fff; border: 1px solid #004e99; border-radius: 4px;">' +
' <div class="popup-header" style="background-color: #004e99; color: white; font-size: 16px; ' +
'font-weight: bold; padding: 10px 15px; cursor: move; display: flex; justify-content: space-between; align-items: center; border-radius: 3px 3px 0 0;">' +
' <span>' + title + '</span>' +
' <button id="closeMineModalBtn" style="background: none; border: none; font-size: 24px; color: white; cursor: pointer; line-height: 1;">&times;</button>' +
' </div>' +
' <div style="padding: 20px; font-size: 14px; line-height: 1.6; color: #333; max-height: 400px; overflow-y: auto;">' +
content +
' </div>' +
' <div style="text-align: center; padding-bottom: 20px;">' +
' <button id="okMineModalBtn" style="padding: 8px 30px; background-color: #004e99; color: white; border: none; cursor: pointer; border-radius: 4px; font-weight: bold;">확인</button>' +
' </div>' +
'</div>';
$('body').append(popupHtml);
var modal = $('#mineInfoModal');
// 화면 중앙 배치
var top = ($(window).height() - modal.outerHeight()) / 2;
var left = ($(window).width() - modal.outerWidth()) / 2;
if (top < 0) top = 20;
if (left < 0) left = 20;
modal.css({top: top, left: left});
// 닫기 처리 함수
function closeModal() {
modal.remove();
// 이벤트 리스너 정리
$(document).off('mousemove.mineModal').off('mouseup.mineModal');
// 콜백 실행 (주로 지도 선택 해제용)
if (onCloseCallback) onCloseCallback();
}
// 닫기/확인 버튼 이벤트 연결
$('#closeMineModalBtn, #okMineModalBtn').on('click', closeModal);
// --- 드래그 기능 구현 ---
var isDragging = false;
var offset = {x:0, y:0};
modal.find('.popup-header').on('mousedown', function(e) {
isDragging = true;
var pos = modal.offset();
offset.x = e.pageX - pos.left;
offset.y = e.pageY - pos.top;
e.preventDefault(); // 텍스트 선택 방지
});
$(document).on('mousemove.mineModal', function(e) {
if (isDragging) {
modal.offset({ top: e.pageY - offset.y, left: e.pageX - offset.x });
}
}).on('mouseup.mineModal', function() {
isDragging = false;
});
}
//---------여기 시작 코드
// ================================================================
@ -313,24 +385,46 @@ function hole_layerOnOff() {
}
/**
* 지도구분을 클릭하면 CALS 분류를 전체 해제 또는 전체 선택한다.
* @returns
*/
function forceUncheckHoleLayerOnOff() {
//33 글자여야한다.
//var returnValue = "NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNY";
if( true ) {
var returnValue = "NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNY";
for (i = 1; i <= 33; i++) {
var char = returnValue.charAt(i);
if( char==='Y') {
$("#browser").find("#hole"+i).prop("checked", true);
} else {
$("#browser").find("#hole"+i).prop("checked", false);
}
}
//thkim
var eleId = "map-label-cals";
var toggleClass = "active";
changeLegend(returnValue);
}
var targetBtn = document.getElementById(eleId);
var returnValue = null;
if (hasClass(targetBtn, toggleClass)) {
myRemoveClass(eleId, toggleClass);
returnValue = "YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYN";
} else {
myAddClass(eleId, toggleClass);
returnValue = "NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNY";
}
for (i = 1; i <= 33; i++) {
var char = returnValue.charAt(i);
if( char==='Y') {
$("#browser").find("#hole"+i).prop("checked", true);
} else {
$("#browser").find("#hole"+i).prop("checked", false);
}
}
changeLegend(returnValue);
//hideLeftSideBar();
$(window).trigger('resize');
BASE_MAP.updateSize();
}
/**
* 좌측 side bar를 숨긴다.
* @returns
*/
function hideLeftSideBar() {
var body = $('body');
if (body.hasClass("page-sidebar-closed")) {
@ -339,11 +433,6 @@ function forceUncheckHoleLayerOnOff() {
} else {
body.addClass("page-sidebar-closed");
}
$(window).trigger('resize');
BASE_MAP.updateSize();
}
function getMyDrillingProjectCodes() {
@ -423,8 +512,10 @@ var VWORLD_URL = "https://xdworld.vworld.kr/2d/Base/service/${z}/${x}/${y}.png
// -------------------------------
// TBL_HEADER_HOLE 설정
// ------------------------------
var T_HOLE = "TBL_HEADER_HOLE";
var T_WEB_STEEP_SLOPE = "WEB_STEEP_SLOPE"; //"";
var T_HOLE = "TBL_HEADER_HOLE";
var T_STEEP_SLOPE = "WEB_STEEP_SLOPE"; // 급경사지가 들어 있는 테이블 명
var T_RESISTIVITY = "TEMP_RESISTIVITY_SURVEY_SUB"; // 물리탐사 - 전기비저항이 들어 있는 테이블 명
var T_REFRACTION = "TBL_REFRACTION_SURVEY_SUB"; // 물리탐사 - 굴절법탄성파가 들어 있는 테이블 명
var T_HOLE_M = "TBL_HEADER_HOLE_M";
var F_PROJECT_CODE = "PROJECT_CODE";
@ -469,6 +560,11 @@ var WELL_LAYER; // 관정 레이어
var STEEP_SLOPE_LAYER; // 급경사지 레이어
var CTL_SELECT_SLOPE; // 급경사지 선택
var RESISTIVITY_LAYER; // 물리탐사 - 전기비저항
var REFRACTION_LAYER; // 물리탐사 - 굴절법탄성파
var HOLE_SELECT; // 시추공 선택
var HOLE_SELECT2; // 3d지반
var HOLE_AREA; // 영역 선택
@ -760,10 +856,10 @@ function initApp(param){
// 급경사지 레이어
STEEP_SLOPE_LAYER = new OpenLayers.Layer.WMS(
"WEB_STEEP_SLOPE",
T_STEEP_SLOPE,
O2MAP_URL,
{
layers : T_WEB_STEEP_SLOPE,
layers : T_STEEP_SLOPE,
transparent : true,
format : "image/png",
crs : "EPSG:3857",
@ -779,6 +875,49 @@ function initApp(param){
STEEP_SLOPE_LAYER.setVisibility(false);
// 물리탐사 - 전기비저항 레이어
RESISTIVITY_LAYER = new OpenLayers.Layer.WMS(
T_RESISTIVITY,
O2MAP_URL,
{
layers : T_RESISTIVITY,
transparent : true,
format : "image/png",
crs : "EPSG:3857",
}, {
singleTile : false,
isBaseLayer : false,
visibility: false,
transitionEffect: "resize",
buffer : 0,
removeBackBufferDelay : 0
}
);
RESISTIVITY_LAYER.setVisibility(false);
// 물리탐사 - 굴절법탄성파 레이어
REFRACTION_LAYER = new OpenLayers.Layer.WMS(
T_REFRACTION,
O2MAP_URL,
{
layers : T_REFRACTION,
transparent : true,
format : "image/png",
crs : "EPSG:3857",
}, {
singleTile : false,
isBaseLayer : false,
visibility: false,
transitionEffect: "resize",
buffer : 0,
removeBackBufferDelay : 0
}
);
REFRACTION_LAYER.setVisibility(false);
/*
if( getQueryString("masterCompanyCode") && true ) {
HOLE_DRILLING = new OpenLayers.Layer.WMS(
@ -961,6 +1100,12 @@ function initApp(param){
STEEP_SLOPE_LAYER.mergeNewParams({version : '1.3.0'});
BASE_MAP.addLayer(STEEP_SLOPE_LAYER);
RESISTIVITY_LAYER.mergeNewParams({version : '1.3.0'});
BASE_MAP.addLayer(RESISTIVITY_LAYER);
REFRACTION_LAYER.mergeNewParams({version : '1.3.0'});
BASE_MAP.addLayer(REFRACTION_LAYER);
@ -1246,17 +1391,31 @@ function initApp(param){
validationTailler = ' 검증됨';
}
console.log( contents + validationTailler );
alert( contents );
// ====== [수정된 부분] ======
// 1. 줄바꿈(\n)을 HTML 태그(<br>)로 변환
var htmlContent = contents.replace(/\n/g, '<br>');
// 2. alert 대신 모달 함수 호출
// 모달이 닫힐 때(callback) 선택 상태를 해제(unselect)합니다.
showMineInfoModal("광산 상세 정보", htmlContent, function() {
CTL_SELECT_MINE.unselect(feature);
});
isFound = true;
// ==========================
}
}
// 해당하는 광산 정보를 찾지 못한 경우 바로 선택 해제
if (!isFound) {
CTL_SELECT_MINE.unselect(feature);
}
},
error: function(xhr, status, error) {
console.error("API 호출 에러:", error);
alert("상세 정보를 가져오는데 실패했습니다.");
CTL_SELECT_MINE.unselect(feature);
},
complete: function() {
// 알림창 닫은 후 선택 상태 해제 (다시 클릭 가능하도록)
CTL_SELECT_MINE.unselect(feature);
}
});
}
@ -1355,7 +1514,13 @@ function initApp(param){
BASE_MAP.setLayerIndex(MINE_LAYER, 6);
// 급경사지 레이어를 그 위(index 7)에 둡니다.
BASE_MAP.setLayerIndex(STEEP_SLOPE_LAYER, 7);
BASE_MAP.setLayerIndex(STEEP_SLOPE_LAYER, 7);
// 물리탐사 - 전기비저항 레이어를 그 위(index 8)에 둡니다.
BASE_MAP.setLayerIndex(RESISTIVITY_LAYER, 7);
// 물리탐사 - 굴절법탄성파 레이어를 그 위(index 9)에 둡니다.
BASE_MAP.setLayerIndex(REFRACTION_LAYER, 7);
}
// ▲▲▲ 레이어 순서(Z-index) 조정 코드 ▲▲▲
@ -2069,12 +2234,7 @@ function initApp(param){
const positionX = Number(getQueryString("positionX"));
const positionY = Number(getQueryString("positionY"));
if( userArea && masterCompanyCode && false) {
addDrillingHoles(masterCompanyCode);
forceUncheckHoleLayerOnOff();
} else {
BASE_MAP.setCenter(new OpenLayers.LonLat(14184425.793355, 4302405.8698004), 7);
}
BASE_MAP.setCenter(new OpenLayers.LonLat(14184425.793355, 4302405.8698004), 7);
if( getQueryString("masterCompanyCode") ) {
@ -4240,7 +4400,8 @@ function changeLegend(checkList) {
'0626',
'0731',
'0738',
'0871'
'0871',
'0000' // 아무것도 안 보여주기 용도.
];
var record = typeValue[id];
@ -4498,14 +4659,16 @@ function initOverlayLayers(targetEleId) {
offOverlayLayer(targetEleId, 'map-btn-icon-mine-button', MINE_LAYER);
offOverlayLayer(targetEleId, 'map-btn-icon-well-button', WELL_LAYER);
offOverlayLayer(targetEleId, 'map-btn-icon-steep-slope-button', STEEP_SLOPE_LAYER);
offOverlayLayer(targetEleId, undefined, RESISTIVITY_LAYER); //물리탐사 - 전기저항
offOverlayLayer(targetEleId, undefined, REFRACTION_LAYER); //물리탐사 - 굴절법탄성파
}
function offOverlayLayer(targetEleId, myEleId, LAYER) {
if( LAYER ) {
if( targetEleId === myEleId) {
} else {
LAYER.setVisibility(false);
removeClassOverlayLayer(myEleId);
LAYER.setVisibility(false);
myRemoveClass(myEleId);
}
}
}
@ -5883,7 +6046,6 @@ function showGeologyLegend() {
function toggleOverlayLayer(liEleId, layerName, LAYER, message) {
initControl(liEleId); // 다른 컨트롤 상태 초기화
if (!LAYER) {
@ -5897,7 +6059,7 @@ function toggleOverlayLayer(liEleId, layerName, LAYER, message) {
var toggleClass = 'active';
if (hasClass(targetBtn, toggleClass)) {
removeClassOverlayLayer(liEleId);
myRemoveClass(liEleId, toggleClass);
// 레이어 숨김 -> 컨트롤 비활성화
LAYER.setVisibility(false);
@ -5907,7 +6069,7 @@ function toggleOverlayLayer(liEleId, layerName, LAYER, message) {
CTL_INFO.setText(layerName + " Off");
CTL_INFO.deactivate();
} else {
addClassOverlayLayer(liEleId);
myAddClass(liEleId, toggleClass);
// [ON 처리] 레이어 표시 -> 컨트롤 활성화 (선택 모드 여부 상관없음)
LAYER.setVisibility(true);
@ -6135,41 +6297,18 @@ function geologySteepSlope() {
}
//물리탐사
//물리탐사 - 전기저항
function geologyResistivitySurvey() {
initControl(); // 다른 컨트롤 상태 초기화
// STEEP_SLOPE_LAYER 가 정상적으로 생성되었는지 확인
if (!STEEP_SLOPE_LAYER) {
console.error("급경사지 레이어가 초기화되지 않았습니다.");
return;
}
// 현재 레이어의 표시 상태를 가져옵니다.
var isVisible = STEEP_SLOPE_LAYER.getVisibility();
var liEleId = undefined;
var layerName = '물리탐사 - 전기저항';
var message = '물리탐사 - 전기저항 정보는 빨간색 선으로 보여집니다.';
toggleOverlayLayer(liEleId, layerName, RESISTIVITY_LAYER, message);
}
if (isVisible ) {
// 레이어가 현재 보이고 있다면, 숨깁니다.
STEEP_SLOPE_LAYER.setVisibility(false);
CTL_INFO.setText("급경사지 Off");
CTL_INFO.deactivate(); // 정보창도 비활성화
} else {
// 레이어를 보이게 설정하고 강제로 다시 그립니다.
STEEP_SLOPE_LAYER.setVisibility(true);
STEEP_SLOPE_LAYER.redraw(true);
// CTL_INFO의 infoDiv가 내부 요소를 absolute 포지셔닝할 수 있도록 'relative'로 설정
$(CTL_INFO.infoDiv).css("position", "relative");
// CTL_INFO 텍스트 설정 시 버튼 HTML을 함께 삽입
CTL_INFO.setText("급경사지 On");
CTL_INFO.activate();
$("#CTL_INFO").css("bottom", "65px");
$("#CTL_INFO").css("left", "20px");
showToast('급경사지 정보는 빨간색 선으로 보여집니다.');
}
//물리탐사 - 굴절법탄성파
function geologyRefractionSurvey() {
var liEleId = undefined;
var layerName = '물리탐사 - 굴절법탄성파';
var message = '물리탐사 - 굴절법탄성파 정보는 빨간색 선으로 보여집니다.';
toggleOverlayLayer(liEleId, layerName, REFRACTION_LAYER, message);
}