<!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;
}
#map {
clear: both;
position: relative;
width: 1003px;
height: 600px;
border: 1px solid black;
}
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>Stadium</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="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 : projection,
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 tiled = 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',
LAYERS : 'wavus:sigugun_tm',
}
})
});
var map = new ol.Map({
controls : ol.control.defaults({
attribution : false
}).extend([ mousePositionControl ]),
target : 'map',
layers : [ tiled ],
view : new ol.View({
projection : 'EPSG:900913',
center : newpos,
zoom : 7
})
});
map.getView().fit(bounds, map.getSize());
</script>
</body>
</html>