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のリストを取得することもできます。