버튼을 눌렀을 때, GeoServer의 Layer를 가져오는 방법이다.

앞서 진행한, List Sample에서 버튼을 하나 추가하고 그 버튼을 통해 GeoServer의 Layer를 불러올 예정이다.

우선 코드를 추가한다.

[Project] -> src -> main -> webapp에 자신이 사용할 jsp코드를 넣는다.

※WEB-INF에 넣게되면 따로 호출이 불가능해, WEB-INF밖에 코드를 넣어야한다.

※해당 코드는 코드의 일부를 보여주며 설명을 하여, 일부 빠진 코드가 있으니 전체 코드 구문은 3. 전체코드에서 확인

jsp에 들어갈 코드이다.

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;
}

<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 : '&nbsp;'
            });
            $('#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>

jsp코드를 입력한 뒤, geoserver를 import 시켜야 한다.

packageExplorer에서 마우스 우클릭 -> import -> Web -> WAR file -> Next