时间戳

首页 > 解决方案 > 根据地图缩放级别在传单地图上设置边界

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

问题描述

我正在开发一个分叉的 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() + ']';

但我不能让它工作..立交桥不返回任何结果

添加：

与此同时，我靠近了，我试图看看 onMoveEnd 会发生什么

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;

标签： javascriptleafletgeocoding

解决方案

您的网址错误，应该是这样的：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，然后发出 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.
}

推荐阅读