[OpenLayers3] WMS의 GetFeatureInfo 사용하기

WMS는 웹 환경에서 지도를 서비스하는 것으로, 클라이언트가 요청한 영역에 대한 지도를 서버측에서 이미지로 생성해 제공해 주는 서비스입니다. 이 WMS의 기능 중 GetFeatureInfo라는 것이 있는데요. 특정 좌표 지점에 위치한 Feature의 정보를 클라이언트에게 제공해 주는 서비스입니다. 이 기능은 사용자가 지도 상에 클릭한 지점에 대한 정보를 제공하기 위한 용도로 가장 많이 사용됩니다. 아래의 지도에서 임이의 나라를 클릭해 보면 해당 나라의 정보가 지도 하단에 표시되는 것을 볼 수 있습니다.

위의 페이지를 ol3에서 어떻게 구현하는지 살펴 보겠습니다. 먼저 필요한 외부 css와 js 파일을 아래처럼 페이지에 포함합니다.

그리고 UI에 대한 Tag를 아래처럼 추가합니다.

id가 map인 div는 지도가 표시될 영역이고, id가 info인 div에는 사용자가 클릭한 지점에 위치한 나라의 정보를 표시합니다.

이제 스크립트 코드를 살펴보겠습니다. 먼저 jQuery의 ready 이벤트를 아래처럼 준비해 둡니다.

위의 … 부분에 앞으로의 모든 스크립트가 추가됩니다. 먼저 추가할 코드는 WMS에 대한 소스와 레이어 객체의 생성입니다. WMS 레이어는 데이터를 받을 소스가 필요합니다. 아래의 코드가 바로 그것입니다.

var wmsSource = new ol.source.TileWMS({
    url: 'https://ahocevar.com/geoserver/wms',
    params: { 'LAYERS': 'ne:ne' },
    serverType: 'geoserver',
    crossOrigin: 'anonymous'
});

var wmsLayer = new ol.layer.Tile({
    source: wmsSource
});

그리고 다음은 초기 지도가 표시될때 지도 화면 중심과 줌 레벨에 대한 View 객체입니다. 이 객체를 통해 WMS의 GetFeatureInfo 기능을 사용할때 필요한 현재 지도의 해상도값을 얻어올 수 있습니다.

var view = new ol.View({
    center: [0, 0],
    zoom: 3
});

WMS를 활용한 레이어 객체를 통해 다음의 코드처럼 지도 객체를 생성하는데요. 생성시 옵션값인 view에 위의 코드에서 생성한 view 객체를 할당해 주고 있습니다. 그리고 target 옵션에는 지도가 표시될 div의 id 값이 지정됩니다.

var map = new ol.Map({
    layers: [wmsLayer],
    target: 'map',
    view: view
});

이제 다음은 지도를 클릭하면 클릭한 지점에 대한 정보를 얻기 위한 WMS의 GetFeatureInfo 기능을 호출하는 기능에 대한 코드입니다. 코드는 아래와 같습니다.

map.on('singleclick', function (evt) {
    document.getElementById('info').innerHTML = '';
    
    var viewResolution = view.getResolution();
    var url = wmsSource.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        { 'INFO_FORMAT': 'text/html' }
    );
    
    if (url) {
        document.getElementById('info').innerHTML =
            '';
    }
});

지도 상의 클릭 이벤트로 singleclick 이라는 특화된 이벤트를 지도 객체에 등록하고 있습니다. 이 클릭 이벤트 함수에는 evt라는 객체가 넘어오는데요. evt의 coordinate 속성에 사용자가 클릭한 지점의 지도 좌표계 값이 담겨 있습니다. 가장 중요한 부분이 5번 코드인데요. 앞서 WMS를 위한 소스 객체인 wmsSource의 getGetFeatureInfoUrl이라는 함수를 호출하면 WMS의 GetFeatureInfo 기능을 위한 호출 가능한 URL이 문자열로 반환됩니다. 이 getGetFeatureInfoUrl 함수를 호출하기 위해서 필요한 인자는 사용자가 클릭한 지도 상의 좌표와 현재 지도의 줌 레벨에 대한 해상도값과 클릭한 좌표에 대한 좌표체계, 끝으로 GetFeatureInfo 서비스 호출 시 받을 데이터의 포맷인데요. getGetFeatureInfoUrl 함수의 호출 시 지정된 인자값들이 바로 이 인자들입니다. 만약 getGetFeatureInfoUrl 함수의 호출이 성공하면 url 문자열이 반환되고 이 url을 id가 info인 div에 innerHTML 값으로 iframe의 src 속성에 지정합니다. 코드는 단순한데 설명이 복잡합니다. 이 설명은 10번~13번 코드에 대한 설명이니 코드를 보시면 이해가 될 것입니다.

이상으로 필요한 코드를 전부 살펴보았습니다. 지금까지 작성한 전체 코드는 아래 url을 통해 다운로드 받을 수 있습니다.

답글 남기기 응답 취소