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的变量，然后将其传递给db.collection.aggregate( { $match : { $and : [ { "Level1.Level2.container.categories": { $elemMatch: { "category": { $all: [ { $elemMatch : { "Type": "STRING", "Value": "Portfolio" } }, { $elemMatch : { "Type": "STRING", "Value": "ABCDEF" } } ] } } } }, { "Level1.Level2.container.categories": { $elemMatch: { "category": { $elemMatch : { "Type": "STRING", "Value": "Currency" } } } } } ] } }, { $unwind : "$Level1.Level2.container.categories" }, { $match : { "Level1.Level2.container.categories.category.Value": "Currency" } }, { $unwind : "$Level1.Level2.container.categories.category" }, { $match : { "Level1.Level2.container.categories.category.Value": { $ne : "Currency" } } }, { $group: { _id: null, "Currency": { $push: "$$ROOT" } } }, { $project: { _id: 0, "Currency.Level1.Level2.container.categories.category.Value": 1 } } )。

还可以通过查询queryRenderedFeatures()来获取所有图层ID的列表。

为Mapbox GL JS中的每个源和图层添加弹出窗口

1 个答案: