Mapbox GL JS：缩放到过滤多边形？

我正在使用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中获得与贴图过滤器匹配的多边形边界？

我找到了解决您问题的方法。具有一个类，该类接受多边形坐标数组，并具有一个名为

getBounds（）

的函数，该函数返回西南和东北边界。然而，传单没有遵循LngLat的惯例，其格式为LatLng。因此，您必须切换它。我从Mapbox中拿出一个示例，并添加了您想要的内容

var polygon = data.features[0].geometry.coordinates;
var fit = new L.Polygon(polygon).getBounds();
var southWest = new mapboxgl.LngLat(fit['_southWest']['lat'], fit['_southWest']['lng']);
var northEast = new mapboxgl.LngLat(fit['_northEast']['lat'], fit['_northEast']['lng']);
var center = new mapboxgl.LngLatBounds(southWest, northEast).getCenter();
// map.flyTo({center: center, zoom: 10});
map.fitBounds(new mapboxgl.LngLatBounds(southWest, northEast));

---

我有以下代码来定义多边形中心坐标的边界：

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是一个特征。

我发现这个问题仍然是相关的-我通过向包含给定多边形所有点和建筑边界的数据库发出单独请求来解决它。

[[minLng，minLat]，[maxLng，maxLat]]

。

---

所有试图解决已渲染的几何体或源功能的尝试对我都不起作用-很可能是因为Mapbox没有在平铺中保留初始geoJSON。

谢谢！如何获取

data.features[0]。geometry.coordinates

的值？我所拥有的只是select事件中的

name

值。@Richard在您上面发布的代码中，它应该是

e.features

…这是对传单的响应，而不是GL JS，因为它在OPS中是特定的。这并不是首先得到的功能，也不是它的边界或几何体。想知道您最终做了什么？