[openlayers] WFS으로 호출하는 레이어의 범례를 설정해보자

OpenLayers2 아닙니다!

 

지난 게시글에 이어 POC 수행 중에

WFS로 가져오는 레이어의 범례를 설정하고자 할 때 그 방법에 대한 게시글이 많이 안보여서 정리해보려고 한다.

 

 

GeoServer의 벡터 레이어에 스타일을 설정하고 WFS 방식으로 가져오면

레이어의 스타일이 Default로 보여지는 것을 확인할 수 있다.

SLD를 설정한 뒤 범례대로 데이터를 보고싶다면 WMS 방식으로 가져와야 하는데,

이러면 Feature의 Attributes를 가져올 수 없으므로 이 방법은 꽝이다. (WMS는 이미지 서비스이므로 불가능..)

 

자 그럼. WFS 방식으로 레이어를 가져올 때 openlayers에서 범례를 설정하고 싶다면?

Geoserver의 SLD는 WFS방식으로 Layer 호출 시 적용이 안 됩니다.

그렇다면 어떤 방법이 있을까요?

 

아래를 살펴봅시다.

var vectorLayer = new ol.layer.Vector({
    title: 'LayerName',
    source: vectorSource,
    style: function(feature, resolution){
        var style1 = new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 4,
                    fill: new ol.style.Fill({color: '#ff4444'}),
                    stroke: new ol.style.Stroke({
                      color: '#ffffff', width: 2
                    })
                  })
                });
        var style2 = new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 4,
                    fill: new ol.style.Fill({color: '#eb9647'}),
                    stroke: new ol.style.Stroke({
                      color: '#ffffff', width: 2
                    })
                  })
                });

        var style3 = new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 4,
                    fill: new ol.style.Fill({color: '#bababa'}),
                    stroke: new ol.style.Stroke({
                      color: '#ffffff', width: 2
                    })
                  })
                });

        var style4 = new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 4,
                    fill: new ol.style.Fill({color: '#93e06f'}),
                    stroke: new ol.style.Stroke({
                      color: '#ffffff', width: 2
                    })
                  })
                });

        var style5 = new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 4,
                    fill: new ol.style.Fill({color: '#4b84ff'}),
                    stroke: new ol.style.Stroke({
                      color: '#ffffff', width: 2
                    })
                  })
                });

        if ( feature.values_.achieve_rate < 60 ) 
            return [style1];
        else if ( feature.values_.achieve_rate < 70 ) 
            return [style2];
        else if ( feature.values_.achieve_rate < 80 ) 
            return [style3];
        else if ( feature.values_.achieve_rate < 90 ) 
            return [style4];
        else
            return [style5];
    },
    visible: false
});

 

이렇게 레이어를 정의할 때 Style을 function으로 생성하여 설정하면

각 feature별 value값을 받아서 범례를 설정할 수 있다.

 

꽤 유용한 정보이다.