지도 조회 소스
Stadium프로젝트에StadiumWMS.jsp파일을 생성한다. WebContent우클릭> New > JSP File New JSP File창이 뜨면 파일이름을 작성하고Finish버튼을 클릭한다.
만들어진jsp파일에 아래와 같이 설정한다. head설정- OpenLayers를 사용하기 위해JS, CSS파일을 포함한다.
<link rel="stylesheet"
href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
style영역–사용할 태그의 스타일을 선언
h1 {
color: blue;
}
hr {
border: solid 1px yellow;
}
#map {
width: 60%;
height: 60% x;
}
.custom-mouse-position {
color: blue;
font-family: Arial;
font-size: 10pt;
}
body영역–title객체 생성
<h1 id="title" class="yellow">stadiumLayer with WMS</h1>
<hr/>
<p id="shortdesc">Using WMS layers.</p>
script영역–map객체 생성
<div id="map" class="smallmap"></div>
<div id="docs"></div>
script영역–Layer객체 생성(GeoServer에Upload한Layer를WMS객체로 생성)
var countiesLayer = new ol.layer.Image({
source : new ol.source.ImageWMS({
url : 'HTTP://localhost:8080/geoserver/wavus/wms',
params : {
'LAYERS': 'wavus:sigugun_tm',
'VERSION' : '1.1.0',
'Tile' : 'true',
'FORMAT' : 'image/png'
},
projection : 'EPSG:900913',
serverType : 'geoserver'
})
});
script영역–Map에Layer를 등록한다.
var centerpos = [ 127, 38 ];
var newpos = ol.proj.transform(centerpos,'EPSG:4326','EPSG:900913');
$(function() {
var map = new ol.Map({
controls : ol.control.defaults({
attributionOptions : ({
collapsible : false
})
}),
view : new ol.View({
projection : 'EPSG:900913',
center : newpos,
zoom : 7,
maxReolution: 0.703125
}),
layer : [ countiesLayer ],
target : 'map',
})
})
StadiumWMS.jsp파일에 다음 코딩을 입력하고 실행시킨다. (전체 코딩)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="http://localhost:8080/geoserver/openlayers3/ol.css"
type="text/css">
<link rel="stylesheet"
href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"
type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
iframe {
width: 100%;
height: 250px;
border: none;
}
#map {
clear: both;
position: relative;
width: 1003px;
height: 600px;
border: 1px solid black;
}
#wrapper {
width: 1003px;
}
h1 {
color: blue;
}
hr {
border: solid 1px yellow;
}
.custom-mouse-position {
color: blue;
font-family: Arial;
font-size: 10pt;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers3/ol.js"
type="text/javascript"></script>
<title>OpenLayers map preview</title>
</head>
<body>
<h1 id="title" class="yellow">stadiumLayer with WMS</h1>
<hr />
<p id="shortdesc">Using WMS layers.</p>
<div id="map">
</div>
<form>
<label>Projection </label> <select id="projection">
<option value="EPSG:4326">EPSG:4326</option>
<option value="EPSG:900913">EPSG:900913</option>
<option value="EPSG:3857">EPSG:3857</option>
</select> <label>Precision </label> <input id="precision" type="number" min="0"
max="12" value="4" />
<div id = "mouse-position"></div>
</form>
<div id="wrapper">
<div id="location"></div>
<script type="text/javascript">
var pureCoverage = false;
var format = 'image/png';
var bounds = [ -14401.943359375, -45157.7734375, 550939.375,
572107.75 ];
var mousePositionControl = new ol.control.MousePosition({
projection : 'EPSG:4326',
className : 'custom-mouse-position',
target : document.getElementById('mouse-position'),
coordinateFormat : ol.coordinate.createStringXY(4),
undefinedHTML : ' '
});
$('#projection').on(
'change',
function(event) {
mousePositionControl.setProjection(ol.proj.get(event.target.value));
});
$('#precision').on(
'change',
function(event) {
var format = ol.coordinate
.createStringXY(event.target.valueAsNumber);
mousePositionControl.setCoordinateFormat(format);
});
var untiled = new ol.layer.Image({
source : new ol.source.ImageWMS({
ratio : 1,
url : 'http://localhost:8080/geoserver/wavus/wms',
params : {
'FORMAT' : format,
'VERSION' : '1.1.1',
STYLES : '',
LAYERS : 'wavus:sigugun_tm',
}
})
});
var tiled = new ol.layer.Tile({
visible : false,
source : new ol.source.TileWMS({
url : 'http://localhost:8080/geoserver/wavus/wms',
params : {
'FORMAT' : format,
'VERSION' : '1.1.1',
tiled : true,
STYLES : '',
LAYERS : 'wavus:sigugun_tm',
tilesOrigin : -14401.943359375 + "," + -45157.7734375
}
})
});
var centerpos = [ 127, 38 ];
var newpos = ol.proj.transform(centerpos, 'EPSG:4326',
'EPSG:900913');
var map = new ol.Map({
controls : ol.control.defaults({
attribution : false
}).extend([ mousePositionControl ]),
target : 'map',
layers : [ untiled, tiled ],
view : new ol.View({
projection : 'EPSG:900913',
center : newpos,
zoom : 7
})
});
map.getView().fit(bounds, map.getSize());
// sets the chosen WMS version
function setWMSVersion(wmsVersion) {
map.getLayers().forEach(function(lyr) {
lyr.getSource().updateParams({
'VERSION' : '1.1.1'
});
});
tiled.getSource().updateParams({
'tilesOrigin' : origin
});
}
function updateFilter() {
if (pureCoverage) {
return;
}
var filterType = document.getElementById('filterType').value;
var filter = document.getElementById('filter').value;
// by default, reset all filters
var filterParams = {
'FILTER' : null,
'CQL_FILTER' : null,
'FEATUREID' : null
};
if (filter.replace(/^\s\s*/, '').replace(/\s\s*$/, '') != "") {
if (filterType == "cql") {
filterParams["CQL_FILTER"] = filter;
}
if (filterType == "ogc") {
filterParams["FILTER"] = filter;
}
if (filterType == "fid")
filterParams["FEATUREID"] = filter;
}
// merge the new filter definitions
map.getLayers().forEach(function(lyr) {
lyr.getSource().updateParams(filterParams);
});
}
// shows/hide the control panel
function toggleControlPanel() {
map.updateSize()
}
</script>
</div>
</body>
</html>
실행 화면
