Openlayers geoserver wms 레이어 불러오기 예제

이번 호스팅에서는 openlayers를 활용하여 wms layer를 불러오는 예제를 진행해보겠다.

 

기본적인 geoserver 설치와 레이어 생성에 관한 내용은 다음 장에서 자세히 진행해보겠다.

 

공공데이터포탈에서 국토교통부_일별연속지적도형정보 데이터를 shapefile을 다운받아서 지오 서버에서 레이어를 생성해보았다.

 

var source = new ol.source.XYZ({
    url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
});

//타일레이어 생성하기
var viewLayer = new ol.layer.Tile({
    source: source
});

//geoserver 설정
var tileImg = new ol.layer.Tile({
    visible: true,
    source: new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/test/wms',
        params: {
            'FORMAT': 'image/png',
            'VERSION': '1.1.1',
            tiled: true,
            "STYLES": '',
            "LAYERS": 'test:AL_26_D002_20210617' // workspace:layer
        }
    })
});

//위치는 우리나라 중앙쯤(?)
var view = new ol.View({
    center: [14377556.389982047, 4186024.063626864],
    zoom: 14,
});

var mapView = new ol.Map({
    target: "map", // 지도를 생성할 element 객체의 id 값,
    layers: [viewLayer, tileImg], //생성한 레이어 추가,
    view: view //view 설정
});

 

배경지도는 브이월드 배경지도를 가져다 왔고 간단하게 부산시 지적 레이어를 불러와 보았다.

 

결과는 아래와 같다.