DBNT
/
GGWEB
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

현장수집데이터 > 상세 페이지 지도 오류 수정.

master
강석 최 2022-03-02 17:41:35 +09:00
parent a45da2b87c
commit 614e8fa41e
7 changed files with 271 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/webapp/WEB-INF/jsp/admin/dashBoard.jsp
View File

@ -4,7 +4,7 @@
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%> <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<script src="../../../js/admin/dashBoard.js"></script> <%--<script src="/js/admin/dashBoard.js"></script>--%>
<div class="container"> <div class="container">
<div class="row"> <div class="row">

218
src/main/webapp/WEB-INF/jsp/admin/fieldView.jsp
View File

@ -3,220 +3,23 @@
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%> <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<script src="<c:out value="/js/openlayers/ol.js" />"></script>
<script src="<c:out value="/js/openlayers/proj4.js" />"></script>
<link href="<c:out value="/css/normalize.css" />" rel="stylesheet"> <link href="<c:out value="/css/normalize.css" />" rel="stylesheet">
<link href="<c:out value="/css/openlayers/ol.css" />" rel="stylesheet"> <link href="<c:out value="/css/openlayers/ol.css" />" rel="stylesheet">
<script src="../../../js/admin/fieldView.js"></script>
<script src="<c:out value="/js/openlayers/ol.js" />"></script>
<script src="<c:out value="/js/openlayers/proj4.js" />"></script>
<script> <script>
function fieldVerify(){ const field_data = JSON.parse('${fieldDataVO.field_data}');
alert('준비중');
}
function fieldReflect(){
alert('준비중');
}
$(function() {
drawingObj();
makePropPaging();
makePropTable();
});
var field_data = JSON.parse('${fieldDataVO.field_data}');
var wkt = null;
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');
var baseMap = new ol.layer.Tile({
title : 'vworldMap',
visible : true,
type : 'base',
source : new ol.source.XYZ({
url : 'http://api.vworld.kr/req/wmts/1.0.0/5616CAD1-5D79-3EE3-87D5-878A4AD0F91F/Base/{z}/{y}/{x}.png'
})
});
var view = new ol.View({
center : ol.proj.transform([ 203766.984, 541132.2 ], 'EPSG:5186', 'EPSG:3857'),
zoom : 18, // 초기화면 zoom level
minZoom : 1, // 최소 zoom level
maxZoom : 19, // 최대 zoom level
});
var map = new ol.Map({
layers : [ baseMap ],
logo : false, //우측하단 로고 제거
target : 'map',
loadTilesWhileAnimating : true,
view : view
});
var format = new ol.format.WKT();
var objVectorSource = new ol.source.Vector({});
var objVectorLayer = new ol.layer.Vector({
source : objVectorSource,
style : objStyle
});
var cursorStyle = "";
var selected = null;
map.on("pointermove", function(e) {
if (selected !== null) {
selected.setStyle(undefined);
selected = null;
}
var newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
newStyle !== cursorStyle && $(this.getTargetElement()).css("cursor", cursorStyle = newStyle);
map.forEachFeatureAtPixel(e.pixel, function(f) {
selected = f;
f.setStyle(highlightStyle);
return true;
});
});
var highlightStyle = new ol.style.Style({
stroke : new ol.style.Stroke({
color : '#3399CC',
width : 8,
}),
});
// feature click evt
map.on('click', function(event) {
map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
var idx = feature.get("idx");
makePropTable(idx);
})
});
function objStyle(feature, resolution) {
var selected = feature.get('selected');
var style = null;
if (selected) {
style = new ol.style.Style({
stroke : new ol.style.Stroke({
color : '#f00',
width : 5
})
});
} else {
style = new ol.style.Style({
stroke : new ol.style.Stroke({
color : '#52b4e7',
width : 5
})
});
}
return style;
}
function resetObjStyle() {
var feature = getObjFeatureBySelected();
if (feature) {
feature.set("selected", false);
}
}
function makePropTable(idx) {
if (idx == null)
idx = 0;
$("#fieldDataBody > tr").remove();
var num = 0;
var tags = "";
for(var i in field_data[idx].prop) {
num++;
if(num % 2 == 0){
tags += "<th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td></tr>";
}else{
tags += "<tr><th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td>";
}
}
$("#fieldDataBody").append(tags);
nowPagingOn(idx);
resetObjStyle();
//중심좌표 구하기?
//var aa = feature.getGeometry().v;
//var oo = ol.extent.getCenter(aa);
var center = field_data[idx].center;
var feature = getObjFeatureByIdx(idx);
moveCenter(center);
if (feature) {
feature.set("selected", true);
}
}
function nowPagingOn(idx){
$(".paging_li").removeClass("fieldPagingOn")
$("#paging_li"+idx).attr("class", "fieldPagingOn paging_li");
}
function makePropPaging() {
var pagingNumber = 0;
for (var idx in field_data) {
pagingNumber++;
$("#fieldDataPaging").append('<li class="paging_li" id="paging_li'+idx+'" onclick="makePropTable(' + idx + ')">' + pagingNumber+ '</li>');
}
}
function drawingObj() {
objVectorSource.clear();
var objFeatures = [];
for (var idx in field_data) {
var objFeature = format.readFeature(field_data[idx].WKT, {
dataProjection : 'EPSG:5186',
featureProjection : 'EPSG:3857'
});
objFeature.setProperties({
"idx" : idx,
"selected" : false
});
objFeatures.push(objFeature);
}
objVectorSource.addFeatures(objFeatures);
map.addLayer(objVectorLayer);
}
function moveCenter(center) {
var coordinates = ol.proj.transform(center, 'EPSG:5186', 'EPSG:3857');
map.getView().setCenter(coordinates);
}
function getObjFeatureBySelected() {
var features = objVectorSource.getFeatures();
var feature = null;
for (var i = 0, size = features.length; i < size; i++) {
if (features[i].get('selected') == true) {
feature = features[i];
break;
}
}
return feature;
}
function getObjFeatureByIdx(idx) {
var features = objVectorSource.getFeatures();
var feature = null;
for (var i = 0, size = features.length; i < size; i++) {
if (features[i].get('idx') == idx) {
feature = features[i];
break;
}
}
return feature;
}
</script> </script>
<script src="<c:out value="/js/admin/fieldView.js" />"></script>
<div class="section_title"> <div class="section_title">
<!-- <p>현장 지원 시스템</p> --> <!-- <p>현장 지원 시스템</p> -->
</div> </div>
<div class="section_content"> <div class="section_content">
<table class="detail_table"> <table class="detail_table">
<thead> <thead>
<tr> <tr>
@ -282,14 +85,11 @@
</table> </table>
<div class="field_data_content"> <div class="field_data_content">
<div class="mapWrap"> <div class="mapWrap">
<div class="map-title">측량데이터</div> <div class="map-title">측량데이터</div>
<div class="map" id="map"> </div> <div class="map" id="map"> </div>
</div> </div>
<div class="fieldDataDiv"> <div class="fieldDataDiv">
<table class="fieldDataTable" id="fieldDataTable"> <table class="fieldDataTable" id="fieldDataTable">
<thead> <thead>
@ -302,11 +102,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<ul id="fieldDataPaging" class="fieldDataPaging"></ul> <ul id="fieldDataPaging" class="fieldDataPaging"></ul>
</div> </div>

