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

Posted 2023-02-16

【中文标题】Mapbox GL JS：缩放到过滤的多边形？

【英文标题】：Mapbox GL JS: zoom to filtered polygon?

【发布时间】：2017-08-10 04:43:54

【问题描述】：

我正在使用 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 中的地图过滤器匹配？

【问题讨论】：

想知道你最后做了什么？

【参考方案1】：

我找到了解决您问题的方法。 Leaflet 有一个 polygon 类，它接受一个多边形坐标数组，并有一个名为 getBounds() 的函数，它返回西南和东北边界。但是，Leaflet 并没有遵循 LngLat 的约定，它的格式是 LatLng。因此，您必须切换它。我从 Mapbox Show drawn 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));

【讨论】：

谢谢！我如何获得data.features[0].geometry.coordinates 的值？我只有来自 select 事件的 name 值。

@Richard 在您上面发布的代码中，应该是 e.features...

这是对传单的响应，而不是 OP 中特定的 GL JS

【参考方案2】：

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

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

【讨论】：

这并没有首先得到特征，也没有得到它的边界或几何形状

【参考方案3】：

我看到这个问题仍然相关 - 我解决了这个问题，我向包含给定多边形的所有点和构建边界 [[minLng, minLat], [maxLng, maxLat]] 的数据库发出单独的请求。 所有尝试解决已渲染或源特征的几何问题对我来说都不起作用 - 很可能是因为 Mapbox 没有在图块中保留初始 geoJSON。