[OpenLayers3] WFS 벡터 레이어에 라벨 표시하기

이 글은 “[OpenLayers3] WFS를 이용한 벡터 레이어”에서 속성 데이터를 이용해 라벨을 표시하는 방법을 설명합니다. 실행 결과는 아래의 웹 페이지와 같습니다.

“[OpenLayers3] WFS를 이용한 벡터 레이어”의 글을 충분히 이해하고 앞으로 설명할 코드로 수정하기 바랍니다.

WFS에 의한 벡터 데이터 소스 객체를 이용해 벡터 레이어를 생성하는 코드 중 minResolution과 maxResolution 속성값을 아래처럼 추가하고 style을 getStyle이라는 사용자 정의 함수로 변경합니다.

var vector = new ol.layer.Vector({
    source: vectorSource,
    style: getStyle,
    minResolution: 0,
    maxResolution: 12
});

위의 코드 중 3번의 style 속성에 getStyle 함수로 대체 되었습니다. 그리고 minResolution과 maxResolution 속성값을 0과 12로 지정했는데요. 지도의 해상도 값이 이 minResolution과 maxResolution 속성값의 범위에 있을 때만 WFS 레이어가 표시되라는 의미입니다. 중요한 것은 style 속성에 지정된 getStyle 함수입니다. 이 함수는 다음과 같습니다.

function getStyle(feature, resolution) {
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(255, 255, 0, 1.0)',
            width: 4
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.4)'
        }),
        text: new ol.style.Text({
            font: '12px Verdana',
            scale: 2,
            text: getLabelText(feature),
            fill: new ol.style.Fill({ color: 'red' }),
            stroke: new ol.style.Stroke({ color: 'yellow', width: 3 })
        })
    });

    return style;
}

기존에 style 속성에는 바로 ol.style.Style 타입의 객체를 생성했었지만, 이 글에서는 getStyle이라는 사용자 정의 함수로 변경되었습니다. 이 함수는 2개의 인자를 받습니다. 첫번째 인자인 feature는 스타일을 적용할 도형에 대한 feature와 현재의 지도 축척값을 화면 단위로 변경한 값인 resolution입니다. 라벨을 표현하고자 할때는 10번의 text 속성값을 갖도록 ol.style.Style 객체를 생성해 함수에서 반환하면 되는데요. text 속성에는 라벨의 폰트과 글자 크기 및 텍스트의 채움색과 외곽선 스타일을 지정할 수 있습니다. 중요한 것은 라벨을 표시할 속성값의 지정인데요. 바로 13번 코드의 text 속성에 getLabelText라는 또 다른 사용자 정의 함수를 사용하고 있으며 다음과 같습니다.

function getLabelText(feature) {
    var text = feature.get('name');
    if (text) {
        return text;
    } else {
        return '';
    }
}

위의 함수는 feature 라는 라벨을 적용하고자 하는 피쳐 객체를 인자로 받습니다. 이 피쳐에서 name이라는 속성값을 얻어와 이 값이 undefined이나 null인 경우에 빈 문자열을 반환하고, 그렇지 않은 경우에는 name에 해당하는 속성값에 대한 문자열을 그대로 반환하므로써 표시할 라벨에 대한 문자열 값을 지정할 수 있습니다.

아래는 위에서 설명한 전체 코드에 대한 다운로드입니다.

답글 남기기 응답 취소