根据地图缩放级别在传单地图上设置边界

Question

我正在开发一个分叉的 OSM/leaflet/overpass API 应用程序，它有自己的最大边界声明。 这样，对 Overpass API 的任何请求都仅限于声明的边界

var mapBounds = { south: 50.8025, west: 0.3724, north: 50.8785, east: 0.5290 };
var LBounds = L.latLngBounds([mapBounds.south, mapBounds.west], [mapBounds.north, mapBounds.east]);

对 Overpass API 的查询完成

...
    else queryBbox += '[bbox:' + [mapBounds.south, mapBounds.west, mapBounds.north, mapBounds.east].join(',') + ']';
...

需要更改边界框 (mapBounds) 以允许在全球范围内导航，并将它们设置为 bbox，因此对 Overpass API 的请求仅针对该地图区域。

所以我已经完成了

else queryBbox += '[bbox:' + map.getBounds().toBBoxString() + ']';

但我不能让它工作.. Overpass 没有返回结果

添加：

与此同时，我离得更近了，我试着看看在MoveEnd上会发生什么

onMoveEnd: function () {
    console.log(queryBbox);

控制台记录似乎返回坐标：

[out:json][bbox:0.38512229919433594,50.82990293001779,0.549917221069336,50.86404449323755];(nwr[tourism=museum];);out tags center qt 250;

但是它们反过来了

用于比较：这是原始查询的样子

[out:json][bbox:50.8025,0.3724,50.8785,0.529];(nwr[tourism=museum];);out tags center qt 250;

Answer 1

你的网址是错误的，应该是这样的： https : //overpass-api.de/api/interpreter?data=[out : json]; out%20skel%20qt;node[tourism=attraction]; &bbox=0.427393913269043, 50.84410451978967,0.5097913742065431,50.85710981721644 ；

您是自己构建 url 还是通过库构建 url？ 如果您使用库，请查看您是否定义了错误。

要创建自己的请求，请创建 url，然后发出 http 请求：

function getOverpassData(){
    var bbox = map.getBounds().toBBoxString();
    var _url = "https://overpass-api.de/api/interpreter?data=[out:json];out%20skel%20qt;node[tourism=attraction];";

    var bboxurl = _url+"&bbox="+bbox;
    console.log(bboxurl);
    // And then use $.ajax(bboxurl) or the normal js http request to get data.
}

Answer 2

在阅读（更接近）传单的文档时，我能够解决我的问题。

toBBoxString() 以“southwest_lng,southwest_lat,northeast_lng,northeast_lat”格式返回带有边界框坐标的字符串。 用于向返回地理数据的 Web 服务发送请求。

https://leafletjs.com/reference-1.6.0.html#latlngbounds-tobboxstring

但事实是，Overpass API 不会以 GeoJSON 格式返回响应......所以我对 toBBoxString() 的 hack 不合适，也就是我得到错误响应的原因。 相反，这个工作正常，所有请求现在都成功了

else queryBbox += '[bbox:' + map.getBounds().getSouth() +',' + map.getBounds().getWest() +',' + map.getBounds().getNorth() +',' + map.getBounds().getEast() + ']';

我希望在我投票给我之前有人可能有更优雅的解决方案