爲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例子，那隻能說明如何從單層綁定功能集合彈出，你可以看到here

Answer 1

在Mapbox-GL-JS，你真的不「綁定彈出窗口」。如鏈接示例所示，您響應鼠標單擊，查詢渲染了鼠標點擊的功能，並在需要時顯示彈出窗口。

你能查詢多個圖層嗎？是的，如the documentation points out：

要檢查的查詢的樣式圖層ID的數組。只有這些圖層中的要素纔會被返回。如果此參數未定義，則將檢查所有圖層。

所以一個簡單的方法是維護所添加圖層的所有ID的變量，然後將其傳遞到queryRenderedFeatures()。

查詢map.getStyle().layers也可以得到所有圖層ID的列表。