我正在使用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',["==",name]);
// Get bounds of filtered polygon somehow?
// var bounds = ??;
// map.fitBounds(bounds);
});
我已经检查了Mapbox example of zooming to bounds,但它假设你已经知道了界限是什么.
有没有办法可以让多边形的边界与MapBox中的地图过滤器匹配？
解决方法
我找到了解决问题的方法.
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));