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

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示例,但它假设您已经知道边界是什么.

有没有办法可以在Mapbox中获得与地图过滤器匹配的多边形边界？

Answer 1

我有以下代码来 fitBounds 到多边形中心坐标：

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

Answer 2

我找到了解决你问题的方法。Leaflet有一个多边形类，它采用多边形坐标数组，并有一个名为getBounds()返回西南和东北边界的函数。然而，Leaflet 并没有遵循LngLat的约定，它的格式是LatLng。因此，你必须切换它。我从 Mapbox Show Drawed Polygon Area中取出了一个示例，并准确添加了您要查找的内容。

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));