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中的地图过滤器匹配？

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

Answer 2

我有以下代码来fitBounds到Polygon中心坐标：

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 3

我看到这个问题仍然很重要-我解决了这个问题，它向数据库发出了一个单独的请求，其中包含给定多边形的所有点和建筑物边界logging/__init__.py。解决所有已渲染或源特征的几何图形的所有尝试对我都无效-很有可能是因为Mapbox没有在磁贴中保留初始的geoJSON。

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

3 个答案: