Mapbox GL JS : zoom to filtered polygon?

Question

我正在使用 Mapbox GL JS 来显示多边形图层。我会允许用户从下拉列表中选择一个名称，然后突出显示并缩放到匹配的多边形。

我已经知道如何使用 map.setFilter 突出显示匹配的多边形，但我不知道如何缩放到匹配多边形的边界。这是我当前的代码:

map.addLayer({
    'id': 'polygon_hover',
    'source': 'mysource',
    'source-layer': 'mylayer',
    'type': 'fill',
    'paint': {
        'fill-color': 'red',
        "fill-opacity": 0.6
    },
    "filter": ["==", 'CUSTNAME', ""]
});
// Get details from dropdown
custname.on("change", function(e) {
    // get details of name from select event
    map.setFilter('polygon_hover', ["==", 'CUSTNAME', name]);
    // Get bounds of filtered polygon somehow?
    // var bounds = ??;
    // map.fitBounds(bounds);
});

我检查了 Mapbox example of zooming to bounds ，但它假设您已经知道界限是什么。

有什么方法可以让多边形的边界与 Mapbox 中的 map 过滤器匹配？

Answer 1

我有以下代码来拟合多边形中心坐标:

var coordinates = f.geometry.coordinates[0];
var bounds = coordinates.reduce(function (bounds, coord) {
    return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));

map.fitBounds(bounds, {
    padding: 20
});

其中 f 是一个特征。