Mapbox GL의 모든 소스와 레이어에 팝업 추가 JS

Question

소스 코드에서 볼 수 있듯이 루핑을 통해 맵에 여러 소스와 레이어가 생성되었습니다. 내 질문에 대한

var id, lat, lng, point; 

function setPosition() { 
    $.post('m/getData.php', function(data) { 
     var split = data.split(","); 
     for (i = 0; i < split.length - 1; i++) { 
      var secSplit = split[i].split("|"); 
      id = secSplit[0]; 
      lat = secSplit[1]; 
      lng = secSplit[2]; 
      point = { 
       "type": "Point", 
       "coordinates": [lng, lat] 
      }; 
      map.addSource(id, { 
       type: 'geojson', 
       data: point 
      }); 
      map.addLayer({ 
       "id": id, 
       "type": "symbol", 
       "source": id, 
       "layout": { 
        "icon-image": "ferry-15" 
       } 
      }); 
     } 
    }); 
} 

, 동적으로 Mapbox GL JS를 사용하여 모든 소스와 레이어 팝업을 결합 할 수 있습니다? 내가 Mapbox 예에서 본 것을에서

, 그것은 당신이 Mapbox-GL-JS에서 here

Answer 1

를 볼 수있다 "바인드 당신이 정말로하지 않는 단일 레이어에서 기능 컬렉션 팝업을 바인딩하는 방법 만 보여줍니다 팝 업". 링크 된 예제에서 볼 수 있듯이 마우스 클릭에 응답하고 마우스를 클릭 한 곳에서 렌더링 된 기능을 쿼리 한 다음 필요한 경우 팝업을 표시합니다.

여러 레이어를 쿼리 할 수 ​​있습니까? 예, the documentation points out :

검사 할 쿼리의 스타일 레이어 ID 배열입니다. 이 레이어 내의 기능 만 반환됩니다. 이 매개 변수가 정의되지 않으면 모든 레이어가 검사됩니다.

쉬운 방법은 추가하는 레이어의 모든 ID를 변수로 유지 한 다음이를 queryRenderedFeatures()으로 전달하는 것입니다.

map.getStyle().layers을 쿼리하여 모든 레이어 ID의 목록을 가져 오는 것도 가능합니다.