4
src/main/webapp/WEB-INF/jsp/layout/template_login.jsp
View File

@ -20,8 +20,6 @@
#wrap{ #wrap{
background-image: url("/images/main1.jpg"); background-image: url("/images/main1.jpg");
background-size: cover; background-size: cover;
margin: 0;
padding: 0;
height: 1080px; height: 1080px;
} }
</style> </style>
@ -32,7 +30,7 @@
<script src="<c:url value='/js/jquery-ui.min.js' />"></script> <script src="<c:url value='/js/jquery-ui.min.js' />"></script>
<script src="<c:url value="/js/bootstrap-5.1.3.min.js"/>"></script> <script src="<c:url value="/js/bootstrap-5.1.3.min.js"/>"></script>
</head> </head>
<body style="overflow-y: hidden"> <body class="overflow-hidden htmlBody">
<div id="wrap"> <div id="wrap">
<tiles:insertAttribute name="center"/> <tiles:insertAttribute name="center"/>
</div> </div>

4
src/main/webapp/WEB-INF/jsp/layout/template_main.jsp
View File

@ -23,11 +23,11 @@
<script src="<c:url value='/js/jquery-ui.min.js' />"></script> <script src="<c:url value='/js/jquery-ui.min.js' />"></script>
<script src="<c:url value="/js/bootstrap-5.1.3.min.js"/>"></script> <script src="<c:url value="/js/bootstrap-5.1.3.min.js"/>"></script>
</head> </head>
<body class="overflow-hidden"> <body class="htmlBody">
<div id="wrap"> <div id="wrap">
<tiles:insertAttribute name="header"/> <tiles:insertAttribute name="header"/>
<tiles:insertAttribute name="left"/> <tiles:insertAttribute name="left"/>
<section class="section"> <section class="section overflow-auto">
<tiles:insertAttribute name="center"/> <tiles:insertAttribute name="center"/>
</section> </section>
</div> </div>

3
src/main/webapp/WEB-INF/tiles/tiles.xml
View File

@ -30,4 +30,7 @@
<definition name="*/*" extends="mainTemplate"> <definition name="*/*" extends="mainTemplate">
<put-attribute name="center" value="/WEB-INF/jsp/{1}/{2}.jsp" /> <put-attribute name="center" value="/WEB-INF/jsp/{1}/{2}.jsp" />
</definition> </definition>
<definition name="*/*/*" extends="mainTemplate">
<put-attribute name="center" value="/WEB-INF/jsp/{1}/{2}.jsp" />
</definition>
</tiles-definitions> </tiles-definitions>

