Mapbox GL JS：縮放到過濾的多邊形？

我使用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 example of zooming to bounds，但它假定您已經知道的範圍是什麼。

有沒有什麼辦法可以在Mapbox中獲得匹配地圖過濾器的多邊形邊界？

來源

2017-03-18 Richard

我找到了解決問題的辦法。 Leaflet有一個polygon類，它採用多邊形座標數組，並具有一個函數getBounds()，該函數返回南西和北東邊界。但是，傳單不遵循約定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));

來源

2017-03-28 22:15:29

謝謝！但是，如何獲得'data.features [0] .geometry.coordinates'的值呢？我所擁有的就是select事件中的'name'值。 – Richard

@Richard在你的代碼中，你應該是'e.features' ... –

我有下面的代碼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是一個特徵。

來源

2017-07-07 10:18:52

Mapbox GL JS：縮放到過濾的多邊形？

回答

相關問題