Openlayers WMS getFeatureInfo 속성 데이터 가져오기 예제

저번 geoserver 포스팅에서 부산시 연속 지적도 wms 레이어를 생성해서 openlayers에 연결하는 예제를 해보았다.

 

이번 포스팅에서는 불러온 wms레이어 각 벡터에 대한 속성 데이터를 가져오는 예제를 진행해볼 예정이다.

 

 

먼저 지난 포스팅에서 쓴 소스를 그대로 사용했다.

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
});
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'
        }
    })
});
var view = new ol.View({
    center: [14377556.389982047, 4186024.063626864],
    zoom: 14,
});
var mapView = new ol.Map({
            target: "map",
            layers: [viewLayer, tileImg],
            ,
            view: view
});

여기까지가 기본적인 브이월드 배경지도를 불러오는 소스였고 이제 맵 객체에 싱글클릭 이벤트를 추가해서 클릭한 좌표를 geoserver

 

request 요청해서 원하는 속성 데이터를 가져오는 소스를 추가하면 아래와 같다.

mapView.on('singleclick', function(evt) {
    var view = mapView.getView();
    var viewResolution = view.getResolution();
    var source = tileImg.getSource();
    var url = source.getFeatureInfoUrl(
        evt.coordinate, viewResolution, view.getProjection(), {
            'INFO_FORMAT': 'application/json',
            'FEATURE_COUNT': 50
        });
    if (url) {
        fetch(url).then(function(response) {
            var jsonStr = response.text();
            var jsonObj = JSON.parse(jsonStr);

            console.log(jsonObj);
        });
    }
});

요청할 때 헤더 부분에 어떤 타입의 데이터를 가져올지 상황에 따라 다르게 명시해서 원하는 데이터를 받아오면 될 거 같다.

 

다음 포스팅에서는 cql 필터로 속성 데이터나 공간 쿼리를 통해 데이터를 가져오는 예제를 다뤄볼 예정이다.