Compare commits
No commits in common. "59d13f99b5f8340b79b2c88e24ecb777864e36b4" and "8d8626ae95a98f59bfaeac6ca764c9d75ee2d88d" have entirely different histories.
59d13f99b5
...
8d8626ae95
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -3,111 +3,322 @@
|
||||||
<%@ 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"%>
|
||||||
|
|
||||||
<link href="<c:out value="/css/normalize.css" />" rel="stylesheet">
|
|
||||||
<link href="<c:out value="/css/openlayers/ol.css" />" rel="stylesheet">
|
|
||||||
|
|
||||||
<script src="<c:out value="/js/openlayers/ol.js" />"></script>
|
<script src="<c:out value="/js/openlayers/ol.js" />"></script>
|
||||||
<script src="<c:out value="/js/openlayers/proj4.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/openlayers/ol.css" />" rel="stylesheet">
|
||||||
|
<script src="../../../js/admin/fieldView.js"></script>
|
||||||
<script>
|
<script>
|
||||||
const field_data = JSON.parse('${fieldDataVO.field_data}');
|
function fieldVerify(){
|
||||||
|
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="row justify-content-end bg-white mx-3 py-2">
|
<div class="row justify-content-end bg-white mx-3 py-2">
|
||||||
<div class="section_content">
|
|
||||||
<table class="table table-hover text-center">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<h5>담당자</h5>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>소속</th>
|
|
||||||
<td class="text-center"><c:out value='${userVO.company}' /></td>
|
|
||||||
<th>이름</th>
|
|
||||||
<td class="text-center"><c:out value='${userVO.name}' /></td>
|
|
||||||
<th>연락처</th>
|
|
||||||
<td class="text-center"><c:out value='${userVO.phonenum}' /></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<table class="table table-hover text-center">
|
<div class="section_content">
|
||||||
<thead>
|
|
||||||
<tr>
|
<table class="table table-hover text-center">
|
||||||
<h3>현장수집 데이터</h3>
|
<thead>
|
||||||
</tr>
|
<tr>
|
||||||
</thead>
|
<h5>담당자</h5>
|
||||||
<tbody>
|
</tr>
|
||||||
<tr>
|
</thead>
|
||||||
<th>레이어 ID</th>
|
<tbody>
|
||||||
<td class="text-center"><c:out value="${fieldDataVO.layer_id}" /></td>
|
<tr>
|
||||||
<th>수집일</th>
|
<th>소속</th>
|
||||||
<td class="text-center"><c:out value="${fieldDataVO.save_date}" /></td>
|
<td class="text-center"><c:out value='${userVO.company}' /></td>
|
||||||
</tr>
|
<th>이름</th>
|
||||||
<tr>
|
<td class="text-center"><c:out value='${userVO.name}' /></td>
|
||||||
<th>지역</th>
|
<th>연락처</th>
|
||||||
<td class="text-center"><c:out value="${fieldDataVO.region}" /></td>
|
<td class="text-center"><c:out value='${userVO.phonenum}' /></td>
|
||||||
<th>상태</th>
|
</tr>
|
||||||
<td class="text-center">
|
</tbody>
|
||||||
<c:choose>
|
</table>
|
||||||
<c:when test="${fieldDataVO.status eq '0'}">
|
|
||||||
<span class="label label-warning">수집</span>
|
<table class="table table-hover text-center">
|
||||||
</c:when>
|
<thead>
|
||||||
<c:when test="${fieldDataVO.status eq '1'}">
|
<tr>
|
||||||
<span class="label label-danger">검증실패</span>
|
<h3>현장수집 데이터</h3>
|
||||||
</c:when>
|
</tr>
|
||||||
<c:when test="${fieldDataVO.status eq '2'}">
|
</thead>
|
||||||
<span class="label label-success">검증성공</span>
|
<tbody>
|
||||||
</c:when>
|
<tr>
|
||||||
<c:when test="${fieldDataVO.status eq '3'}">
|
<th>레이어 ID</th>
|
||||||
<span class="label label-danger">반영실패</span>
|
<td class="text-center"><c:out value="${fieldDataVO.layer_id}" /></td>
|
||||||
</c:when>
|
<th>수집일</th>
|
||||||
<c:when test="${fieldDataVO.status eq '4'}">
|
<td class="text-center"><c:out value="${fieldDataVO.save_date}" /></td>
|
||||||
<span class="label label-success">반영</span>
|
</tr>
|
||||||
</c:when>
|
<tr>
|
||||||
</c:choose>
|
<th>지역</th>
|
||||||
</td>
|
<td class="text-center"><c:out value="${fieldDataVO.region}" /></td>
|
||||||
</tr>
|
<th>상태</th>
|
||||||
<tr>
|
<td class="text-center">
|
||||||
<th>설명</th>
|
<c:choose>
|
||||||
<td></td>
|
<c:when test="${fieldDataVO.status eq '0'}">
|
||||||
<th>오류내용</th>
|
<span class="label label-warning">수집</span>
|
||||||
<td></td>
|
</c:when>
|
||||||
</tr>
|
<c:when test="${fieldDataVO.status eq '1'}">
|
||||||
</tbody>
|
<span class="label label-danger">검증실패</span>
|
||||||
</table>
|
</c:when>
|
||||||
<div class="table table-hover text-center">
|
<c:when test="${fieldDataVO.status eq '2'}">
|
||||||
<div class="mapWrap">
|
<span class="label label-success">검증성공</span>
|
||||||
<div class="map-title text-center">측량데이터</div>
|
</c:when>
|
||||||
<div class="map" id="map"> </div>
|
<c:when test="${fieldDataVO.status eq '3'}">
|
||||||
</div>
|
<span class="label label-danger">반영실패</span>
|
||||||
<div class="fieldDataDiv">
|
</c:when>
|
||||||
<table class="fieldDataTable" id="fieldDataTable">
|
<c:when test="${fieldDataVO.status eq '4'}">
|
||||||
<thead>
|
<span class="label label-success">반영</span>
|
||||||
<tr>
|
</c:when>
|
||||||
<th colspan="4">속성정보</th>
|
</c:choose>
|
||||||
</tr>
|
</td>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody id="fieldDataBody">
|
<tr>
|
||||||
|
<th>설명</th>
|
||||||
|
<td></td>
|
||||||
|
<th>오류내용</th>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
</tbody>
|
<div class="table table-hover text-center">
|
||||||
</table>
|
|
||||||
</div>
|
<div class="mapWrap">
|
||||||
<ul id="fieldDataPaging" class="fieldDataPaging"></ul>
|
<div class="map-title text-center">측량데이터</div>
|
||||||
</div>
|
|
||||||
<div class="section_btn">
|
<div class="map" id="map"> </div>
|
||||||
<p class="search_p1">
|
</div>
|
||||||
<input class="btn btn-primary" type="button" value="목록" onclick="location.href='/admin/fieldData'" />
|
|
||||||
</p>
|
|
||||||
<p class="search_p2">
|
<div class="fieldDataDiv">
|
||||||
<input class="btn btn-secondary" type="button" value="표준DB변환 및 검증" onclick="fieldVerify();" />
|
<table class="fieldDataTable" id="fieldDataTable">
|
||||||
<input class="btn btn-success" type="button" value="반영" onclick="fieldReflect();" />
|
<thead>
|
||||||
</p>
|
<tr>
|
||||||
</div>
|
<th colspan="4">속성정보</th>
|
||||||
</div>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="fieldDataBody">
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul id="fieldDataPaging" class="fieldDataPaging"></ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="section_btn">
|
||||||
|
<p class="search_p1">
|
||||||
|
<input class="btn btn-primary" type="button" value="목록" onclick="location.href='/admin/fieldData'" />
|
||||||
|
</p>
|
||||||
|
<p class="search_p2">
|
||||||
|
<input class="btn btn-secondary" type="button" value="표준DB변환 및 검증" onclick="fieldVerify();" />
|
||||||
|
<input class="btn btn-success" type="button" value="반영" onclick="fieldReflect();" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -20,6 +20,8 @@
|
||||||
#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>
|
||||||
|
|
@ -30,7 +32,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 class="overflow-hidden htmlBody">
|
<body style="overflow-y: hidden">
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
<tiles:insertAttribute name="center"/>
|
<tiles:insertAttribute name="center"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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="htmlBody">
|
<body class="overflow-hidden">
|
||||||
<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 overflow-auto">
|
<section class="section">
|
||||||
<tiles:insertAttribute name="center"/>
|
<tiles:insertAttribute name="center"/>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -27,10 +27,7 @@
|
||||||
<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">
|
<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>
|
||||||
|
|
@ -67,12 +67,16 @@ 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 {
|
||||||
|
|
|
||||||
|
|
@ -1,211 +1,202 @@
|
||||||
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({
|
function fieldVerify(){
|
||||||
title : 'vworldMap',
|
alert('준비중');
|
||||||
visible : true,
|
}
|
||||||
type : 'base',
|
|
||||||
source : new ol.source.XYZ({
|
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'
|
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({
|
||||||
let view = new ol.View({
|
center : ol.proj.transform([ 203766.984, 541132.2 ], 'EPSG:5186', 'EPSG:3857'),
|
||||||
center : ol.proj.transform([ 203766.984, 541132.2 ], 'EPSG:5186', 'EPSG:3857'),
|
zoom : 18, // 초기화면 zoom level
|
||||||
zoom : 18, // 초기화면 zoom level
|
minZoom : 1, // 최소 zoom level
|
||||||
minZoom : 1, // 최소 zoom level
|
maxZoom : 19, // 최대 zoom level
|
||||||
maxZoom : 19, // 최대 zoom level
|
|
||||||
});
|
});
|
||||||
|
|
||||||
let map = new ol.Map({
|
var 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 ],
|
layers : [ baseMap ],
|
||||||
logo : false, //우측하단 로고 제거
|
logo : false, //우측하단 로고 제거
|
||||||
target : 'map',
|
target : 'map',
|
||||||
loadTilesWhileAnimating : true,
|
loadTilesWhileAnimating : true,
|
||||||
view : view
|
view : view
|
||||||
});
|
|
||||||
drawingObj();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function fieldVerify(){
|
var format = new ol.format.WKT();
|
||||||
alert('준비중');
|
var objVectorSource = new ol.source.Vector({});
|
||||||
}
|
var objVectorLayer = new ol.layer.Vector({
|
||||||
|
source : objVectorSource,
|
||||||
|
style : objStyle
|
||||||
|
});
|
||||||
|
|
||||||
function fieldReflect(){
|
var cursorStyle = "";
|
||||||
alert('준비중');
|
var selected = null;
|
||||||
}
|
map.on("pointermove", function(e) {
|
||||||
|
if (selected !== null) {
|
||||||
map.on("pointermove", function(e) {
|
|
||||||
if (selected !== null) {
|
|
||||||
selected.setStyle(undefined);
|
selected.setStyle(undefined);
|
||||||
selected = null;
|
selected = null;
|
||||||
}
|
}
|
||||||
var newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
|
var newStyle = this.hasFeatureAtPixel(e.pixel) ? "pointer" : "";
|
||||||
newStyle !== cursorStyle && $(this.getTargetElement()).css("cursor", cursorStyle = newStyle);
|
newStyle !== cursorStyle && $(this.getTargetElement()).css("cursor", cursorStyle = newStyle);
|
||||||
map.forEachFeatureAtPixel(e.pixel, function(f) {
|
map.forEachFeatureAtPixel(e.pixel, function(f) {
|
||||||
selected = f;
|
selected = f;
|
||||||
f.setStyle(highlightStyle);
|
f.setStyle(highlightStyle);
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var highlightStyle = new ol.style.Style({
|
||||||
// feature click evt
|
stroke : new ol.style.Stroke({
|
||||||
map.on('click', function(event) {
|
color : '#3399CC',
|
||||||
map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
|
width : 8,
|
||||||
var idx = feature.get("idx");
|
}),
|
||||||
makePropTable(idx);
|
|
||||||
})
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function objStyle(feature, resolution) {
|
// feature click evt
|
||||||
var selected = feature.get('selected');
|
map.on('click', function(event) {
|
||||||
var style = null;
|
map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
|
||||||
if (selected) {
|
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({
|
style = new ol.style.Style({
|
||||||
stroke : new ol.style.Stroke({
|
stroke : new ol.style.Stroke({
|
||||||
color : '#f00',
|
color : '#f00',
|
||||||
width : 5
|
width : 5
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
style = new ol.style.Style({
|
style = new ol.style.Style({
|
||||||
stroke : new ol.style.Stroke({
|
stroke : new ol.style.Stroke({
|
||||||
color : '#52b4e7',
|
color : '#52b4e7',
|
||||||
width : 5
|
width : 5
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return style;
|
return style;
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetObjStyle() {
|
function resetObjStyle() {
|
||||||
var feature = getObjFeatureBySelected();
|
var feature = getObjFeatureBySelected();
|
||||||
if (feature) {
|
if (feature) {
|
||||||
feature.set("selected", false);
|
feature.set("selected", false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function makePropTable(idx) {
|
function makePropTable(idx) {
|
||||||
if (idx == null)
|
if (idx == null)
|
||||||
idx = 0;
|
idx = 0;
|
||||||
$("#fieldDataBody > tr").remove();
|
$("#fieldDataBody > tr").remove();
|
||||||
|
|
||||||
var num = 0;
|
var num = 0;
|
||||||
var tags = "";
|
var tags = "";
|
||||||
for(var i in field_data[idx].prop) {
|
for(var i in field_data[idx].prop) {
|
||||||
num++;
|
num++;
|
||||||
if(num % 2 == 0){
|
if(num % 2 == 0){
|
||||||
tags += "<th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td></tr>";
|
tags += "<th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td></tr>";
|
||||||
}else{
|
}else{
|
||||||
tags += "<tr><th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td>";
|
tags += "<tr><th>" + i + "</th><td>" + field_data[idx].prop[i] + "</td>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$("#fieldDataBody").append(tags);
|
$("#fieldDataBody").append(tags);
|
||||||
|
|
||||||
nowPagingOn(idx);
|
nowPagingOn(idx);
|
||||||
resetObjStyle();
|
resetObjStyle();
|
||||||
|
|
||||||
//중심좌표 구하기?
|
//중심좌표 구하기?
|
||||||
//var aa = feature.getGeometry().v;
|
//var aa = feature.getGeometry().v;
|
||||||
//var oo = ol.extent.getCenter(aa);
|
//var oo = ol.extent.getCenter(aa);
|
||||||
|
|
||||||
var center = field_data[idx].center;
|
var center = field_data[idx].center;
|
||||||
var feature = getObjFeatureByIdx(idx);
|
var feature = getObjFeatureByIdx(idx);
|
||||||
|
|
||||||
moveCenter(center);
|
moveCenter(center);
|
||||||
if (feature) {
|
if (feature) {
|
||||||
feature.set("selected", true);
|
feature.set("selected", true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function nowPagingOn(idx){
|
function nowPagingOn(idx){
|
||||||
$(".paging_li").removeClass("fieldPagingOn")
|
$(".paging_li").removeClass("fieldPagingOn")
|
||||||
$("#paging_li"+idx).attr("class", "fieldPagingOn paging_li");
|
$("#paging_li"+idx).attr("class", "fieldPagingOn paging_li");
|
||||||
}
|
}
|
||||||
|
|
||||||
function makePropPaging() {
|
function makePropPaging() {
|
||||||
var pagingNumber = 0;
|
var pagingNumber = 0;
|
||||||
for (var idx in field_data) {
|
for (var idx in field_data) {
|
||||||
pagingNumber++;
|
pagingNumber++;
|
||||||
$("#fieldDataPaging").append('<li class="paging_li" id="paging_li'+idx+'" onclick="makePropTable(' + idx + ')">' + pagingNumber+ '</li>');
|
$("#fieldDataPaging").append('<li class="paging_li" id="paging_li'+idx+'" onclick="makePropTable(' + idx + ')">' + pagingNumber+ '</li>');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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, {
|
||||||
dataProjection : 'EPSG:5186',
|
dataProjection : 'EPSG:5186',
|
||||||
featureProjection : 'EPSG:3857'
|
featureProjection : 'EPSG:3857'
|
||||||
});
|
});
|
||||||
objFeature.setProperties({
|
objFeature.setProperties({
|
||||||
"idx" : idx,
|
"idx" : idx,
|
||||||
"selected" : false
|
"selected" : false
|
||||||
});
|
});
|
||||||
objFeatures.push(objFeature);
|
objFeatures.push(objFeature);
|
||||||
}
|
}
|
||||||
objVectorSource.addFeatures(objFeatures);
|
objVectorSource.addFeatures(objFeatures);
|
||||||
|
map.addLayer(objVectorLayer);
|
||||||
}
|
}
|
||||||
|
|
||||||
function moveCenter(center) {
|
function moveCenter(center) {
|
||||||
var coordinates = ol.proj.transform(center, 'EPSG:5186', 'EPSG:3857');
|
var coordinates = ol.proj.transform(center, 'EPSG:5186', 'EPSG:3857');
|
||||||
map.getView().setCenter(coordinates);
|
map.getView().setCenter(coordinates);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getObjFeatureBySelected() {
|
function getObjFeatureBySelected() {
|
||||||
var features = objVectorSource.getFeatures();
|
var features = objVectorSource.getFeatures();
|
||||||
var feature = null;
|
var feature = null;
|
||||||
|
|
||||||
for (var i = 0, size = features.length; i < size; i++) {
|
for (var i = 0, size = features.length; i < size; i++) {
|
||||||
if (features[i].get('selected') == true) {
|
if (features[i].get('selected') == true) {
|
||||||
feature = features[i];
|
feature = features[i];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return feature;
|
return feature;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getObjFeatureByIdx(idx) {
|
function getObjFeatureByIdx(idx) {
|
||||||
var features = objVectorSource.getFeatures();
|
var features = objVectorSource.getFeatures();
|
||||||
var feature = null;
|
var feature = null;
|
||||||
for (var i = 0, size = features.length; i < size; i++) {
|
for (var i = 0, size = features.length; i < size; i++) {
|
||||||
if (features[i].get('idx') == idx) {
|
if (features[i].get('idx') == idx) {
|
||||||
feature = features[i];
|
feature = features[i];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return feature;
|
return feature;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue