현장수집 데이터 상세페이지 모달 변환.
parent
45549079cb
commit
6913c45c75
|
|
@ -480,7 +480,7 @@ public class AdminController {
|
||||||
|
|
||||||
model.addAttribute("fieldDataVO", fieldDataVO);
|
model.addAttribute("fieldDataVO", fieldDataVO);
|
||||||
model.addAttribute("userVO", userVO);
|
model.addAttribute("userVO", userVO);
|
||||||
return "admin/fieldView";
|
return "admin/html/fieldView";
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
// TODO: handle exception
|
// TODO: handle exception
|
||||||
e.printStackTrace();
|
e.printStackTrace();
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card my-2">
|
<%--<div class="card my-2">
|
||||||
<div class="card-body row">
|
<div class="card-body row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<img src="/images/icon/icon_002.png" width="60" height="60" alt="">
|
<img src="/images/icon/icon_002.png" width="60" height="60" alt="">
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
<h3>0</h3>
|
<h3>0</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>--%>
|
||||||
<div class="card my-2">
|
<div class="card my-2">
|
||||||
<div class="card-body row">
|
<div class="card-body row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
<div id="mapUseFromDayChart"></div>
|
<div id="mapUseFromDayChart"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card my-2">
|
<%--<div class="card my-2">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<p class="mb-0 text-black-50">-</p>
|
<p class="mb-0 text-black-50">-</p>
|
||||||
|
|
@ -119,7 +119,7 @@
|
||||||
그래프
|
그래프
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>--%>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,13 @@
|
||||||
<%@ 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/proj4.js" />"></script>
|
||||||
|
|
||||||
<script src="<c:url value="/js/admin/fieldData.js"/>"></script>
|
<script src="<c:url value="/js/admin/fieldData.js"/>"></script>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.searchList > li {
|
.searchList > li {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
@ -18,35 +22,35 @@
|
||||||
<div class="row justify-content-between bg-white mx-3 py-2">
|
<div class="row justify-content-between bg-white mx-3 py-2">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="nav-item">
|
<li class="nav-item statusTab">
|
||||||
<a class="nav-link ${fieldDataSearchVO.status0 eq 1?'active':'disabled'}" href="#">
|
<a class="nav-link ${fieldDataSearchVO.status0 eq 1?'active':'disabled'}" href="#">
|
||||||
<input type="checkbox" class="statusChkBox d-none" name="status0" id="status0"
|
<input type="checkbox" class="statusChkBox d-none" name="status0" id="status0"
|
||||||
value="1" ${fieldDataSearchVO.status0 eq 1?'checked':''}>
|
value="1" ${fieldDataSearchVO.status0 eq 1?'checked':''}>
|
||||||
<label for="status0">수집</label>
|
<label for="status0">수집</label>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item statusTab">
|
||||||
<a class="nav-link ${fieldDataSearchVO.status1 eq 1?'active':'disabled'}" href="#">
|
<a class="nav-link ${fieldDataSearchVO.status1 eq 1?'active':'disabled'}" href="#">
|
||||||
<input type="checkbox" class="statusChkBox d-none" name="status1" id="status1"
|
<input type="checkbox" class="statusChkBox d-none" name="status1" id="status1"
|
||||||
value="1" ${fieldDataSearchVO.status1 eq 1?'checked':''}>
|
value="1" ${fieldDataSearchVO.status1 eq 1?'checked':''}>
|
||||||
<label for="status1">검증실패</label>
|
<label for="status1">검증실패</label>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item statusTab">
|
||||||
<a class="nav-link ${fieldDataSearchVO.status2 eq 1?'active':'disabled'}" href="#">
|
<a class="nav-link ${fieldDataSearchVO.status2 eq 1?'active':'disabled'}" href="#">
|
||||||
<input type="checkbox" class="statusChkBox d-none" name="status2" id="status2"
|
<input type="checkbox" class="statusChkBox d-none" name="status2" id="status2"
|
||||||
value="1" ${fieldDataSearchVO.status2 eq 1?'checked':''}>
|
value="1" ${fieldDataSearchVO.status2 eq 1?'checked':''}>
|
||||||
<label for="status2">검증</label>
|
<label for="status2">검증</label>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item statusTab">
|
||||||
<a class="nav-link ${fieldDataSearchVO.status3 eq 1?'active':'disabled'}">
|
<a class="nav-link ${fieldDataSearchVO.status3 eq 1?'active':'disabled'}">
|
||||||
<input type="checkbox" class="statusChkBox d-none" name="status3" id="status3"
|
<input type="checkbox" class="statusChkBox d-none" name="status3" id="status3"
|
||||||
value="1" ${fieldDataSearchVO.status3 eq 1?'checked':''}>
|
value="1" ${fieldDataSearchVO.status3 eq 1?'checked':''}>
|
||||||
<label for="status3">반영실패</label>
|
<label for="status3">반영실패</label>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item statusTab">
|
||||||
<a class="nav-link ${fieldDataSearchVO.status4 eq 1?'active':'disabled'}" href="#">
|
<a class="nav-link ${fieldDataSearchVO.status4 eq 1?'active':'disabled'}" href="#">
|
||||||
<input type="checkbox" class="statusChkBox d-none" name="status4" id="status4"
|
<input type="checkbox" class="statusChkBox d-none" name="status4" id="status4"
|
||||||
value="1" ${fieldDataSearchVO.status4 eq 1?'checked':''}>
|
value="1" ${fieldDataSearchVO.status4 eq 1?'checked':''}>
|
||||||
|
|
@ -99,9 +103,10 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
<c:if test="${count >= 1}">
|
<c:if test="${count >= 1}">
|
||||||
<c:forEach var="item" items="${fieldDataList}">
|
<c:forEach var="item" items="${fieldDataList}">
|
||||||
<tr>
|
<tr class="clickAbleObj fieldDataTr" data-id="${item.id}">
|
||||||
<td><a href="/admin/fieldData/${item.id}"><c:out value="${item.id}"/></a></td>
|
<%--<a href="/admin/fieldData/${item.id}">--%>
|
||||||
<td><a href="/admin/fieldData/${item.id}"><c:out value="${item.region}"/></a></td>
|
<td><c:out value="${item.id}"/></td>
|
||||||
|
<td><c:out value="${item.region}"/></td>
|
||||||
<td><c:out value="${item.userVO.company}"/></td>
|
<td><c:out value="${item.userVO.company}"/></td>
|
||||||
<td><c:out value="${item.userVO.name}"/></td>
|
<td><c:out value="${item.userVO.name}"/></td>
|
||||||
<td class="td_date"><c:out value="${item.save_date}"/></td>
|
<td class="td_date"><c:out value="${item.save_date}"/></td>
|
||||||
|
|
@ -138,3 +143,19 @@
|
||||||
</div>
|
</div>
|
||||||
</form:form>
|
</form:form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="modal fade" id="fieldViewModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
|
||||||
|
aria-labelledby="fieldViewModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="fieldViewModalLabel">현장수집 데이터</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body" id="fieldViewModalBody">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -4,115 +4,102 @@
|
||||||
<%@ 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/proj4.js" />"></script>
|
|
||||||
<script>
|
<script>
|
||||||
const field_data = JSON.parse('${fieldDataVO.field_data}');
|
field_data = JSON.parse('${fieldDataVO.field_data}');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script src="<c:out value="/js/admin/fieldView.js" />"></script>
|
|
||||||
|
|
||||||
<div class="section_title">
|
|
||||||
<!-- <p>현장 지원 시스템</p> -->
|
|
||||||
</div>
|
|
||||||
<div class="section_content">
|
<div class="section_content">
|
||||||
<div class="row justify-content-end bg-white mx-3 py-2">
|
<div class="row justify-content-end bg-white mx-3 py-2">
|
||||||
<table class="table table-hover text-center">
|
<div class="col-4">
|
||||||
<thead>
|
<div class="row mb-3">
|
||||||
<tr>
|
<label for="company" class="col-4 col-form-label fw-bold text-end">소속</label>
|
||||||
<h5>담당자</h5>
|
<div class="col-8">
|
||||||
</tr>
|
<input type="text" class="form-control bg-white border-0" id="company" placeholder="col-form-label" value="${userVO.company}" readonly>
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
<div class="row justify-content-end bg-white mx-3 mt-3 mb-2 py-2">
|
|
||||||
<table class="table table-hover text-center">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<h3>현장수집 데이터</h3>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>레이어 ID</th>
|
|
||||||
<td class="text-center"><c:out value="${fieldDataVO.layer_id}"/></td>
|
|
||||||
<th>수집일</th>
|
|
||||||
<td class="text-center"><c:out value="${fieldDataVO.save_date}"/></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>지역</th>
|
|
||||||
<td class="text-center"><c:out value="${fieldDataVO.region}"/></td>
|
|
||||||
<th>상태</th>
|
|
||||||
<td class="text-center">
|
|
||||||
<c:choose>
|
|
||||||
<c:when test="${fieldDataVO.status eq '0'}">
|
|
||||||
<span class="label label-warning">수집</span>
|
|
||||||
</c:when>
|
|
||||||
<c:when test="${fieldDataVO.status eq '1'}">
|
|
||||||
<span class="label label-danger">검증실패</span>
|
|
||||||
</c:when>
|
|
||||||
<c:when test="${fieldDataVO.status eq '2'}">
|
|
||||||
<span class="label label-success">검증성공</span>
|
|
||||||
</c:when>
|
|
||||||
<c:when test="${fieldDataVO.status eq '3'}">
|
|
||||||
<span class="label label-danger">반영실패</span>
|
|
||||||
</c:when>
|
|
||||||
<c:when test="${fieldDataVO.status eq '4'}">
|
|
||||||
<span class="label label-success">반영</span>
|
|
||||||
</c:when>
|
|
||||||
</c:choose>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>설명</th>
|
|
||||||
<td></td>
|
|
||||||
<th>오류내용</th>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="border border-2 border border-dark border border-start-0 border-end-0 py-2 mx-3">
|
|
||||||
<div class="mapWrap">
|
|
||||||
<div class="map-title text-center">측량데이터</div>
|
|
||||||
<div class="map" id="map"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="fieldDataDiv">
|
<label for="name" class="col-4 col-form-label fw-bold text-end">이름</label>
|
||||||
<table class="fieldDataTable" id="fieldDataTable">
|
<div class="col-8">
|
||||||
<thead>
|
<input type="text" class="form-control bg-white border-0" id="name" placeholder="col-form-label" value="${userVO.name}" readonly>
|
||||||
<tr>
|
</div>
|
||||||
<th colspan="4">속성정보</th>
|
<label for="phonenum" class="col-4 col-form-label fw-bold text-end">연락처</label>
|
||||||
</tr>
|
<div class="col-8">
|
||||||
</thead>
|
<input type="text" class="form-control bg-white border-0" id="phonenum" placeholder="col-form-label" value="${userVO.phonenum}" readonly>
|
||||||
<tbody id="fieldDataBody">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="layer_id" class="col-4 col-form-label fw-bold text-end">레이어 ID</label>
|
||||||
|
<div class="col-8">
|
||||||
|
<input type="text" class="form-control bg-white border-0" id="layer_id" placeholder="col-form-label" value="${fieldDataVO.layer_id}" readonly>
|
||||||
|
</div>
|
||||||
|
<label for="save_date" class="col-4 col-form-label fw-bold text-end">수집일</label>
|
||||||
|
<div class="col-8">
|
||||||
|
<input type="text" class="form-control bg-white border-0" id="save_date" placeholder="col-form-label" value="${fieldDataVO.save_date}" readonly>
|
||||||
|
</div>
|
||||||
|
<label for="region" class="col-4 col-form-label fw-bold text-end">지역</label>
|
||||||
|
<div class="col-8">
|
||||||
|
<input type="text" class="form-control bg-white border-0" id="region" placeholder="col-form-label" value="${fieldDataVO.region}" readonly>
|
||||||
|
</div>
|
||||||
|
<label class="col-4 col-form-label fw-bold text-end">상태</label>
|
||||||
|
<div class="col-8">
|
||||||
|
<c:choose>
|
||||||
|
<c:when test="${fieldDataVO.status eq '0'}">
|
||||||
|
<span class="card-warning ms-2 w-50 text-center">수집</span>
|
||||||
|
</c:when>
|
||||||
|
<c:when test="${fieldDataVO.status eq '1'}">
|
||||||
|
<span class="card-danger ms-2 w-50 text-center">검증실패</span>
|
||||||
|
</c:when>
|
||||||
|
<c:when test="${fieldDataVO.status eq '2'}">
|
||||||
|
<span class="card-success ms-2 w-50 text-center">검증성공</span>
|
||||||
|
</c:when>
|
||||||
|
<c:when test="${fieldDataVO.status eq '3'}">
|
||||||
|
<span class="card-danger ms-2 w-50 text-center">반영실패</span>
|
||||||
|
</c:when>
|
||||||
|
<c:when test="${fieldDataVO.status eq '4'}">
|
||||||
|
<span class="card-success ms-2 w-50 text-center">반영</span>
|
||||||
|
</c:when>
|
||||||
|
</c:choose>
|
||||||
|
</div>
|
||||||
|
<label for="description" class="col-4 col-form-label fw-bold text-end">설명</label>
|
||||||
|
<div class="col-8">
|
||||||
|
<input type="text" class="form-control bg-white border-0" id="description" readonly>
|
||||||
|
</div>
|
||||||
|
<label for="errInfo" class="col-4 col-form-label fw-bold text-end">오류내용</label>
|
||||||
|
<div class="col-8">
|
||||||
|
<input type="text" class="form-control bg-white border-0" id="errInfo" readonly>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">측량데이터</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">속성정보</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content" id="myTabContent">
|
||||||
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
||||||
|
<div class="map" id="map">
|
||||||
|
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
<ul id="fieldDataPaging" class="fieldDataPaging"></ul>
|
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||||
</div>
|
<table class="fieldDataTable" id="fieldDataTable">
|
||||||
<div class="section_btn">
|
<tbody id="fieldDataBody">
|
||||||
<p class="search_p1">
|
|
||||||
<input class="btn btn-primary" type="button" value="목록" onclick="location.href='/admin/fieldData'"/>
|
</tbody>
|
||||||
</p>
|
</table>
|
||||||
<p class="search_p2">
|
</div>
|
||||||
<input class="btn btn-secondary" type="button" value="표준DB변환 및 검증" onclick="fieldVerify();"/>
|
</div>
|
||||||
<input class="btn btn-success" type="button" value="반영" onclick="fieldReflect();"/>
|
<ul id="fieldDataPaging" class="fieldDataPaging"></ul>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
|
@ -189,7 +189,6 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldDataTable > tbody> tr > th{
|
.fieldDataTable > tbody> tr > th{
|
||||||
padding: 7px 5px;
|
|
||||||
background-color: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,56 @@
|
||||||
$(document).on("click", ".nav-item", function () {
|
let field_data;
|
||||||
|
let map;
|
||||||
|
let fieldViewModal;
|
||||||
|
|
||||||
|
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 wkt = null;
|
||||||
|
|
||||||
|
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 () {
|
||||||
|
// fieldViewModal = new bootstrap.Modal(document.getElementById('fieldViewModal'));
|
||||||
|
fieldViewModal = document.getElementById('fieldViewModal');
|
||||||
|
fieldViewModal.addEventListener('shown.bs.modal', function (event) {
|
||||||
|
makePropPaging();
|
||||||
|
drawingObj();
|
||||||
|
makePropTable();
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
$(document).on('click', '.fieldDataTr', function () {
|
||||||
|
const dataid = $(this).attr("data-id");
|
||||||
|
$.ajax({
|
||||||
|
url: '/admin/fieldData/' + dataid,
|
||||||
|
type: 'GET',
|
||||||
|
dataType: "html",
|
||||||
|
success: function (html) {
|
||||||
|
$("#fieldViewModalBody").empty().append(html);
|
||||||
|
$(fieldViewModal).modal('show')
|
||||||
|
},
|
||||||
|
error: function () {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
$(document).on("click", ".statusTab", function () {
|
||||||
const chkBox = $(this).find(".statusChkBox")[0]
|
const chkBox = $(this).find(".statusChkBox")[0]
|
||||||
chkBox.checked = !chkBox.checked;
|
chkBox.checked = !chkBox.checked;
|
||||||
$("[name='searchForm']").submit();
|
$("[name='searchForm']").submit();
|
||||||
|
|
@ -22,3 +74,192 @@ function getCheckoxValue() {
|
||||||
document.getElementById('result').innerText
|
document.getElementById('result').innerText
|
||||||
= result;
|
= result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function fieldVerify() {
|
||||||
|
alert('준비중');
|
||||||
|
}
|
||||||
|
|
||||||
|
function fieldReflect() {
|
||||||
|
alert('준비중');
|
||||||
|
}
|
||||||
|
|
||||||
|
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>" + numberFormatter(field_data[idx].prop[i], 2) + "</td></tr>";
|
||||||
|
} else {
|
||||||
|
tags += "<tr><th>" + i + "</th><td>" + numberFormatter(field_data[idx].prop[i],2) + "</td>";
|
||||||
|
// 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 numberFormatter(num,pointer){
|
||||||
|
if(isNaN(num)){
|
||||||
|
return num;
|
||||||
|
}else{
|
||||||
|
const dotPoint = Math.pow(10,pointer)
|
||||||
|
return Math.round(num*dotPoint)/dotPoint;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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();
|
||||||
|
|
||||||
|
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
|
||||||
|
});
|
||||||
|
|
||||||
|
map = new ol.Map({
|
||||||
|
layers: [baseMap],
|
||||||
|
logo: false, //우측하단 로고 제거
|
||||||
|
target: 'map',
|
||||||
|
loadTilesWhileAnimating: true,
|
||||||
|
view: view
|
||||||
|
});
|
||||||
|
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// feature click evt
|
||||||
|
map.on('click', function (event) {
|
||||||
|
map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
|
||||||
|
var idx = feature.get("idx");
|
||||||
|
makePropTable(idx);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
map.addLayer(objVectorLayer);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,211 +0,0 @@
|
||||||
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() {
|
|
||||||
alert('준비중');
|
|
||||||
}
|
|
||||||
|
|
||||||
function fieldReflect() {
|
|
||||||
alert('준비중');
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// 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();
|
|
||||||
map.addLayer(objVectorLayer);
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue