[OpenLayers] 클릭된 Feature의 속성 얻기

두가지 방법이 있는데, 첫째는 지도 객체의 forEachFeatureAtPixel을 이용하는 방식이며 아래의 예와 같다.

map.on(
    "click", 
    function(e) {
        map.forEachFeatureAtPixel(
            e.pixel, 
            function (feature, layer) {
                let values = feature.getProperties();
                // values에 속성값이 담겨 있음(예: values["fieldName"])
            }, 
            {
                hitTolerance: 2,
                layerFilter: function(layer) {
                    return layer === buildingLayer;
                }
            }
        );
    }
);

두번째 방법은 Select 클래스를 이용하는 방법이며 아래의 예와 같다.

import Select from 'ol/interaction/Select.js';

var select = new Select({
    layers: [buildingLayer],

    /*
    // 위의 layers 옵션 지정과 동일한 방식인데, 속도면에서는 layers 옵션을 통한 방식이 더 빠를 것으로 예상됨
    filter: function(feature, layer) {
        return buildingLayer === layer;
    }
    */
});

select.getFeatures().on(
    "add", 
    function (e) { 
        var feature = e.element;

        setTimeout(function() {
            select.getFeatures().clear();
        }, 2000); // 2초 뒤에 선택된 상태가 해제됨
    }
);
       
map.addInteraction(select);

참고로 선택 대상이 되는 레이어의 타입은 VectorTileLayer 이다.