10
src/main/webapp/css/style.css
View File

@ -67,16 +67,12 @@ a {
color: #fff; color: #fff;
font-size: 17px; font-size: 17px;
} }
.htmlBody{
background-color: rgb(247, 247, 247);
}
.section { .section {
margin-top: 70px; margin-top: 70px;
margin-left: 200px; margin-left: 200px;
min-width: 1160px;
min-height: 100px;
overflow: hidden;
padding-top: 20px;
height: 100vh;
background-color: rgb(247, 247, 247);
} }
.loginWrap { .loginWrap {

107
src/main/webapp/js/admin/fieldView.js
View File

@ -1,4 +1,61 @@
let wkt = null;
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');
let baseMap = new ol.layer.Tile({
title : 'vworldMap',
visible : true,
type : 'base',
source : new ol.source.XYZ({
url : 'http://api.vworld.kr/req/wmts/1.0.0/5616CAD1-5D79-3EE3-87D5-878A4AD0F91F/Base/{z}/{y}/{x}.png'
})
});
let view = new ol.View({
center : ol.proj.transform([ 203766.984, 541132.2 ], 'EPSG:5186', 'EPSG:3857'),
zoom : 18, // 초기화면 zoom level
minZoom : 1, // 최소 zoom level
maxZoom : 19, // 최대 zoom level
});
let map = new ol.Map({
layers : [ baseMap ],
logo : false, //우측하단 로고 제거
target : 'map',
loadTilesWhileAnimating : true,
view : view
});
let format = new ol.format.WKT();
let objVectorSource = new ol.source.Vector({});
let objVectorLayer = new ol.layer.Vector({
source : objVectorSource,
style : objStyle
});
let cursorStyle = "";
let selected = null;
let highlightStyle = new ol.style.Style({
stroke : new ol.style.Stroke({
color : '#3399CC',
width : 8,
}),
});
$(function() {
makePropPaging();
makePropTable();
map = new ol.Map({
layers : [ baseMap ],
logo : false, //우측하단 로고 제거
target : 'map',
loadTilesWhileAnimating : true,
view : view
});
drawingObj();
});
function fieldVerify(){ function fieldVerify(){
alert('준비중'); alert('준비중');
@ -8,48 +65,6 @@
alert('준비중'); alert('준비중');
} }
$(function() {
drawingObj();
makePropPaging();
makePropTable();
});
var field_data = JSON.parse('${fieldDataVO.field_data}');
var wkt = null;
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');
var baseMap = new ol.layer.Tile({
title : 'vworldMap',
visible : true,
type : 'base',
source : new ol.source.XYZ({
url : 'http://api.vworld.kr/req/wmts/1.0.0/5616CAD1-5D79-3EE3-87D5-878A4AD0F91F/Base/{z}/{y}/{x}.png'
})
});
var view = new ol.View({
center : ol.proj.transform([ 203766.984, 541132.2 ], 'EPSG:5186', 'EPSG:3857'),
zoom : 18, // 초기화면 zoom level
minZoom : 1, // 최소 zoom level
maxZoom : 19, // 최대 zoom level
});
var map = new ol.Map({
layers : [ baseMap ],
logo : false, //우측하단 로고 제거
target : 'map',
loadTilesWhileAnimating : true,
view : view
});
var format = new ol.format.WKT();
var objVectorSource = new ol.source.Vector({});
var objVectorLayer = new ol.layer.Vector({
source : objVectorSource,
style : objStyle
});
var cursorStyle = "";
var selected = null;
map.on("pointermove", function(e) { map.on("pointermove", function(e) {
if (selected !== null) { if (selected !== null) {
selected.setStyle(undefined); selected.setStyle(undefined);
@ -64,12 +79,6 @@
}); });
}); });
var highlightStyle = new ol.style.Style({
stroke : new ol.style.Stroke({
color : '#3399CC',
width : 8,
}),
});
// feature click evt // feature click evt
map.on('click', function(event) { map.on('click', function(event) {
@ -155,6 +164,7 @@
function drawingObj() { function drawingObj() {
objVectorSource.clear(); objVectorSource.clear();
map.addLayer(objVectorLayer);
var objFeatures = []; var objFeatures = [];
for (var idx in field_data) { for (var idx in field_data) {
var objFeature = format.readFeature(field_data[idx].WKT, { var objFeature = format.readFeature(field_data[idx].WKT, {
@ -168,7 +178,6 @@
objFeatures.push(objFeature); objFeatures.push(objFeature);
} }
objVectorSource.addFeatures(objFeatures); objVectorSource.addFeatures(objFeatures);
map.addLayer(objVectorLayer);
} }
function moveCenter(center) { function moveCenter(center) {