<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!doctype html>
<html lang="ko">
<head>
<title>shp loading</title>
<meta http-equiv="Content-Type" content="charset=UTF-8" />
<meta name="author" content="Gipong">
<meta name="keywords" content="shapefile,dbf,geojson,preview">
<link rel="stylesheet" href="<c:url value='/resources/css/leaflet/leaflet.css'/>" />
<link rel="stylesheet" href="<c:url value='/resources/css/semactic/semantic.min.css'/>" />
<link rel="stylesheet" href="<c:url value='/resources/css/demo/demo.css'/>" />
<link rel="stylesheet" href="<c:url value='/resources/css/jquery/jquery-ui.min.css'/>" />
<script src="<c:url value='/resources/js/pro4j/pro4j.js'/>"></script>
<script src="<c:url value='/resources/js/jquery/jquery-2.1.1.min.js'/>"></script>
<script src="<c:url value='/resources/js/jquery/jquery-ui.min.js'/>"></script>
<script src="<c:url value='/resources/js/leaflet/leaflet.js'/>"></script>
<script src="<c:url value='/resources/js/lib/jszip.js'/>"></script>
<script src="<c:url value='/resources/js/lib/jszip-utils.js'/>"></script>
<script src="<c:url value='/resources/js/lib/jszip-utils-ie.js'/>"></script>
<script src="<c:url value='/resources/js/semantic/semantic.min.js'/>"></script>
<script src="<c:url value='/resources/js/preprocess/dbf.js'/>"></script>
<script src="<c:url value='/resources/js/preview/preview.js'/>"></script>
</head>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function() {
var map = L.map('map').setView([36.39917828607655, 14129048.150024414], 7),
file,
vector;
L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png').addTo(map);
function initVector () {
vector = L.geoJson([], {
style: function (feature) {
return feature.properties.style;
},
onEachFeature: function (feature, layer) {
layer.on({click: function(e) {
vector.eachLayer(function(l) {
vector.resetStyle(l);
});
$('.tbodyContent').remove();
var tbody = '<tbody class="tbodyContent">';
for (var key in e.target.feature.properties) {
tbody +=
('<tr class="center aligned"><td>'+ key + '</td><td>' + e.target.feature.properties[key] + '</td></tr>');
}
$('#attribute').append(tbody + '</tbody>');
$('#attr').fadeIn(300);
map.panTo(e.latlng);
if('setStyle' in e.target) e.target.setStyle({
fillColor: '#FF0',
fillOpacity: 0.6
});
}});
}
}).addTo(map);
}
function loadShpZip() {
var epsg = ($('#epsg').val() == '') ? 4326 : $('#epsg').val(),
encoding = ($('#encoding').val() == '') ? 'UTF-8' : $('#encoding').val();
if(file.name.split('.')[1] == 'zip') {
if(file) $('.dimmer').addClass('active');
loadshp({
url: file,
encoding: encoding,
EPSG: epsg
}, function(data) {
var URL = window.URL || window.webkitURL || window.mozURL || window.msURL,
url = URL.createObjectURL(new Blob([JSON.stringify(data)], {type: "application/json"}));
$('.shp-modal').toggleClass('effect');
$('.overlay').toggleClass('effect');
$('#wrap').toggleClass('blur');
vector.addData(data);
map.fitBounds([
[data.bbox[1], data.bbox[0]], [data.bbox[3], data.bbox[2]]
]);
$('.dimmer').removeClass('active');
$('#preview').addClass('disabled');
$('#epsg').val('');
$('#encoding').val('');
$('#info').addClass('picInfo');
$('#option').slideUp(500);
});
} else {
alert("ZIP 포맷으로 사용해주십시오.")
return;
}
}
initVector();
$("#file").change(function(evt) {
file = evt.target.files[0];
var fileSize = Math.round(file.size);
console.log(fileSize);
if(file.size > 600000) {
alert("600KB 이햐의 데이터를 이용하여 주십시오.")
return;
}else{
$('#dataInfo').text(' ').append(file.name+' , '+file.size+' kb');
$('#option').slideDown(500);
$('#preview').removeClass('disabled');
}
});
$('#preview').click(function() {
loadShpZip();
});
$('#addZipfile').click(function() {
$('.shp-modal').toggleClass('effect');
$('.overlay').toggleClass('effect');
$('#wrap').toggleClass('blur');
});
$('#cancel').click(function() {
$('.shp-modal').toggleClass('effect');
$('.overlay').toggleClass('effect');
$('#wrap').toggleClass('blur');
});
$('#removeLayer').click(function() {
$('#attr').fadeOut(300);
window.location.reload();
});
$('#encoding').dropdown();
$("#attr").draggable({ containment: $(this).parent().parent(), scroll: false, cursor: "move" });
$('#cancelAttr').click(function(){ $('#attr').slideUp(300); });
});
</script>
<body>
<div id="wrap" class="wrap">
<div id="map" ></div>
<div id="attr">
<div class="tableDisplay">
<table id="attribute" class="ui small celled unstackable table">
<thead id="attrHead">
<tr class="center aligned">
<th>Attribute</th>
<th>Value</th>
</tr>
</thead>
<tbody class="tbodyContent">
</tbody>
</table>
</div>
<div class="ui red icon button" id="cancelAttr">닫기</div>
</div>
<footer id="footer">
<div class="ui page grid">
<div class="sixteen wide column center aligned">
<div id="addZipfile" class="tips large ui positive right labeled icon button">레이어 추가(zip)</div>
<div id="removeLayer" class="negative large ui button">레이어 초기화</div>
</div>
</div>
</footer>
</div>
<div id="shp" class="shp-modal">
<div class="ui page grid">
<div class="sixteen wide aligned column">
<div class="ui form segment">
<div class="field">
<div class="ui teal fluid labeled icon button upload" id="zipfile" data-variation="inverted large">레이어 불러오기
<input type="file" id="file" accept=".zip">
</div>
</div>
<div class="field" id="dataInfo"></div>
<div id="option">
<div class="field ui labeled input" id="epsgField">
<div class="ui label">EPSG</div>
<input type="text" placeholder="Default : 4326" id="epsg" class="v" onfocus="this.value='';">
</div>
<div class="field ui labeled input" style="top:-7px;">
<div class="ui label" >Encoding</div>
<input type="text" placeholder="Encoding UTF-8, EUC-KR, Big5, Big5-HKSCS ... " id="encoding" class="v" onfocus="this.value='';">
</div>
</div>
<div class="two fields" style="padding: 0px 97px;">
<div class="field">
<div class="ui teal fluid labeled icon disabled button" id="preview" style="margin: 5px 40px;">레이어 등록</div>
</div>
<div id="cancel" class="negative right ui button" style="margin: 5px 40px;">닫기</div>
</div>
</div>
<div class="ui inverted dimmer">
<div class="ui large text loader">데이터를 불러오고있습니다...</div>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
</body>
</html>
