smartGeoinfoOriginal/src/main/webapp/com/js/main.map.js

3862 lines
111 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

// 지도 전역 변수
var map;
//아으아아아
// 지도 배경 레이어 정의
var vworldBaseLayer;
var vworldSatelliteLayer;
var imageryLayer;
var tblHeader;
var sursetLayer;
var cotrolLayer;
var drawLayer;
var drawAreaLayer;
var demLayerSource;
var demLayer;
var demBaseLayer;
var vectorDrawSource;
var selectedHole;
var selectedSaup;
var selectedArea;
var select;
var selectFeatures;
var draw;
var selectAreaClick;
var featuresToAdd;
var isFirstLoad = true;
var surSetisFirstLoad = true;
var verIncisFirstLoad = true;
var setExtisFirstLoad = true;
var watPreisFirstLoad = true;
var watLevisFirstLoad = true;
//거리측정, 면적측정
var sketch;
var helpTooltipElement; // 도움말 도구 설명 요소
var helpTooltip; // 도움말 메시지 표시
var measureTooltipElement; // 측정 툴팁 요소
var measureTooltip; // 측정값 표시
var LineStringOnOff = "off";
var PolygonOnOff = "off";
var mapDemSearchOnOff = "off";
var holeInfoPopup;
var verIncInfoPopup;
var verIncInfoPopupData;
var setExtInfoPopup;
var setExtInfoPopupData;
var holeInfoPopupData;
var saupInfoPopup;
var saupInfoPopupData;
var instrumentationInfoPopup;
var instrumentationInfoPopupData;
var instrumentationGraphInfoPopup;
var instrumentationGraphInfoPopupData;
var predictionGraphInfoPopup;
var predictionGraphInfoPopupData;
//var url = 'http://210.120.6.116:9999';
//var GEOSERVER_URL = 'https://geoserver.smart.dbnt.co.kr';
var GEOSERVER_URL = '/wms';
//현재 도메인을 가져옵니다.
var currentDomain = window.location.hostname;
//현재 도메인이 'localhost' 또는 '127.0.0.1'을 포함하는지 확인합니다.
if (currentDomain.includes('localhost') || currentDomain.includes('127.0.0.1')) {
GEOSERVER_URL = 'http://10.dbnt.co.kr:9000';
}
$(document).ready(function(){
// 지도 서비스 실행
init();
});
//-------------------------------------------
// 실행시 첫 화면 및 전체 함수 통제
//-------------------------------------------
function init() {
// 좌표계 설정
initProj();
// ol view 설정
var olView = new ol.View({
center: [14337592,4173705], // 초기 지도 위치 좌표,[54300000, 4300000],
zoom: 14, // 초기 지도 위치 줌레벨
minZoom: 7,
maxZoom: 19
});
// map 생성
map = new ol.Map({
target: 'map', // Map 생성할 div id (지도를 생성할 element 객체의 id 값)
view: olView
});
// 배경지도 설정(등록)
addBaseLayer();
// 배경지도 변경 및 범례 조회
initBaseLayerSelect();
// 우측메뉴 기능
menutoolsEvent();
// Feature 선택기능
selectFeature();
// Mouseover
hoverMode();
holeInfoPopup = $("#holeInfoPopup");
holeInfoPopup.kendoWindow({
animation: false,
width: 700,
minWidth: 700,
height: 650,
minHeight: 650,
modal: true,
scrollable: true,
resizable: true,
pinned: true,
title: "상세 정보조회"
});
holeInfoPopupData = holeInfoPopup.data("kendoWindow");
verIncInfoPopup = $("#verIncInfoPopup");
verIncInfoPopup.kendoWindow({
animation: false,
width: 1100,
minWidth: 1100,
height: 800,
minHeight: 800,
modal: true,
scrollable: false,
resizable: false,
pinned: true,
title: "지중경사계 상세 정보조회"
});
verIncInfoPopupData = verIncInfoPopup.data("kendoWindow");
setExtInfoPopup = $("#setExtInfoPopup");
setExtInfoPopup.kendoWindow({
animation: false,
width: 1100,
minWidth: 1100,
height: 800,
minHeight: 800,
modal: true,
scrollable: false,
resizable: false,
pinned: true,
title: "층별침하계 상세 정보조회"
});
setExtInfoPopupData = setExtInfoPopup.data("kendoWindow");
watPreInfoPopup = $("#watPreInfoPopup");
watPreInfoPopup.kendoWindow({
animation: false,
width: 1100,
minWidth: 1100,
height: 800,
minHeight: 800,
modal: true,
scrollable: false,
resizable: false,
pinned: true,
title: "간극수압계 상세 정보조회"
});
watPreInfoPopupData = watPreInfoPopup.data("kendoWindow");
watLevInfoPopup = $("#watLevInfoPopup");
watLevInfoPopup.kendoWindow({
animation: false,
width: 1100,
minWidth: 1100,
height: 800,
minHeight: 800,
modal: true,
scrollable: false,
resizable: false,
pinned: true,
title: "지하수위계 상세 정보조회"
});
watLevInfoPopupData = watLevInfoPopup.data("kendoWindow");
$("#searchInfo").kendoButton({
click: function() {
selectFeatureInfo(); // 정보 조회
}
});
$("#holeInfoPopupClose").kendoButton({
click: function() {
holeInfoPopupData.close();
}
});
$("#verIncInfoPopupClose").kendoButton({
click: function() {
verIncInfoPopupData.close();
}
});
$("#setExtInfoPopupClose").kendoButton({
click: function() {
setExtInfoPopupData.close();
}
});
$("#watPreInfoPopupClose").kendoButton({
click: function() {
watPreInfoPopupData.close();
}
});
$("watLevInfoPopupClose").kendoButton({
click: function() {
watLevInfoPopupData.close();
}
});
saupInfoPopup = $("#saupInfoPopup");
saupInfoPopup.kendoWindow({
animation: false,
width: 700,
minWidth: 700,
height: 650,
minHeight: 650,
modal: true,
scrollable: true,
resizable: true,
pinned: true,
title: "상세 정보조회"
});
saupInfoPopupData = saupInfoPopup.data("kendoWindow");
$("#saupInfoPopupClose").kendoButton({
click: function() {
saupInfoPopupData.close();
}
});
instrumentationInfoPopup = $("#instrumentationInfoPopup");
instrumentationInfoPopup.kendoWindow({
animation: false,
width: 1100,
minWidth: 1100,
height: 800,
minHeight: 800,
modal: true,
scrollable: false,
resizable: false,
pinned: true,
title: "계측정보조회",
});
instrumentationInfoPopupData = instrumentationInfoPopup.data("kendoWindow");
$("#instrumentationInfoPopupClose").kendoButton({
click: function() {
instrumentationInfoPopupData.close();
}
});
instrumentationGraphInfoPopup = $("#instrumentationGraphInfoPopup");
instrumentationGraphInfoPopup.kendoWindow({
animation: false,
width: 850,
height: 525,
modal: true,
scrollable: true,
resizable: true,
pinned: true,
title: "계측정보조회"
});
instrumentationGraphInfoPopupData = instrumentationGraphInfoPopup.data("kendoWindow");
$("#instrumentationGraphInfoPopupClose").kendoButton({
click: function() {
instrumentationGraphInfoPopupData.close();
}
});
predictionInfoPopup = $("#predictionInfoPopup");
predictionInfoPopup.kendoWindow({
animation: false,
width: 1000,
minWidth: 1000,
height: 800,
minHeight: 800,
modal: true,
scrollable: true,
resizable: true,
pinned: true,
title: "예측정보조회"
});
predictionInfoPopupData = predictionInfoPopup.data("kendoWindow");
$("#predictionInfoPopupClose").kendoButton({
click: function() {
predictionInfoPopupData.close();
}
});
predictionGraphInfoPopup = $("#predictionGraphInfoPopup");
predictionGraphInfoPopup.kendoWindow({
animation: false,
width: 1100,
height: 800,
modal: true,
scrollable: true,
resizable: true,
pinned: true,
title: "예측정보조회"
});
predictionGraphInfoPopupData = predictionGraphInfoPopup.data("kendoWindow");
$("#predictionGraphInfoPopupClose").kendoButton({
click: function() {
predictionGraphInfoPopupData.close();
}
});
}
//-------------------------------------------
// 좌표계 설정
//-------------------------------------------
function initProj() {
// google 좌표계
proj4.defs('EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs');
// UTM-K 좌표계
proj4.defs('EPSG:5179', '+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
// 중부원점(GRS80) [200,000 600,000]
proj4.defs("EPSG:5186", "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs" );
}
//-------------------------------------------
// 배경지도 설정(등록)
//-------------------------------------------
function addBaseLayer() {
// 배경지도 레이어_vworld Base map
vworldBaseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
projection : 'EPSG:3857', // EPSG 3857 좌표계로 변환
url : 'https://xdworld.vworld.kr/2d/Base/service/{z}/{x}/{y}.png',
crossOrigin: 'anonymous'
}),
visible: true
});
map.addLayer(vworldBaseLayer);
// 배경지도 레이어_vworld satellite map
vworldSatelliteLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
projection : 'EPSG:3857',
url : 'https://xdworld.vworld.kr/2d/Satellite/service/{z}/{x}/{y}.jpeg',
crossOrigin: 'anonymous'
}),
/*zIndex: 0,*/
visible: false
});
map.addLayer(vworldSatelliteLayer);
var vectorSource = new ol.source.Vector();
selectedArea = new ol.source.Vector();
// 시추공 데이터_WFS버전
vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) {
var url =
GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
'version=1.0.0&request=GetFeature&' +
'typeName=sgis%3Aapptb_hole01&' +
'outputFormat=application%2Fjson&' +
'srsname=' + projection.getCode() +
'&bbox=' + extent.join(',') + ',' + projection.getCode();
// WFS 요청 보내기
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
// 최초로 한 번만 실행
if (isFirstLoad) {
tblHeader.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
isFirstLoad = false; // 두 번째 이후에는 무시
}
});
},
strategy: ol.loadingstrategy.bbox,
});
tblHeader = new ol.layer.Vector({
className: 'holeLayer',
source: vectorSource,
visible: true,
style: new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#ffcc33',
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
radius: 6
}),
}),
/*zIndex: 2*/
});
map.addLayer(tblHeader);
var sursetSource = new ol.source.Vector();
// 지표침하판 데이터_WFS버전
sursetSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) {
var url =
GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
'version=1.0.0&request=GetFeature&' +
'typeName=sgis%3Aapptb_surset01&' +
'outputFormat=application%2Fjson&' +
'srsname=' + projection.getCode() +
'&bbox=' + extent.join(',') + ',' + projection.getCode();
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
// 최초로 한 번만 실행
if (surSetisFirstLoad) {
sursetLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
surSetisFirstLoad = false; // 두 번째 이후에는 무시
}
});
},
strategy: ol.loadingstrategy.bbox,
});
sursetLayer = new ol.layer.Vector({
className: 'sursetLayer',
source: sursetSource,
/*zIndex: 2,*/
visible: true,
style: new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#EF0000',
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
radius: 6
}),
}),
});
map.addLayer(sursetLayer);
var verIncSource = new ol.source.Vector();
// 지중경사계 데이터_WFS버전
verIncSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) {
var url =
GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
'version=1.0.0&request=GetFeature&' +
'typeName=sgis%3Aapptb_verinc01&' +
'outputFormat=application%2Fjson&' +
'srsname=' + projection.getCode() +
'&bbox=' + extent.join(',') + ',' + projection.getCode();
// WFS 요청 보내기
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
// 최초로 한 번만 실행
if (verIncisFirstLoad) {
verIncLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
verIncisFirstLoad = false; // 두 번째 이후에는 무시
}
});
},
strategy: ol.loadingstrategy.bbox,
});
verIncLayer = new ol.layer.Vector({
className: 'verIncLayer',
source: verIncSource,
/*zIndex: 2,*/
visible: true,
style: new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#B8860B',
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
radius: 6
}),
}),
});
map.addLayer(verIncLayer);
var setExtSource = new ol.source.Vector();
// 지중경사계 데이터_WFS버전
setExtSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) {
var url =
GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
'version=1.0.0&request=GetFeature&' +
'typeName=sgis%3Aapptb_setext01&' +
'outputFormat=application%2Fjson&' +
'srsname=' + projection.getCode() +
'&bbox=' + extent.join(',') + ',' + projection.getCode();
// WFS 요청 보내기
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
// 최초로 한 번만 실행
if (setExtisFirstLoad) {
setExtLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
setExtisFirstLoad = false; // 두 번째 이후에는 무시
}
});
},
strategy: ol.loadingstrategy.bbox,
});
setExtLayer = new ol.layer.Vector({
className: 'setExtLayer',
source: setExtSource,
/*zIndex: 2,*/
visible: true,
style: new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#99FFFF',
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
radius: 6
}),
}),
});
map.addLayer(setExtLayer);
var watPreSource = new ol.source.Vector();
// 지중경사계 데이터_WFS버전
watPreSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) {
var url =
GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
'version=1.0.0&request=GetFeature&' +
'typeName=sgis%3Aapptb_watpre01&' +
'outputFormat=application%2Fjson&' +
'srsname=' + projection.getCode() +
'&bbox=' + extent.join(',') + ',' + projection.getCode();
// WFS 요청 보내기
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
// 최초로 한 번만 실행
if (watPreisFirstLoad) {
watPreLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
watPreisFirstLoad = false; // 두 번째 이후에는 무시
}
});
},
strategy: ol.loadingstrategy.bbox,
});
watPreLayer = new ol.layer.Vector({
className: 'watPreLayer',
source: watPreSource,
// zIndex: 2,
visible: true,
style: new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#FEBC87',
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
radius: 6
}),
}),
});
map.addLayer(watPreLayer);
var watLevSource = new ol.source.Vector();
// 지중경사계 데이터_WFS버전
watLevSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) {
var url =
GEOSERVER_URL + '/geoserver/sgis/ows?service=WFS&' +
'version=1.0.0&request=GetFeature&' +
'typeName=sgis%3Aapptb_watlev01&' +
'outputFormat=application%2Fjson&' +
'srsname=' + projection.getCode() +
'&bbox=' + extent.join(',') + ',' + projection.getCode();
// WFS 요청 보내기
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
// 최초로 한 번만 실행
if ( watLevisFirstLoad) {
watLevLayer.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(json));
watLevisFirstLoad = false; // 두 번째 이후에는 무시
}
});
},
strategy: ol.loadingstrategy.bbox,
});
watLevLayer = new ol.layer.Vector({
className: 'watLevLayer',
source: watLevSource,
/*zIndex: 2,*/
visible: true,
style: new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#FE6969',
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
radius: 6
}),
}),
});
map.addLayer(watLevLayer);
vectorDrawSource = new ol.source.Vector();
drawLayer = new ol.layer.Vector({
source: vectorDrawSource,
visible: true,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.7)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2,
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33',
}),
}),
}),
});
map.addLayer(drawLayer);
drawAreaLayer = new ol.layer.Vector({
source: selectedArea,
/*zIndex: 2,*/
visible: true,
style :[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 0.7)',
width: 2,
}),
}),
new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: "#ffcc33" }),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 0.7)',
width: 2,
}),
radius: 6
})
}),
new ol.style.Style({
image: new ol.style.Icon({
/*src: '../com/img/map-service/icon/icon_map_check.png'*/
opacity: 0.5,
src: "data:image/svg+xml;utf8," + svg,
scale: 0.5
}),
})
],
});
map.addLayer(drawAreaLayer);
// Control
//map.addControl(new ol.control.ScaleLine());
}
function changeOpacity(){
let opacity = $("#opacity").val();
$("#output").text(opacity);
let setOpacity = (100 - opacity) / 100;
if(demLayer != undefined){
demLayer.setOpacity(setOpacity);
}
}
//-------------------------------------------
//layer on/off 설정
//-------------------------------------------
function initBaseLayerSelect() {
// 지도 레이어 on/off 설정
$('input[name="mapOptions"]').change(function(){
if($(this).val() == 1) {
vworldBaseLayer.setVisible(true);
vworldSatelliteLayer.setVisible(false);
}else if($(this).val() == 2){
vworldBaseLayer.setVisible(false);
vworldSatelliteLayer.setVisible(true);
}
});
// 지형높이, 투명도 레이어 on/off
$('#mapDemSearch').click(function() {
if(mapDemSearchOnOff == "off"){
mapDemSearchOnOff = "on";
}else{
$("#demDate").val("1").prop("selected", true);
mapDemSearchOnOff = "off";
map.removeLayer(demLayer);
}
});
$("select[class='custom-select-calendar']").change(function(){
var selectDate = $("select[class='custom-select-calendar'] option:selected").text();
selectDate = selectDate.replaceAll(".","");
map.removeLayer(demLayer);
map.removeLayer(demBaseLayer);
//demBaseLayerInit();
demLayerSource = new ol.source.ImageWMS({
url : GEOSERVER_URL + '/geoserver/sgis_dem/wms?service=WMS', // 1. 레이어 URL
params : {
'VERSION' : '1.1.0', // 2. 버전
'LAYERS' : 'sgis_dem:' + selectDate, // 3. 작업공간:레이어 명
'SRS' : 'EPSG:3857', // SRID
},
serverType : 'geoserver',
crossOrigin: 'anonymous',
});
demLayer = new ol.layer.Image({
title: "demLayer",
className : "demLayer",
source : demLayerSource,
/*zIndex: 1,*/
});
map.addLayer(demLayer); // 맵 객체에 레이어를 추가함
});
// 범례 제공 및 레이어 On/Off - 전체 선택
$('#holeLegend').click(function() {
if(!$(this).is(':checked')) {
tblHeader.setVisible(false);
sursetLayer.setVisible(false);
verIncLayer.setVisible(false);
setExtLayer.setVisible(false);
watPreLayer.setVisible(false);
watLevLayer.setVisible(false);
}else{
tblHeader.setVisible(true);
sursetLayer.setVisible(true);
verIncLayer.setVisible(true);
setExtLayer.setVisible(true);
watPreLayer.setVisible(true);
watLevLayer.setVisible(true);
}
});
// 범례 제공 및 레이어 On/Off - 부분 선택
$('input[name="holeCheck"]').change(function(){
if($(this).val() =="hole1"){ // 시추공
if(!$(this).is(':checked')) {
tblHeader.setVisible(false);
hole1OnOff = "off";
}else{
tblHeader.setVisible(true);
hole1OnOff = "on";
}
}else if($(this).val() =="hole2"){
if(!$(this).is(':checked')) {
sursetLayer.setVisible(false);
hole2OnOff = "off";
}else{
sursetLayer.setVisible(true);
hole2OnOff = "on";
}
}else if($(this).val() =="hole4"){
if(!$(this).is(':checked')) {
verIncLayer.setVisible(false);
hole4OnOff = "off";
}else{
verIncLayer.setVisible(true);
hole4OnOff = "on";
}
}else if($(this).val() =="hole5"){
if(!$(this).is(':checked')) {
setExtLayer.setVisible(false);
hole5OnOff = "off";
}else{
setExtLayer.setVisible(true);
hole5onOff = "on";
}
}else if($(this).val() =="hole6"){
if(!$(this).is(':checked')) {
watPreLayer.setVisible(false);
hole6OnOff = "off";
}else{
watPreLayer.setVisible(true);
hole6OnOff = "on";
}
}else if($(this).val() =="hole7"){
if(!$(this).is(':checked')) {
watLevLayer.setVisible(false);
hole7OnOff = "off";
}else{
watLevLayer.setVisible(true);
hole7OnOff = "on";
}
}
});
}
//-------------------------------------------
//범례 체크박스 전체선택
//-------------------------------------------
function SelectAll(holeSelectAll) {
const checkboxes = document.getElementsByName('holeCheck');
checkboxes.forEach((checkbox) => {
checkbox.checked = holeSelectAll.checked;
})
}
//-------------------------------------------
//우측메뉴 기능
//-------------------------------------------
function menutoolsEvent() {
// Home으로 이동
$('#home').on('click', function() {
var center = [14337592,4173705]
map.getView().setCenter(center)
map.getView().setZoom(14);
setTimeout(function(){
map.updateSize();    
}, 200);
});
// 지도 확대
$('#zoom-in').on('click', function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
setTimeout(function(){
map.updateSize();    
}, 200);
});
// 지도 축소
$('#zoom-out').on('click', function () {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
tblHeader.getSource().clear();
setTimeout(function(){
map.updateSize();
}, 200);
});
/*var wheelTimeout;
map.on('wheel', function(event) {
if (event.originalEvent.deltaY > 0) {
// 확대할 때만 피처 추가
clearTimeout(wheelTimeout);
wheelTimeout = setTimeout(function () {
tblHeader.getSource().clear();
}, 200); // 200ms 동안 다른 휠 이벤트가 발생하지 않으면 피처를 지움
}
});*/
}
//거리 측정 단위 변경 및 output 제공
//-------------------------------------------
var formatLength = function(line) {
var length;
length = Math.round(line.getLength() * 100) / 100;
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) + ' ' + 'm';
}
return output;
};
//-------------------------------------------
//면적 측정 단위 변경 및 output 제공
//-------------------------------------------
var formatArea = function (polygon) {
var area;
area = polygon.getArea();
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>';
} else {
output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';
}
return output;
};
//-------------------------------------------
//사업의 시추공 선택 및 해지(개별선택, 사업선택, 영역선택)
//-------------------------------------------
var svg ='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="red" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>';
function selectFeature() {
selectClick = new ol.interaction.Select({
condition: ol.events.condition.click,
style: [
new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: "#ffcc33" }),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 0.7)',
width: 2,
}),
radius: 6
})
}),
new ol.style.Style({
image: new ol.style.Icon({
/*src: '../com/img/map-service/icon/icon_map_check.png'*/
opacity: 0.5,
src: "data:image/svg+xml;utf8," + svg,
scale: 0.5
}),
})
]
});
}
function changeInteraction(type){
if (type == 'click') {
if(selectedArea != undefined){
selectedArea.clear();
}
if(select != null){
select.getFeatures().clear();
map.removeInteraction(select);
select = null;
}
if(selectedSaup != undefined){
map.removeLayer(selectedSaup);
}
if(drawArea != null){
map.removeInteraction(drawArea);
}
document.mapForm.searchType.value = 'EachSelect';
select = selectClick;
selectEvent();
} else if (type == 'areaClick') {
if(selectedArea != undefined){
selectedArea.clear();
}
if(select != null){
select.getFeatures().clear();
map.removeInteraction(select);
select = null;
}
if(selectedSaup != undefined){
map.removeLayer(selectedSaup);
}
document.mapForm.searchType.value = 'areaSearch';
selectAreaEvent();
} else {
if(selectedArea != undefined){
selectedArea.clear();
}
if(drawArea != null){
map.removeInteraction(drawArea);
}
if(select != null){
select.getFeatures().clear();
map.removeInteraction(select);
select = null;
}
selectedSaup.setVisible(false)
select = null;
}
if (select != null) {
select.on('select', function (evt) {
console.log("test");
});
}
}
//-------------------------------------------
//select 이벤트
//-------------------------------------------
function selectEvent(){
map.on('click', function(evt) {
selectFeature = map.forEachFeatureAtPixel(evt.pixel,function(selectFeature) {
selectedHole = selectFeature;
return selectFeature;
});
if(selectFeature){
document.mapForm.businessCode.value = selectFeature.getProperties().business_code;
document.mapForm.holeCode.value = selectFeature.getProperties().hole_code;
document.mapForm.consCode.value = selectFeature.getProperties().cons_code;
document.mapForm.surSetCode.value = selectFeature.getProperties().sur_set_code;
document.mapForm.verIncCode.value = selectFeature.getProperties().ver_inc_code;
document.mapForm.setExtCode.value = selectFeature.getProperties().set_ext_code;
document.mapForm.watPreCode.value = selectFeature.getProperties().wat_pre_code;
document.mapForm.watLevCode.value = selectFeature.getProperties().wat_lev_code;
}
});
map.addInteraction(select);
}
function selectAreaEvent(){
if(select != undefined){
map.removeInteraction(select);
}
addInteraction2();
}
var drawArea;
function addInteraction2(){
drawArea = new ol.interaction.Draw({
source: selectedArea,
type: "Polygon",
style: [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.4)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
})
}),
]
});
map.addInteraction(drawArea);
drawArea.on('drawstart', function(e) {
selectedArea.clear();
});
drawArea.on('drawend', function(e){
var polygonGeometry = e.feature.getGeometry();
//시추공정보
var holeFeatures = tblHeader.getSource().getFeatures();
//지표침하판정보
var sursetFeatures = sursetLayer.getSource().getFeatures();
//지중경사계정보
var verIncFeatures = verIncLayer.getSource().getFeatures();
//층별침하계정보
var setExtFeatures = setExtLayer.getSource().getFeatures();
//간극수압계정보
var watPreFeatures = watPreLayer.getSource().getFeatures();
//지중경사계정보
var watLevFeatures = watLevLayer.getSource().getFeatures();
var select = new ol.interaction.Select();
selectFeatures = select.getFeatures(); // 시추공 selectFeatures
sursetSelectFeatures = select.getFeatures(); // 지표침하판 selectFeatures
verIncSelectFeatures = select.getFeatures();
setExtSelectFeatures = select.getFeatures();
watPreSelectFeatures = select.getFeatures();
watLevSelectFeatures = select.getFeatures();
for (var i = 0 ; i < holeFeatures.length; i++){
if(polygonGeometry.intersectsExtent( holeFeatures[i].getGeometry().getExtent() )){
selectFeatures.push(holeFeatures[i]);
selectedArea.addFeature(holeFeatures[i]);
}
}
for (var i = 0 ; i < sursetFeatures.length; i++){
if(polygonGeometry.intersectsExtent( sursetFeatures[i].getGeometry().getExtent() )){
sursetSelectFeatures.push(sursetFeatures[i]);
selectedArea.addFeature(sursetFeatures[i]);
}
}
for (var i = 0 ; i < verIncFeatures.length; i++){
if(polygonGeometry.intersectsExtent( verIncFeatures[i].getGeometry().getExtent() )){
verIncSelectFeatures.push(verIncFeatures[i]);
selectedArea.addFeature(verIncFeatures[i]);
}
}
for (var i = 0 ; i < setExtFeatures.length; i++){
if(polygonGeometry.intersectsExtent( setExtFeatures[i].getGeometry().getExtent() )){
setExtSelectFeatures.push(setExtFeatures[i]);
selectedArea.addFeature(setExtFeatures[i]);
}
}
for (var i = 0 ; i < watPreFeatures.length; i++){
if(polygonGeometry.intersectsExtent( watPreFeatures[i].getGeometry().getExtent() )){
watPreSelectFeatures.push(watPreFeatures[i]);
selectedArea.addFeature(watPreFeatures[i]);
}
}
for (var i = 0 ; i < watLevFeatures.length; i++){
if(polygonGeometry.intersectsExtent( watLevFeatures[i].getGeometry().getExtent() )){
watLevSelectFeatures.push(watLevFeatures[i]);
selectedArea.addFeature(watLevFeatures[i]);
}
}
});
}
function selectFeatureInfo(){
debugger; //thkim
var businessCode = document.mapForm.businessCode.value;
var holeCode = document.mapForm.holeCode.value;
var consCode = document.mapForm.consCode.value;
var searchType = document.mapForm.searchType.value;
var surSetCode = document.mapForm.surSetCode.value;
var verIncCode = document.mapForm.verIncCode.value;
var setExtCode = document.mapForm.setExtCode.value;
var watPreCode = document.mapForm.watPreCode.value;
var watLevCode = document.mapForm.watLevCode.value;
var resultData;
var resultArea = [];
var holeData;
var msg;
if(document.mapForm.searchType.value == "EachSelect"){
if(selectFeature != undefined > 0){
if(consCode == "undefined"){
msg = "시추공";
$.ajax({
url : "/map/holeInfo.do",
type: "POST",
data : {
businessCode : businessCode,
holeCode : holeCode,
},
success : function(data){
resultData = $.parseJSON(data);
holeData = resultData.dataList1;
document.getElementById("busCod").innerHTML = undefinedCheck(holeData[0].businessCode);
document.getElementById("busProcod").innerHTML = undefinedCheck(holeData[0].businessProcessName);
document.getElementById("holCod").innerHTML = undefinedCheck(holeData[0].holeCode);
document.getElementById("holNam").innerHTML = undefinedCheck(holeData[0].holeName);
document.getElementById("holLocsd").innerHTML = undefinedCheck(holeData[0].sdName);
document.getElementById("holLocsgg").innerHTML = undefinedCheck(holeData[0].sggName);
document.getElementById("holLocemd").innerHTML = undefinedCheck(holeData[0].emdName);
document.getElementById("holLocdet").innerHTML = undefinedCheck(holeData[0].businessAddressDetail);
document.getElementById("holcoordi").innerHTML = "EPSG:" + undefinedCheck(holeData[0].holeCoordinate);
document.getElementById("holX").innerHTML = undefinedCheck(holeData[0].holeX);
document.getElementById("holY").innerHTML = undefinedCheck(holeData[0].holeY);
document.getElementById("holeBoringName").innerHTML = undefinedCheck(holeData[0].holeBoringName);
document.getElementById("holeProspecterName").innerHTML = undefinedCheck(holeData[0].holeProspecterName);
document.getElementById("holeStartDate").innerHTML = undefinedCheck(holeData[0].holeStartDate);
document.getElementById("holeEndDate").innerHTML = undefinedCheck(holeData[0].holeEndDate);
document.getElementById("holeElevation").innerHTML = undefinedCheck(holeData[0].holeElevation);
document.getElementById("holeWaterLevel").innerHTML = undefinedCheck(holeData[0].holeWaterLevel);
document.getElementById("holeDrillingDepth").innerHTML = undefinedCheck(holeData[0].holeDrillingDepth);
document.getElementById("holeCasingDepth").innerHTML = undefinedCheck(holeData[0].holeCasingDepth);
document.getElementById("stratumCount").innerHTML = undefinedCheck(holeData[0].stratumCount);
document.getElementById("holeDia").innerHTML = undefinedCheck(holeData[0].holeDia);
document.getElementById("holeBoringMachine").innerHTML = undefinedCheck(holeData[0].holeBoringMachine);
document.getElementById("holeBoringMethod").innerHTML = undefinedCheck(holeData[0].holeBoringMethod);
document.getElementById("holeBoringDirection").innerHTML = undefinedCheck(holeData[0].holeBoringDirection);
document.getElementById("userNm").innerHTML = undefinedCheck(holeData[0].userNm);
document.getElementById("sysRegDt").innerHTML = undefinedCheck(holeData[0].sysRegDt);
document.getElementById("holeRemark").innerHTML = undefinedCheck(holeData[0].holeRemark);
},
complete : function(data) {
holeInfoPopupData.center();
holeInfoPopupData.open();
}
});
}else if(document.mapForm.surSetCode.value != 'undefined'){
msg = "지표침하판";
$.ajax({
url : "/map/instrumentationInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchInstrPopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchInstrPopupSubKendoGrid(resultData.dataList2,consCode, businessCode);
instrumentationInfoPopupData.center();
instrumentationInfoPopupData.open();
}
});
}else if(document.mapForm.verIncCode.value != 'undefined'){
msg = "지중경사계";
$.ajax({
url : "/map/verIncInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchVerIncPopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchVerIncPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
verIncInfoPopupData.center();
verIncInfoPopupData.open();
}
});
}else if(document.mapForm.setExtCode.value != 'undefined'){
msg = "층별침하계";
$.ajax({
url : "/map/setExtInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchSetExtPopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchSetExtPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
setExtInfoPopupData.center();
setExtInfoPopupData.open();
}
});
}else if(document.mapForm.watPreCode.value != 'undefined'){
msg = "간극수압계";
$.ajax({
url : "/map/watPreInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchWatPrePopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchWatPrePopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
watPreInfoPopupData.center();
watPreInfoPopupData.open();
}
});
}else if(document.mapForm.watLevCode.value != 'undefined'){
msg = "지하수위계";
$.ajax({
url : "/map/watLevInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchWatLevPopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchWatLevPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
watLevInfoPopupData.center();
watLevInfoPopupData.open();
}
});
}else{
alert("정보를 선택해주세요.");
}
}else{
alert( msg + "을 선택해주세요.");
return false;
}
}else if(searchType == "areaSearch"){
$("#areaInfoPopupGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = selectFeatures.getArray();
for(var i =0; i<selectFeatures.getLength(); i++){
resultArea.push(resultData[i].A);
}
dataList = resultArea;
// 그리드 데이터 로드
searchAreaPopupKendoGrid(dataList);
saupInfoPopupData.center();
saupInfoPopupData.open();
}else if(searchType == "saupSearch"){
$.ajax({
url : "/map/saupHoleInfo.do",
type: "POST",
data : {
businessCode : businessCode,
},
success : function(data){
$("#saupInfoPopupGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
dataList = resultData.dataList1;
surSetdataList = resultData.dataList2;
verIncdataList = resultData.dataList3;
setExtdataList = resultData.dataList4;
watPredataList = resultData.dataList5;
watLevdataList = resultData.dataList6;
dataList = dataList
.concat(surSetdataList)
.concat(verIncdataList)
.concat(setExtdataList)
.concat(watPredataList)
.concat(watLevdataList);
// 그리드 데이터 로드
searchSaupPopupKendoGrid(dataList);
saupInfoPopupData.center();
saupInfoPopupData.open();
}
});
}
}
function undefinedCheck(val) {
var data = "";
if(val != undefined) {
data = val;
}
return data
}
function createPopover(){
coordElement = document.getElementById('olPopup');
olPopup = new ol.Overlay({
element: document.getElementById('olPopup')
});
map.addOverlay(olPopup);
}
//-------------------------------------------
//hover 기능
//-------------------------------------------
function hoverMode() {
createPopover();
map.on('pointermove', function(evt) {
if (evt.dragging) {
$(coordElement).popover('destroy');
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
// 마커 위로 이동 시 마우스 커서 변경
map.getViewport().style.cursor = hit ? 'pointer' : '';
if(mapDemSearchOnOff == "on"){
map.forEachLayerAtPixel(evt.pixel, function(layer, pixel) {
if(layer.get('title') == "demLayer"){
const data = demLayer.getData(evt.pixel);
//let height = 0.2126*pixel[0] + 0.7152*pixel[1] + 0.0722*pixel[2];
let r = data[0];
let g = data[1];
let b = data[2];
var hexCode = ConvertRGBtoHex(r,g,b);
let height;
//console.log(" R: " + data[0] + " G : " + data[1] + " B : " + data[2]);
if(hexCode == "#00009b" ){
height = 0;
}else{
height = 0.1126*r + 0.0126*g + 0.0252*b;
}
//var height = ol.ext.getElevationFromPixel(pixel);
document.getElementById("demInfo").innerHTML = height.toFixed(2);
}
}),
{
layerFilter: function(l) {
return l===demLayer;
}
};
}
var hoverFeatureId;
var hoverFeature = map.forEachFeatureAtPixel(evt.pixel,function( hoverFeature) {
hoverFeatureId = hoverFeature.getId() == undefined ? null : hoverFeature.getId();
return hoverFeature;
});
if(hoverFeatureId){
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326')) // toStringHDMS : 반구, 도, 분 및 초를 사용하여 지리 좌표의 형식을 지정
var businessName = hoverFeature.getProperties().business_name
if(hoverFeatureId.toLowerCase().includes('hole')){
var holeName = hoverFeature.getProperties().hole_name;
$(coordElement).popover('destroy');
olPopup.setPosition(coordinate);
$(coordElement).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<p>사업명 : <code>' + businessName + '</code><p><code><br></code><p>시추공명 : <code>' + holeName + '</code> '
})
}else if(hoverFeatureId.toLowerCase().includes('surset')){
let zoneCode = hoverFeature.getProperties().zone_code;
let testName;
let testCode;
var consCode;
if(hoverFeatureId.includes('surset')){
testName = "지표침하판코드";
testCode = hoverFeature.getProperties().sur_set_code;
consCode = hoverFeature.getProperties().cons_code;
}
$(coordElement).popover('destroy');
olPopup.setPosition(coordinate);
$(coordElement).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<p>사업명 : <code>' + businessName + '</code><p>구역코드 : <code>' + zoneCode + '</code><p>' + testName + ' : <code>' + testCode + '</code> '
})
}else if(hoverFeatureId.toLowerCase().includes('verinc')){
let zoneCode = hoverFeature.getProperties().zone_code;
let testName;
let testCode;
var consCode;
if(hoverFeatureId.includes('verinc')){
testName = "지중경사계코드";
testCode = hoverFeature.getProperties().ver_inc_code;
consCode = hoverFeature.getProperties().cons_code;
}
$(coordElement).popover('destroy');
olPopup.setPosition(coordinate);
$(coordElement).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<p>사업명 : <code>' + businessName + '</code><p>구역코드 : <code>' + zoneCode + '</code><p>' + testName + ' : <code>' + testCode + '</code> '
})
}else if(hoverFeatureId.toLowerCase().includes('setext')){
let zoneCode = hoverFeature.getProperties().zone_code;
let testName;
let testCode;
var consCode;
if(hoverFeatureId.includes('setext')){
testName = "층별침하계코드";
testCode = hoverFeature.getProperties().set_ext_code;
consCode = hoverFeature.getProperties().cons_code;
}
$(coordElement).popover('destroy');
olPopup.setPosition(coordinate);
$(coordElement).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<p>사업명 : <code>' + businessName + '</code><p>구역코드 : <code>' + zoneCode + '</code><p>' + testName + ' : <code>' + testCode + '</code> '
})
}else if(hoverFeatureId.toLowerCase().includes('watpre')){
let zoneCode = hoverFeature.getProperties().zone_code;
let testName;
let testCode;
var consCode;
if(hoverFeatureId.includes('watpre')){
testName = "간극수압계코드";
testCode = hoverFeature.getProperties().wat_pre_code;
consCode = hoverFeature.getProperties().cons_code;
}
$(coordElement).popover('destroy');
olPopup.setPosition(coordinate);
$(coordElement).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<p>사업명 : <code>' + businessName + '</code><p>구역코드 : <code>' + zoneCode + '</code><p>' + testName + ' : <code>' + testCode + '</code> '
})
}else if(hoverFeatureId.toLowerCase().includes('watlev')){
let zoneCode = hoverFeature.getProperties().zone_code;
let testName;
let testCode;
var consCode;
if(hoverFeatureId.includes('watlev')){
testName = "지하수위계코드";
testCode = hoverFeature.getProperties().wat_lev_code;
consCode = hoverFeature.getProperties().cons_code;
}
$(coordElement).popover('destroy');
olPopup.setPosition(coordinate);
$(coordElement).popover({
'placement': 'top',
'animation': false,
'html': true,
'content': '<p>사업명 : <code>' + businessName + '</code><p>구역코드 : <code>' + zoneCode + '</code><p>' + testName + ' : <code>' + testCode + '</code> '
})
}
$(coordElement).popover('show');
}else{
$(coordElement).popover('destroy');
}
});
}
//-------------------------------------------
//거리 측정 및 면적 측정 기능 구현
//-------------------------------------------
function drawFn(typeSelect) {
drawInit();
if($("#"+typeSelect).hasClass("active")) {
createHelpTooltip();
var helpMsg;
var pointerMoveHandler = function (evt) {
if (sketch) {
var geom = (sketch.getGeometry());
if (geom instanceof ol.geom.Polygon) {
helpMsg = '더블클릭 시 측정이 종료됩니다.';
} else if (geom instanceof ol.geom.LineString) {
helpMsg = '더블클릭 시 측정이 종료됩니다.';
}
}else{
helpMsg = '클릭하여 측정을 시작해 주세요.';
}
helpTooltipElement.innerHTML = helpMsg;
helpTooltip.setPosition(evt.coordinate);
helpTooltipElement.classList.remove('hidden');
};
map.on('pointermove', pointerMoveHandler);
map.getViewport().addEventListener('mouseout', function() {
helpTooltipElement.classList.add('hidden');
});
createMeasureTooltip();
draw = new ol.interaction.Draw({
source: vectorDrawSource,
type: (typeSelect),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.4)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
})
}),
});
map.addInteraction(draw);
var listener;
draw.on('drawstart', function(evt) {
// set sketch
sketch = evt.feature;
/** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */
var tooltipCoord = evt.coordinate;
// listener 버튼 형식으로 변경하기
listener = sketch.getGeometry().on('change', function(evt) {
var geom = evt.target;
var output;
if (geom instanceof ol.geom.Polygon) {
output = formatArea(geom);
tooltipCoord = geom.getInteriorPoint().getCoordinates();
} else if (geom instanceof ol.geom.LineString) {
output = formatLength(geom);
tooltipCoord = geom.getLastCoordinate();
}
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
});
}, this);
draw.on('drawend', function () {
measureTooltipElement.className = 'tooltip tooltip-static';
measureTooltip.setOffset([0, -7]);
//sketch = null;
measureTooltipElement = null;
createMeasureTooltip();
sketch = null;
//map.removeOverlay(helpTooltip);
ol.Observable.unByKey(listener);
}, this);
}else{
//alert("측정모드 종료");
}
}
//-------------------------------------------
//도움말 툴팁 제공
//-------------------------------------------
function createHelpTooltip() {
if (helpTooltipElement) {
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
}
helpTooltipElement = document.createElement('div');
helpTooltipElement.className = 'tooltip hidden';
helpTooltip = new ol.Overlay({
element: helpTooltipElement,
offset: [15, 0],
positioning: 'center-left',
});
map.addOverlay(helpTooltip);
}
//-------------------------------------------
//측정 결과값 툴팁 제공
//-------------------------------------------
function createMeasureTooltip() {
if (measureTooltipElement) {
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
}
measureTooltipElement = document.createElement('div');
measureTooltipElement.className = 'tooltip tooltip-measure';
measureTooltip = new ol.Overlay({
element: measureTooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
map.addOverlay(measureTooltip);
}
function drawInit(){
drawLayer.getSource().clear();
map.removeInteraction(draw);
map.removeOverlay(helpTooltip);
map.removeOverlay(measureTooltip);
$('.tooltip-static').remove();
}
function demBaseLayerInit(){
demBaseLayer = new ol.layer.Tile ({
title: "demBaseLayer",
displayInLayerSwitcher: false,
minResolution: 0,
maxResolution: 197231.79878968254,
source: new ol.source.TileWMS({
url: 'https://wxs.ign.fr/altimetrie/geoportail/r/wms',
projection: 'EPSG:3857',
attributions: [ 'Geoservices-IGN' ],
crossOrigin: 'anonymous',
params: {
LAYERS: 'ELEVATION.ELEVATIONGRIDCOVERAGE.SRTM3',
FORMAT: 'image/x-bil;bits=32',
VERSION: '1.3.0'
}
}),
/*zIndex: 1*/
});
map.addLayer(demBaseLayer);
// Tile load function to convert elevation
var alti = ol.ext.imageLoader.elevationMap();
demBaseLayer.getSource().setTileLoadFunction(alti);
// Hide the layer (but keep it on the map)
var hide = new ol.filter.CSS({ display: false });
demBaseLayer.addFilter(hide);
// Prevent layer smoothing
demBaseLayer.once('prerender', function(evt) {
evt.context.imageSmoothingEnabled = false;
evt.context.webkitImageSmoothingEnabled = false;
evt.context.mozImageSmoothingEnabled = false;
evt.context.msImageSmoothingEnabled = false;
});
}
function ColorToHex(color) {
var hexadecimal = color.toString(16);
return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal;
}
function ConvertRGBtoHex(red, green, blue) {
return "#" + ColorToHex(red) + ColorToHex(green) + ColorToHex(blue);
}
//GRID 에 JSON 데이터 조회
function searchGridInit() {
var form = $("#searchProjForm")[0];
var formData = new FormData(form);
var resultData;
$.ajax({
url: '/app/proj/projList_jsondata.do',
type: "POST",
beforeSend : function(xhr){
loading("#searchGrid", "true");
},
dataType : 'json',
cache : false,
contentType : false,
processData : false,
traditional: true,
data : formData,
success:function(data){
// 필독!!! - kendoGrid의 웹접근성 충족하려면 꼭 넣어서 확인
$("#searchGrid").find("table").prepend("<caption>테이블 요약</caption>");
loading("#searchGrid","false");
resultData = data;
},
complete: function(data) {
dataList = resultData.dataList1;
// 그리드 데이터 로드
searchKendoGrid(dataList);
}
});
}
function searchKendoGrid(dataList) {
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
projectName: { type: "string" },
}
},
},
pageSize: 10,
});
$("#searchGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "projectName", title: "항만명", width: "200px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.projectName);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "projectCode", title: "조회", width: "50px",
template: function(dataItem){
var projectCode = dataItem.projectCode;
var addButton = "<a href=\"javascript:viewProjInfo('"+projectCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-search'></button></a>";
return "<div class='td-data'>"+addButton+"</div>";
},
sortable: false,
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchAreaPopupKendoGrid(dataList) {
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
business_name: { type: "string" },
hole_name: { type: "string" },
}
},
},
pageSize: 10,
});
$("#saupInfoPopupGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "business_name", title: "사업명", width: "200px",
template: function(dataItem){
var dataResult = dataItem.business_name;
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "hole_name", title: "구분", width: "120px",
template: function(dataItem){
if(dataItem.hole_name != undefined){
var dataResult = "시추공";
}else if(dataItem.sur_set_code != undefined){
var dataResult = "지표침하판";
}else if(dataItem.ver_inc_code != undefined){
var dataResult = "지중경사계";
}else if(dataItem.set_ext_code != undefined){
var dataResult = "층별침하계";
}else if(dataItem.wat_pre_code != undefined){
var dataResult = "간극수압계";
}else if(dataItem.wat_lev_code != undefined){
var dataResult = "지하수위계";
}
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "business_code", title: "상세정보", width: "50px",
template: function(dataItem){
let businessCode = dataItem.business_code;
let holeCode = dataItem.hole_code;
var consCode = dataItem.cons_code;
if(dataItem.hole_name != undefined){
var addButton = "<a href=\"javascript:viewHoleInfo('"+businessCode+"','"+holeCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-search'></button></a>";
}else if(dataItem.sur_set_code != undefined){
var addButton = "<a href=\"javascript:viewSurSetInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}else if(dataItem.ver_inc_code != undefined){
var addButton = "<a href=\"javascript:viewVerIncInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}else if(dataItem.set_ext_code != undefined){
var addButton = "<a href=\"javascript:viewSetExtInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}else if(dataItem.wat_pre_code != undefined){
var addButton = "<a href=\"javascript:viewWatPreInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}else if(dataItem.wat_lev_code != undefined){
var addButton = "<a href=\"javascript:viewWatLevInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}
return "<div class='td-data'>"+addButton+"</div>";
},
sortable: false,
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
height: "475px",
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
//========================================================
//kendoUI Grid 설정
//=========================================================
function onDataBound(e) {
var grid = $("#"+e.sender.element[0].id).data("kendoGrid");
var rows = this.items();
// 순번
$(rows).each(function () {
var noIndex = $(this).index() + 1 + (grid.dataSource.pageSize() * (grid.dataSource.page() - 1));
var rowLabel = $(this).find(".row-number");
$(rowLabel).html(noIndex);
});
}
function onChange(e) {
// 그리드가 change때마다 불러오는 함수
//console.log("e :", e);
var grid = e.sender;
var items = e.sender.items();
items.each(function(e) {
var dataItem = grid.dataItem(this);
});
}
function undefinedCheck(val) {
var data = "";
if(val != undefined) {
data = val;
}
return data
}
function displayLoading(target) {
var element = $(target);
kendo.ui.progress(element, true);
}
function completeLoading(target) {
var element = $(target);
kendo.ui.progress(element, false);
}
function viewProjInfo(code){ //프로젝트 상세정보
displayLoading(document.body);
var projInfoPopupData = $("#projInfo").data("kendoWindow");
if(typeof(projInfoPopupData) != "undefined"){
projInfoPopupData.destroy();
}
$("#projDetailPopup").empty();
$("#projDetailPopup").load("/map/mapProjDetailInfo.do?projectCode="+ code, function(){
completeLoading(document.body);
});
}
//GRID 에 JSON 데이터 조회
function searchSaupGridInit() {
var form = $("#searchSaupForm")[0];
var formData = new FormData(form);
var resultData;
$.ajax({
url: '/app/saup/saupList_jsondata.do',
type: "POST",
beforeSend : function(xhr){
loading("#searchSaupGrid", "true");
},
dataType : 'json',
cache : false,
contentType : false,
processData : false,
traditional: true,
data : formData,
success:function(data){
// 필독!!! - kendoGrid의 웹접근성 충족하려면 꼭 넣어서 확인
$("#searchSaupGrid").find("table").prepend("<caption>테이블 요약</caption>");
loading("#searchSaupGrid","false");
resultData = data;
},
complete: function(data) {
dataList = resultData.dataList1;
// 그리드 데이터 로드
searchSaupKendoGrid(dataList);
}
});
}
function searchSaupKendoGrid(dataList) {
var searchSaupGrid = $("#searchSaupGrid").data("kendoGrid");
if(searchSaupGrid){
$("#searchSaupGrid").data("kendoGrid").destroy();
}
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
businessName: { type: "string" },
}
},
},
pageSize: 10,
});
$("#searchSaupGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "businessName", title: "사업명", width: "200px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.businessName);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "businessCode", title: "위치이동", width: "50px",
template: function(dataItem){
var businessCode = dataItem.businessCode;
var addButton = "<a href=\"javascript:viewSaupInfo('"+businessCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-search'></button></a>";
return "<div class='td-data'>"+addButton+"</div>";
},
sortable: false,
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function selectComboList(class_name, data, selected_data){
var form_class = $("#"+class_name).kendoDropDownList({
dataSource: data,
dataTextField: "label",
dataValueField: "code",
animation: false,
autoBind: true,
suggest: true,
optionLabel: "=선택=",
});
var dropdownlist = $("#"+class_name).data("kendoDropDownList");
dropdownlist.select(function(dataItem){
return dataItem.code === selected_data;
});
}
function viewHoleInfo(businessCode, holeCode){ //영역검색 상세 정보조회
$.ajax({
url : "/map/holeInfo.do",
type: "POST",
data : {
businessCode : businessCode,
holeCode : holeCode,
},
success : function(data){
resultData = $.parseJSON(data);
holeData = resultData.dataList1;
document.getElementById("busCod").innerHTML = undefinedCheck(holeData[0].businessCode);
document.getElementById("busProcod").innerHTML = undefinedCheck(holeData[0].businessProcessName);
document.getElementById("holCod").innerHTML = undefinedCheck(holeData[0].holeCode);
document.getElementById("holNam").innerHTML = undefinedCheck(holeData[0].holeName);
document.getElementById("holLocsd").innerHTML = undefinedCheck(holeData[0].sdName);
document.getElementById("holLocsgg").innerHTML = undefinedCheck(holeData[0].sggName);
document.getElementById("holLocemd").innerHTML = undefinedCheck(holeData[0].emdName);
document.getElementById("holLocdet").innerHTML = undefinedCheck(holeData[0].businessAddressDetail);
document.getElementById("holcoordi").innerHTML = "EPSG:" + undefinedCheck(holeData[0].holeCoordinate);
document.getElementById("holX").innerHTML = undefinedCheck(holeData[0].holeX);
document.getElementById("holY").innerHTML = undefinedCheck(holeData[0].holeY);
document.getElementById("holeBoringName").innerHTML = undefinedCheck(holeData[0].holeBoringName);
document.getElementById("holeProspecterName").innerHTML = undefinedCheck(holeData[0].holeProspecterName);
document.getElementById("holeStartDate").innerHTML = undefinedCheck(holeData[0].holeStartDate);
document.getElementById("holeEndDate").innerHTML = undefinedCheck(holeData[0].holeEndDate);
document.getElementById("holeElevation").innerHTML = undefinedCheck(holeData[0].holeElevation);
document.getElementById("holeWaterLevel").innerHTML = undefinedCheck(holeData[0].holeWaterLevel);
document.getElementById("holeDrillingDepth").innerHTML = undefinedCheck(holeData[0].holeDrillingDepth);
document.getElementById("holeCasingDepth").innerHTML = undefinedCheck(holeData[0].holeCasingDepth);
document.getElementById("stratumCount").innerHTML = undefinedCheck(holeData[0].stratumCount);
document.getElementById("holeDia").innerHTML = undefinedCheck(holeData[0].holeDia);
document.getElementById("holeBoringMachine").innerHTML = undefinedCheck(holeData[0].holeBoringMachine);
document.getElementById("holeBoringMethod").innerHTML = undefinedCheck(holeData[0].holeBoringMethod);
document.getElementById("holeBoringDirection").innerHTML = undefinedCheck(holeData[0].holeBoringDirection);
document.getElementById("userNm").innerHTML = undefinedCheck(holeData[0].userNm);
document.getElementById("sysRegDt").innerHTML = undefinedCheck(holeData[0].sysRegDt);
document.getElementById("holeRemark").innerHTML = undefinedCheck(holeData[0].holeRemark);
},
complete : function(data) {
holeInfoPopupData.center();
holeInfoPopupData.open();
}
});
}
function viewSurSetInfo(businessCode, consCode){
$.ajax({
url : "/map/instrumentationInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchInstrPopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchInstrPopupSubKendoGrid(resultData.dataList2, consCode, businessCode);
instrumentationInfoPopupData.center();
instrumentationInfoPopupData.open();
}
});
}
function viewVerIncInfo(businessCode, consCode){
$.ajax({
url : "/map/verIncInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchVerIncPopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchVerIncPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
verIncInfoPopupData.center();
verIncInfoPopupData.open();
}
});
}
function viewSetExtInfo(businessCode, consCode){
$.ajax({
url : "/map/setExtInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchSetExtPopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchSetExtPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
setExtInfoPopupData.center();
setExtInfoPopupData.open();
}
});
}
function viewWatPreInfo(businessCode, consCode){
$.ajax({
url : "/map/watPreInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchWatPrePopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchWatPrePopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
watPreInfoPopupData.center();
watPreInfoPopupData.open();
}
});
}
function viewWatLevInfo(businessCode, consCode){
$.ajax({
url : "/map/watLevInfo.do",
type: "POST",
data : {
businessCode : businessCode,
/*searchType : searchType, 계측정보에서 지표침하판이 아닌 다른 정보를 가져올때 주석해제 할 것*/
consCode : consCode
},
success : function(data){
$("#instrMainGrid").find("table").prepend("<caption>테이블 요약</caption>");
resultData = $.parseJSON(data);
},
complete : function(data) {
searchWatLevPopupKendoGrid(resultData.dataList1, consCode, businessCode);
searchWatLevPopupSubKendoGrid(resultData.subDataList,consCode, businessCode);
watLevInfoPopupData.center();
watLevInfoPopupData.open();
}
});
}
function viewSaupInfo(code){ //사업상세정보
//초기화
map.removeLayer(selectedSaup);
$.ajax({
url: '/map/mapSaupHolelist.do',
type: "POST",
data : {
businessCode : code
},
success:function(data){
resultData = $.parseJSON(data);
holeResultData = resultData.dataList1;
surSetResultData = resultData.dataList2;
verIncResultData = resultData.dataList3;
setExtResultData = resultData.dataList4;
watPreResultData = resultData.dataList5;
watLevResultData = resultData.dataList6;
var format = new ol.format.WKT();
var features = [];
for(var i=0; i < holeResultData.length; i++) {
var row = holeResultData[i];
var feature = format.readFeature(row.holePoint);
feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
feature.setId('selected_hole_' + row.businessCode + '_' + row.holeCode);
feature.setProperties({'businessCode': row.businessCode});
feature.setProperties({'business_name': row.businessName});
feature.setProperties({'holeCode': row.holeCode});
feature.setProperties({'hole_name': row.holeName});
features.push(feature);
}
for(var i=0; i < surSetResultData.length; i++) {
var row = surSetResultData[i];
var feature = format.readFeature(row.sursetPoint);
feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
feature.setId('selected_hole_' + row.businessCode + '_' + row.zoneCode);
feature.setProperties({'businessCode': row.businessCode});
feature.setProperties({'business_name': row.businessName});
feature.setProperties({'zone_code': row.zoneCode});
feature.setProperties({'sur_set_code': row.surSetCode});
features.push(feature);
}
var selectedVector = new ol.source.Vector({
features: features //add an array of features
});
selectedSaup = new ol.layer.Vector({
source: selectedVector,
style: [
new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: "#ffcc33" }),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 255, 0.7)',
width: 2,
}),
radius: 7
})
}),
new ol.style.Style({
image: new ol.style.Icon({
src: '../com/img/map-service/icon/icon_map_check.png',
opacity: 0.5,
src: "data:image/svg+xml;utf8," + svg,
scale: 0.5
}),
})
]
})
map.addLayer(selectedSaup);
var dataExtent = selectedVector.getExtent();
map.getView().fit(dataExtent, map.getSize());
map.getView().setZoom(map.getView().getZoom()-1);
document.mapForm.searchType.value = 'saupSearch';
document.mapForm.businessCode.value = code;
},
complete: function(data) {
dataList = resultData.dataList1;
}
});
}
function searchSaupPopupKendoGrid(dataList) {
var saupInfoPopupGrid = $("#saupInfoPopupGrid").data("kendoGrid");
if(saupInfoPopupGrid){
$("#saupInfoPopupGrid").data("kendoGrid").destroy();
}
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
businessName: { type: "string" },
holeName: { type: "string" },
}
},
},
pageSize: 10,
});
$("#saupInfoPopupGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "businessName", title: "사업명", width: "200px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.businessName);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "holeName", title: "구분", width: "120px",
template: function(dataItem){
if(dataItem.holeName != undefined){
var dataResult = "시추공";
}else if(dataItem.surSetCode != undefined){
var dataResult = "지표침하판";
}else if(dataItem.verIncCode != undefined){
var dataResult = "지중경사계";
}else if(dataItem.setExtCode != undefined){
var dataResult = "층별침하계";
}else if(dataItem.watPreCode != undefined){
var dataResult = "간극수압계";
}else if(dataItem.watLevCode != undefined){
var dataResult = "지하수위계";
}
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "businessCode", title: "상세정보", width: "50px",
template: function(dataItem){
let businessCode = dataItem.businessCode;
let holeCode = dataItem.holeCode;
var consCode = dataItem.consCode;
if(dataItem.holeName != undefined){
var addButton = "<a href=\"javascript:viewHoleInfo('"+businessCode+"','"+holeCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-search'></button></a>";
}else if(dataItem.surSetCode != undefined){
var addButton = "<a href=\"javascript:viewSurSetInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}else if(dataItem.verIncCode != undefined){
var addButton = "<a href=\"javascript:viewVerIncInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}else if(dataItem.setExtCode != undefined){
var addButton = "<a href=\"javascript:viewSetExtInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}else if(dataItem.watPreCode != undefined){
var addButton = "<a href=\"javascript:viewWatPreInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}else if(dataItem.watLevCode != undefined){
var addButton = "<a href=\"javascript:viewWatLevInfo('"+businessCode+"','"+consCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
}
return "<div class='td-data'>"+addButton+"</div>";
},
sortable: false,
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
height: "600px",
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchInstrPopupKendoGrid(dataList, searchType, businessCode, consCode) {
$("#instrSubGrid").empty().append("<table></table>");
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
zoneCode: { type: "string" },
surSetCode: { type: "string" },
epsgCodeType: { type: "string" },
pointX: { type: "string" },
pointY: { type: "string" },
}
},
},
pageSize: 10,
});
$("#instrMainGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "zoneCode", title: "구역코드", width: "200px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.zoneCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "surSetCode", title: "지표침하판코드", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.surSetCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "epsgCodeType", title: "좌표계", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.epsgCodeType);
return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
}
},
{
field: "pointX", title: "계측 좌표 X", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointX);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "pointY", title: "계측 좌표 Y", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointY);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{ title: "계측조회",
width: "75px",
template: function(dataItem) {
var consCode = dataItem.consCode;
var addButton = "<a href=\"javascript:instrumentationInfo('"+consCode+"','"+businessCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
return "<div class='td-data'>"+addButton+"</div>";
}
},
{ title: "예측조회",
width: "75px",
template: function(dataItem) {
var consCode = dataItem.consCode;
var addButton = "<a href=\"javascript:predictionInfo('"+consCode+"','"+businessCode+"')\"><button type='button' class='btn btn-ske-blue btn-icon-single btn-icon-write'></button></a>";
return "<div class='td-data'>"+addButton+"</div>";
}
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: false, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
buttonCount: 0,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchInstrPopupSubKendoGrid(dataList, searchType) {
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
measureDt: {type: "date"},
nod: {type: "number"},
nodPer: {type: "number"},
measuringRod: {type: "number"},
subByPeriod: {type: "number"},
subByPeriodForCm: {type: "number"},
amountCumSub: {type: "number"},
groundHeight: {type: "number"},
groundHeightForCm: {type: "number"},
fillHeight: {type: "number"},
fillHeightForCm: {type: "number"},
realFillHeight: {type: "number"},
realFillHeightForCm : {type: "number"},
connSetRod: {type: "number"},
}
},
},
pageSize: 10,
});
$("#instrSubGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "measureDt",
title: "측정일자",
editor: dateEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (measureDt == null) ? '0' : kendo.toString(measureDt, 'yyyy-MM-dd') #</div>",
},
{
field: "nod",
title: "경과일수(일)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (nod == null) ? '0' : nod #</div>",
},
{
field: "nodPer",
title: "기간일수(일)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (nodPer == null) ? '0' : nodPer #</div>",
},
{
field: "measuringRod",
title: "측정봉Top(DL.m)(+)",
editor: chooseEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (measuringRod == null) ? '0' : measuringRod #</div>",
},
{
field: "subByPeriodForCm",
title: "기간별침하량(cm)(+,-)",
editor: chooseEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (subByPeriodForCm == null) ? '0' : subByPeriodForCm #</div>",
},
{
field: "amountCumSub",
title: "누적침하량(cm)(-)",
editor: chooseEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (amountCumSub == null) ? '0' : kendo.toString(amountCumSub, 'n2') #</div>",
},
{
field: "groundHeightForCm",
title: "지반고(DL.cm)(+)",
editor: chooseEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (groundHeightForCm == null) ? '0' : groundHeightForCm #</div>",
},
{
field: "fillHeightForCm",
title: "성토고(cm)(+)",
editor: chooseEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (fillHeightForCm == null) ? '0' : fillHeightForCm #</div>",
},
{
field: "realFillHeightForCm",
title: "실제성토고(DL.cm)(+)",
editor: chooseEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (realFillHeightForCm == null) ? '0' : realFillHeightForCm #</div>",
},
{
field: "connSetRod",
title: "침하봉연결(m)(+)",
editor: chooseEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (connSetRod == null) ? '0' : connSetRod #</div>",
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
height: "475px",
pageable: {
pageSizes: false,
pageSize: 10,
input: true,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchVerIncPopupKendoGrid(dataList, searchType, businessCode, consCode) {
$("#verIncSubGrid").empty().append("<table></table>");
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
zoneCode: { type: "string" },
verIncCode: { type: "string" },
epsgCodeType: { type: "string" },
pointX: { type: "string" },
pointY: { type: "string" },
}
},
},
pageSize: 10,
});
$("#verIncMainGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "zoneCode", title: "구역코드", width: "200px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.zoneCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "verIncCode", title: "지중경사계코드", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.verIncCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "epsgCodeType", title: "좌표계", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.epsgCodeType);
return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
}
},
{
field: "pointX", title: "계측 좌표 X", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointX);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "pointY", title: "계측 좌표 Y", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointY);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: false, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
buttonCount: 0,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchVerIncPopupSubKendoGrid(dataList, searchType) {
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
measureDt: {type: "date"},
depth: {type: "number"},
horizonScale: {type: "number"},
}
},
},
pageSize: 10,
});
$("#verIncSubGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "measureDt",
title: "측정일자",
editor: dateEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (measureDt == null) ? '0' : kendo.toString(measureDt, 'yyyy-MM-dd') #</div>",
},
{
field: "depth",
title: "심도(DL.m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (depth == null) ? '0' : depth #</div>",
},
{
field: "horizonScale",
title: "수평변위(mm)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (horizonScale == null) ? '0' : horizonScale #</div>",
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
height: "475px",
pageable: {
pageSizes: false,
pageSize: 10,
input: true,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchSetExtPopupKendoGrid(dataList, searchType, businessCode, consCode) {
$("#setExtSubGrid").empty().append("<table></table>");
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
zoneCode: { type: "string" },
setExtCode: { type: "string" },
epsgCodeType: { type: "string" },
pointX: { type: "string" },
pointY: { type: "string" },
}
},
},
pageSize: 10,
});
$("#setExtMainGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "zoneCode", title: "구역코드", width: "200px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.zoneCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "setExtCode", title: "층별침하계코드", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.setExtCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "epsgCodeType", title: "좌표계", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.epsgCodeType);
return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
}
},
{
field: "pointX", title: "계측 좌표 X", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointX);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "pointY", title: "계측 좌표 Y", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointY);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: false, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
buttonCount: 0,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchSetExtPopupSubKendoGrid(dataList, searchType) {
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
nod: {type: "number"},
depthByLayer: {type: "number"},
displacement: {type: "number"},
fillHeight: {type: "number"},
}
},
},
pageSize: 10,
});
$("#setExtSubGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "nod",
title: "경과일수(일)",
editor: dateEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (nod == null) ? '' :nod #</div>",
},
{
field: "depthByLayer",
title: "층별깊이(DL(-).m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (depthByLayer == null) ? '' : depthByLayer #</div>",
},
{
field: "displacement",
title: "변위량(m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (displacement == null) ? '' : displacement #</div>",
},
{
field: "fillHeight",
title: "성토고(DL.m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (fillHeight == null) ? '' : fillHeight #</div>",
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
height: "475px",
pageable: {
pageSizes: false,
pageSize: 10,
input: true,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchWatPrePopupKendoGrid(dataList, searchType, businessCode, consCode) {
$("#watPreSubGrid").empty().append("<table></table>");
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
zoneCode: { type: "string" },
watPreCode: { type: "string" },
epsgCodeType: { type: "string" },
pointX: { type: "string" },
pointY: { type: "string" },
}
},
},
pageSize: 10,
});
$("#watPreMainGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "zoneCode", title: "구역코드", width: "200px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.zoneCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "watPreCode", title: "간극수압계코드", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.watPreCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "epsgCodeType", title: "좌표계", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.epsgCodeType);
return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
}
},
{
field: "pointX", title: "계측 좌표 X", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointX);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "pointY", title: "계측 좌표 Y", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointY);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: false, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
buttonCount: 0,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchWatPrePopupSubKendoGrid(dataList, searchType) {
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
nod: {type: "number"},
sensorInstallDepth: {type: "number"},
temperature: {type: "number"},
watPre: {type: "number"},
overWatPre: {type: "number"},
hydPre: {type: "number"},
watPreSen: {type: "number"},
subsidence: {type: "number"},
}
},
},
pageSize: 10,
});
$("#watPreSubGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "nod",
title: "경과일수(일)",
editor: dateEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (nod == null) ? '' :nod #</div>",
},
{
field: "sensorInstallDepth",
title: "센서설치심도",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (sensorInstallDepth == null) ? '' : sensorInstallDepth #</div>",
},
{
field: "temperature",
title: "온도(℃)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (temperature == null) ? '' : temperature #</div>",
},
{
field: "watPre",
title: "간극수압(tf/㎡)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (watPre == null) ? '' : watPre #</div>",
},
{
field: "overWatPre",
title: "과잉간극수압(tf/㎡)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (overWatPre == null) ? '' : overWatPre #</div>",
},
{
field: "hydPre",
title: "정수압(tf/㎡)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (hydPre == null) ? '' : hydPre #</div>",
},
{
field: "watPreSen",
title: "간극수압계센서(DL.m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (watPreSen == null) ? '' : watPreSen #</div>",
},
{
field: "subsidence",
title: "침하량(m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (subsidence == null) ? '' : subsidence #</div>",
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
height: "475px",
pageable: {
pageSizes: false,
pageSize: 10,
input: true,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchWatLevPopupKendoGrid(dataList, searchType, businessCode, consCode) {
$("#watLevSubGrid").empty().append("<table></table>");
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
zoneCode: { type: "string" },
watLevCode: { type: "string" },
epsgCodeType: { type: "string" },
pointX: { type: "string" },
pointY: { type: "string" },
}
},
},
pageSize: 10,
});
$("#watLevMainGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "zoneCode", title: "구역코드", width: "200px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.zoneCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "watLevCode", title: "지하수위계코드", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.watLevCode);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "epsgCodeType", title: "좌표계", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.epsgCodeType);
return "<div class='td-data t-center'> EPSG:" + dataResult + "</div>";
}
},
{
field: "pointX", title: "계측 좌표 X", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointX);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
{
field: "pointY", title: "계측 좌표 Y", width: "120px",
template: function(dataItem){
var dataResult = undefinedCheck(dataItem.pointY);
return "<div class='td-data t-center'>" + dataResult + "</div>";
}
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: false, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
pageable: {
pageSizes: false,
pageSize: 10,
input: false,
refresh: false,
numeric: false,
buttonCount: 0,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function searchWatLevPopupSubKendoGrid(dataList, searchType) {
var dataSource = new kendo.data.DataSource ({
data: dataList,
autoBind: true,
schema: {
model: {
fields: {
measureDt: {type: "date"},
nod: {type: "number"},
measurement: {type: "number"},
watLev: {type: "number"},
topHeight: {type: "number"},
fillHeight: {type: "number"}
}
},
},
pageSize: 10,
});
$("#watLevSubGrid").kendoGrid({
dataSource : dataList,
columns: [
{
field: "measureDt",
title: "측정일자",
editor: dateEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (measureDt == null) ? '0' : kendo.toString(measureDt, 'yyyy-MM-dd') #</div>",
},
{
field: "nod",
title: "경과일수(일)",
editor: dateEditor,
width: "33%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (nod == null) ? '' :nod #</div>",
},
{
field: "measurement",
title: "측정치(DL.m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (measurement == null) ? '' : measurement #</div>",
},
{
field: "watLev",
title: "지하수위(DL.m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (watLev == null) ? '' : watLev #</div>",
},
{
field: "topHeight",
title: "상단고(DL.m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (topHeight == null) ? '' : topHeight #</div>",
},
{
field: "fillHeight",
title: "성토고(DL.m)",
editor: chooseEditor,
width: "25%",
attributes: { style:"text-align: right" },
template: "<div class='td-data'>#= (fillHeight == null) ? '' : fillHeight #</div>",
},
],
sortable: true,
resizable: true,
filterable: false,
scrollable: true, // 페이징이 없는 스크롤만 있는 그리드만 사용(사용시 pageable를 false로 지정)
height: "475px",
pageable: {
pageSizes: false,
pageSize: 10,
input: true,
refresh: false,
numeric: false,
},
noRecords: {
template: "<div class='no-data'></div>"
},
dataBound: onDataBound,
change: onChange,
});
}
function clearOldData(dataObject) {
// 이전 데이터 초기화 로직...
// 전달받은 데이터 객체의 필드 초기화
for (var fieldName in dataObject) {
if (dataObject.hasOwnProperty(fieldName)) {
// 필드 초기화 예시 (원하시는 초기값으로 변경)
dataObject[fieldName] = null;
}
}
}
//입력 type 선택
function chooseEditor(container, options) {
switch (options.model.COLUMN) {
default:
numericEditor(container, options);
break;
}
}
function dateEditor(container, options) {
$('<input id="' + options.field + '" data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDatePicker({
culture: "ko-KR",
format : "yyyy-MM-dd",
change : function(e) {
selectedValue = this.value();
selectedValue = selectedValue.getFullYear() + "-" + (new String((selectedValue.getMonth()+1)).length == 1 ? "0" + (selectedValue.getMonth()+1) : selectedValue.getMonth()+1) + "-" + (new String(selectedValue.getDate()).length == 1 ? "0" + selectedValue.getDate() : selectedValue.getDate());
console.log(selectedValue);
},
});
}
function instrumentationInfo(consCode, businessCode){
var searchType = document.mapForm.searchType.value;
var resultData;
let graphData;
$.ajax({
url : "/map/instrumentationGraphInfo.do",
type: "POST",
data : {
businessCode : businessCode,
consCode : consCode
},
success : function(data){
resultData = $.parseJSON(data);
graphData = resultData.dataList1;
if(graphData.length > 0){
fn_fillingDataSel(graphData);
var chart;
am4core.ready(function() {
chart = am4core.createFromConfig({
"type": "XYChart",
"legend": {
"position": "right"
},
"data": arrFillingData,
"xAxes": [{
"type": "ValueAxis",
"renderer": {
"grid": {
"template": {
"type": "Grid",
"location": 0
}
},
"minGridDistance": 75
},
"title":{
"text" : "기간일수(일)",
"fontWeight" : "bold"
}
}],
"yAxes": [{
"type": "ValueAxis",
"renderer": {
"maxLabelPosition": 0.98
},
"title":{
"text" : "침하량(cm) / 성토고(cm)",
"fontWeight" : "bold"
}
}],
"mouseWheelBehavior" : "zoomX" ,
"series":[
/* {
"type": "LineSeries",
"name": "성토고",
"bullets": {
"values": [{
"type": "CircleBullet",
"tooltipText": "{name}\n: {valueY}cm\n 기간일수\n: {valueX}일"
}],
"template": {
"type": "Bullet"
}
},
"dataFields": {
"valueY": "fillHeightForCm",
"valueX": "nod"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100
},*/
{
"type": "LineSeries",
"name": "성토고",
"fill" : "black",
"fillOpacity": 0,
"dataFields": {
"valueY": "fillHeightForCm",
"valueX": "nod"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltip": {
"numberFormatter": {
"numberFormat": "#,###"
}
}
},
{
"type": "ColumnSeries",
"name": "침하량",
"stroke": "rgba(128, 128, 128, 0.5)",
"column": {
"column.cornerRadiusTopLeft": 10,
"column.cornerRadiusTopRight": 10,
"fillOpacity": 0 // 막대의 색상 투명도 조절
},
"bullets": {
"values": [{
"type": "CircleBullet",
"fillOpacity": 0,
"tooltipText": "{name}\n: {valueY}cm\n 기간일수\n: {valueX}일"
}],
"template": {
"type": "Bullet"
}
},
"dataFields": {
"valueY": "amountCumSub",
"valueX": "nod"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100
},
],
"legend": {
"type": "Legend",
"position": "right"
},
},
document.getElementById('fillingLineChart')
);
chart.cursor = new am4charts.XYCursor();
});
}
},
complete : function(data) {
if(graphData.length > 0){
instrumentationGraphInfoPopupData.center();
instrumentationGraphInfoPopupData.open();
}else{
alert("등록된 계측데이터가 없습니다.");
}
}
});
}
function predictionInfo(consCode, businessCode){
var searchType = document.mapForm.searchType.value;
var resultData;
let graphData;
$.ajax({
url : "/map/predictionGraphInfo.do",
type : "POST",
data : {
businessCode : businessCode,
consCode : consCode
},
success : function(data){
resultData = $.parseJSON(data);
graphData = resultData.dataList1;
graphData2 = resultData.dataList2;
predictList = resultData.predictList;
document.getElementById("surSetCode").innerHTML = undefinedCheck(predictList[0].surSetCode);
document.getElementById("location").innerHTML = undefinedCheck(predictList[0].businessName);
document.getElementById("pointXY").innerHTML = undefinedCheck(predictList[0].pointX) + ', ' + undefinedCheck(predictList[0].pointY);
document.getElementById("resiSet").innerHTML = undefinedCheck(predictList[0].targetSettlement);
document.getElementById("exBankingDate").innerHTML = undefinedCheck(predictList[0].extraBankingDate);
document.getElementById("lastInstrument").innerHTML = undefinedCheck(predictList[0].nod);
let chart;
if(graphData.length > 0){
fn_predictDataSel(graphData);
fn_fillingDataSel(graphData2);
var arr1 = new Array();
arr1 = arrFillingData.concat(arrPredictData);
am4core.ready(function() {
chart = am4core.createFromConfig({
"type": "XYChart",
"legend": {
"position": "right"
},
"data": arr1,
"xAxes": [{
"type": "ValueAxis",
"renderer": {
"grid": {
"template": {
"type": "Grid",
"location": 0
}
},
"minGridDistance": 75
},
"title":{
"text" : "기간일수(일)",
"fontWeight" : "bold"
}
}],
"yAxes": [{
"type": "ValueAxis",
"renderer": {
"maxLabelPosition": 0.98
},
"title":{
"text" : "침하량(cm) / 성토고(cm)",
"fontWeight" : "bold"
}
}],
"mouseWheelBehavior" : "zoomX" ,
"series":[
{
"type": "LineSeries",
"name": "성토고",
"fill" : "black",
"fillOpacity": 0,
"dataFields": {
"valueY": "fillHeightForCm",
"valueX": "nod"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltip": {
"numberFormatter": {
"numberFormat": "#,###"
}
}
},
{
"type": "ColumnSeries",
"name": "침하량",
"stroke": "rgba(128, 128, 128, 0.5)",
"fillOpacity": 0,
"bullets": {
"values": [{
"type": "CircleBullet",
"fillOpacity": 0, // 막대의 색상 투명도 조절
"tooltipText": "{name}\n: {valueY}cm\n 기간일수\n: {valueX}일"
}],
"template": {
"type": "Bullet",
"fillOpacity": 0 // 막대의 색상 투명도 조절
}
},
"dataFields": {
"valueY": "amountCumSub",
"valueX": "nod"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100
},
{
"type": "LineSeries",
"name": "쌍곡선법",
"stroke" : "blue",
"fill" : "blue",
"fillOpacity": 0,
"dataFields": {
"valueY": "predictSettlement1",
"valueX": "sumDays"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100
},
{
"type": "LineSeries",
"name": "비선형 쌍곡선법",
"stroke" : "green",
"fill" : "green",
"fillOpacity": 0,
"dataFields": {
"valueY": "predictSettlement2",
"valueX": "sumDays"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100
},
{
"type": "LineSeries",
"name": "가중 비선형 쌍곡선법",
"stroke" : "black",
"fill" : "black",
"fillOpacity": 0,
"dataFields": {
"valueY": "predictSettlement3",
"valueX": "sumDays"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100
},
{
"type": "LineSeries",
"name": "아사오카법",
"stroke" : "purple",
"fill" : "purple",
"fillOpacity": 0,
"dataFields": {
"valueY": "predictSettlement4",
"valueX": "sumDays"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100
},
{
"type": "LineSeries",
"name": "단계성토 고려법",
"stroke" : "orange",
"fill" : "orange",
"fillOpacity": 0,
"dataFields": {
"valueY": "predictSettlement5",
"valueX": "sumDays"
},
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100
},
],
"legend": {
"type": "Legend",
"position": "right"
},
},
document.getElementById('predictLineChart')
);
chart.cursor = new am4charts.XYCursor();
});
}
},
complete : function(data) {
if(graphData.length > 0){
predictionGraphInfoPopupData.center();
predictionGraphInfoPopupData.open();
}else{
alert("등록된 예측데이터가 없습니다.");
}
}
});
}
var arrFillingData = new Array();
function fn_fillingDataSel(data){
//arrFillingData 초기화
arrFillingData = [];
for(i=0; i<data.length; i++){
arrFillingData[i] = {};
arrFillingData[i]['fillHeightForCm'] = data[i].fillHeightForCm;
arrFillingData[i]['amountCumSub'] = data[i].amountCumSub;
arrFillingData[i]['nod'] = data[i].nod;
}
}
var arrPredictData = new Array();
function fn_predictDataSel(data){
//arrPredictData 초기화
arrPredictData = [];
for(i=0; i<data.length; i++){
arrPredictData[i] = {};
//예측
if(data[i].predictionMethod == '1'){
arrPredictData[i]['predictSettlement1'] = data[i].predictedSettlement;
}else if(data[i].predictionMethod == '2'){
arrPredictData[i]['predictSettlement2'] = data[i].predictedSettlement;
}else if(data[i].predictionMethod == '3'){
arrPredictData[i]['predictSettlement3'] = data[i].predictedSettlement;
}else if(data[i].predictionMethod == '4'){
arrPredictData[i]['predictSettlement4'] = data[i].predictedSettlement;
}else if(data[i].predictionMethod == '5'){
arrPredictData[i]['predictSettlement5'] = data[i].predictedSettlement;
}
arrPredictData[i]['sumDays'] = data[i].sumDays;
}
}
function makePredictionData(){
let businessCode = document.mapForm.businessCode.value;
let consCode = document.mapForm.consCode.value;
if(confirm("예측데이터를 생성하시겠습니까?")){
$.ajax({
url : "/map/makePredictionData.do",
type: "POST",
beforeSend : function(xhr){
loading("#instrumentationGraphInfoPopup", "true");
},
data : {
businessCode : businessCode,
consCode : consCode,
},
success : function(data){
resultData = $.parseJSON(data);
let result = resultData.dataList1;
if(result == "suss"){
loading("#instrumentationGraphInfoPopup","false");
alert("예측데이터 생성에 성공했습니다.");
}else{
alert("예측데이터 생성에 실패했습니다.");
}
},
});
}
}
function getSelectHoleInfo() {
var businessCode = document.mapForm.businessCode.value;
var holeCode = document.mapForm.holeCode.value;
var consCode = document.mapForm.consCode.value;
var searchType = document.mapForm.searchType.value;
var surSetCode = document.mapForm.surSetCode.value;
var verIncCode = document.mapForm.verIncCode.value;
var setExtCode = document.mapForm.setExtCode.value;
var watPreCode = document.mapForm.watPreCode.value;
var watLevCode = document.mapForm.watLevCode.value;
var resultData;
var resultArea = [];
var data = "";
if(document.mapForm.searchType.value == "EachSelect"){
data = businessCode + "%7C%7C" + holeCode;
} else {
resultData = selectFeatures.getArray();
for(var i =0; i<selectFeatures.getLength(); i++){
if( i !== 0 ) {
data += ",";
}
data += resultData[i].A.business_code + "%7C%7C" + resultData[i].A.hole_code;
}
}
return data;
}