为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的列表。