[OpenLayers] Select 객체 내 layers 옵션

어느 날 마주한 에러.

지도 위에 마커를 생성하고 마커 클릭 시 마커 색이 변하는 함수를 짰는데, 마커를 클릭하자마자, 아니 지도 위에 어느 곳을 클릭해도 이 에러가 떴다.

const poiMarkerClickEventWith = (keyword, layer) => {
        let selectBuildClick = new Select({
           condition: click, // click 이벤트. condition: Select 객체 사용시 click, move 등의 이벤트 설정
           layers: layer
        });
        map.addInteraction(selectBuildClick);
        // feature를 선택할 때 이벤트
        selectBuildClick.on('select', function(e) {
            var selectedFeatures = e.selected;

            selectedFeatures.forEach(function(feature) {
                if (feature.get('bg_name') === keyword) {
                    feature.setStyle(clickedMarkerStyle(irumarker2))
                    console.log(keyword + ' click')
                }
            });
        });
    }

문제가 발생했던 함수 코드는 위와 같다.

1. Select.js 뜯어보기

node_modules 폴더의 ol/interaction/Select.js를 들어가서 살펴봤다.
layers 옵션에서 문제가 발생한 게 분명한데 layer 관련 코드는 여기 밖에 없다.

2. GPT님 신탁 받기

봐도 이해가 안 돼서 전지전능한 GPT님께 여쭤봤더니 해결책을 알려주셨다.
의존하면 안 되는 거 안다. ...

위 코드 중

//feature 클릭 가능한 select 객체
        let selectBuildClick = new Select({
           condition: click, // click 이벤트. condition: Select 객체 사용시 click, move 등의 이벤트 설정
           layers: layer
        });

에서 layers 부분을

layers: function(layer) {
                return layer === layer; // 선택 가능한 레이어 조건 설정
           }

혹은

layers: [layer]

로 바꾸면 된다.
GPT님은 첫 번째 코드만 예시로 주셨지만 배열도 된다길래 후자도 시도해보니 되었다.

3. 왜 얘는 문제 없이 잘 작동했을까?

비슷한 기능을 하는 다른 코드다. 이 코드로 인한 마커는 클릭이 잘 됐었다.

if (locaArray && locaArray.length >= 2) {
                markerClickEventWith(locaArray, createNAddNodeLayersFrom(locaArray)); // 노드 마커 클릭 이벤트
            }

markerClickEventWith)함수나 위의 poiMarkerClickEventWith함수 둘 다 Select 객체를 새로 생성할 때 똑같은 형식으로 짰다고 생각했다.

정의했던 부분을 다시 보니 매개변수로 createNAddNodeLayersFrom(locaArray) 함수를 전달받았다. 그리고 이 함수는 layer 배열을 반환한다.

결론

공식 문서를 꼼꼼히 읽자.

원래 layers라는 애는 배열 또는 함수 타입이었는데... Select.js에서 다른 option들처럼 this.layers가 없고 layerFilter만 있길래 공식 문서 가보고도 왜 layerFilter가 없지? 최신 문서가 아닌가 이딴 생각만 했던 내가 바보다.