mapbox features 정보에 대한 삽질의 기록

하고자 했던것은 간단했다. 선택한 아이템의 state에 active를 true로 주는것.

 

그러기 위해서는 현재 선택된 아이템에 접근하는것과 state를 바꿔주는것..

 

state를 바꾸는것은 map.setFeatureState를 통해서 간단히 되었다. 그럼 해당 id를 가져와야 하는데 그거는 e.features[0].id로 간단히 가져와 졌었다...물론 그거를 모르고 나는 map.querySourceFeatures라는 방법과 많은 방법으로 시도를 했었다.

 

아래의 코드에 있는 주석 처리된 시도1~4가 삽질했던 기록이다.

 

그 중에서 가장 이해 안된것은 querySourceFeatures를 사용해서 feature를 가져올때 filter를 사용했는데 그게 properties의 값을 체크하는 용도로만 쓰였다는 것이다. 실제 mapbox에서는 canvas에 적용될때 id값을 가지는데 나는 계속 id로만 접근하려고 하다가 시간을 엄청 날렸었다...물론 클릭이벤트로 들어온것을 통해서 id가 뽑아졌다는 다른 문제도 있지만...

    map.on('click', 'mapPathRoad',(e) =>{
        
        //값을 바로 바꾸지 않고 사용자 체크 후 active가 변경 되어야함
     
        
        if (e.features.length > 0) {
            //fromNode,toNode체크

            console.log(e.features);
            if(fromnodeid == null && tonodeid == null){
                fromnodeid = e.features[0].properties.fromnodeid;
                tonodeid = e.features[0].properties.tonodeid;
            }
            
            

            //팝업창 띄우기
            $('#selPathRoad').css('display','block');
            $('#selPathRoad').data('link-id',e.features[0].properties.link_id);//링크 아이디 변경
            //console.log($('#selPathRoad').data('link-id'));

            /*
            console.log(map.getFeatureState({
                source:"mapPath",
                
                'link_id':"A219AS319503"
            })); 
            */
            

            

            
            //활성화 및 색상 변경
            //mode = 'move';
            //changePathMode(e.features[0],mode);
            //changePathMode(e.features[0].properties.link_id,mode);
            
            //1. 해당 id가 있는 값을 찾는다???
            //값을 찾는 방법은 어떻게..?
            
            //id값으로 feature찾기 시도 중
            /*
            //시도1 -> 실패
            console.log(e.features[0]);
            const relatedCounties = map.querySourceFeatures('mapPathRoad', {
                //sourceLayer: 'mapPathRoad',
                source:'mapPath',
                id:1507
                //filter: ['==', 'id', 1507]
            });
            console.log(relatedCounties);
            
            //console.log(map.getSource(1));//undefined가 뜨는 중
            
            //시도2 -> 실패
            console.log(map.getFeatureState({
                source:"mapPath",
                //sourceLayer:"mapPathRoad",
                id:1057
            })); 

            
            //시도3 -> 실패
            const features = map.queryRenderedFeatures(
                //[20, 35],
                //{filter:["==",'feature-id',1507]},
                ["==","id",1507],
                {layers: ['mapPathRoad']}
            );
            console.log(features);
            */

            //시도4  일반 id가 아닌 link_id를 넣으니깐 동작 중. 왜...?
            //애초에 filter가 properties에 있는거에만 반응하나?
            /*
            resultFeatures = map.querySourceFeatures(
                "mapPath", 
                { sourceLayer: "mapPathRoad", filter:["==",'link_id',"A219AS319503"] }
            );
            */
            resultFeatures = map.querySourceFeatures(
                "mapPath", 
                { sourceLayer: "mapPathRoad", filter:["==",'link_id',e.features[0].properties.link_id] }
            );
            //왜 값이 두개인지?
            console.log(resultFeatures);


            /*
            map.setFeatureState(
                { source:'mapPath',id:e.features[0].id },
                { active:!e.features[0].state.active}
            );
            */
            
            map.setFeatureState(
                { source:'mapPath',id:e.features[0].id },
                { active:!e.features[0].state.active}
            );
            
        }

        /*
        //features의 세부 속성을 가져올 수 있음
        console.log(e.features);
        const features = map.queryRenderedFeatures(e.point);

        const displayProperties = [
            'type',
            'properties',
            'id',
            'layer',
            'source',
            'sourceLayer',
            'state'
        ];
        const displayFeatures = features.map((feat) => {

            //console.log(feat.toJSON());
            var source = feat.source;
            var sourceLineId = feat.id;
            
            var active = !feat.state.active;
            //클릭한 route의 id를 찾아야함
            //map.setPaintProperty('route'+i,'fill-color','#000');
            map.setFeatureState({
                source:source,
                id:sourceLineId
            },{
                active:active
            });
            //active외에 div가 나타나서 어떤 모드로 운행해야하는지 떠야함
            //mode라는 값을 추가해서 그 색상에 따른 라인의 색상이 바뀌어야함.
        });
        */

    });