如何通过传单查询立交桥区域？

Question

我有一个带有leaflet的OpenstreetMap 。 我正在使用这个 Plugin for leaflet来查询Overpass。

var opl = new L.OverPassLayer({
  query: "(area['name'='Roma']; node(area)['amenity'='drinking_water']);out;",


});

但是当插件使用时，我的地图没有显示任何内容。

怎么了？

注意：我的查询基于此工作。

编辑：

此查询正在使用插件，但不适用于http://overpass-turbo.eu/？！

var opl = new L.OverPassLayer({
query: "(node(BBOX)['amenity'='drinking_water'];);out;",

}）;

完整示例：

var attr_osm = 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors',
attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>';
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')});

var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(49.592041, 8.648164),2);

//OverPassAPI overlay
var opl = new L.OverPassLayer({
  query: "(node(BBOX)['amenity'='drinking_water'];);out;",


});

map.addLayer(opl);

Answer 1

您的缩放级别太低，您基本上是在检索大部分地球的数据。 因此，您的Overpass查询超时，您将无法获得任何结果。

更改

new L.LatLng(49.592041, 8.648164),2)

至

new L.LatLng(49.592041, 8.648164),14)

另外我建议：

• 添加[timeout:x]参数以限制查询的运行时
• 添加要查询的最大对象数，例如out 100; 最大 100个节点。

此外，您不能在立交桥涡轮增压器中使用(BBOX) 。 ({{bbox}}) turbo的正确语法是({{bbox}}) 。

Answer 2

我用另一个插件解决了我的问题。

我可以使用overpass-turbo查询：

var attr_osm = 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors',
attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>';
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')});

var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(43.592041,2.648164),14);


var opl = new L.OverPassLayer({
query: "node[amenity=drinking_water]({{bbox}});out;",})",
});

map.addLayer(opl); 

或在地图上使用自定义圆圈

var opl = new L.OverPassLayer({
query: "node[amenity=drinking_water]({{bbox}});out;",})",
onSuccess: function(data) {


    for(i=0;i<data.elements.length;i++) {
      e = data.elements[i];



      var pos = new L.LatLng(e.lat, e.lon);
      var color = 'green';
      L.circle(pos, 5, {
        color: color,
        fillColor: '#fa3',
        fillOpacity: 1,
      }).addTo(map);

    }
  },
});

map.addLayer(opl); 

你甚至可以转换从立交桥收到的数据这给GeoJSON的。 可以直接绘制方式和区域。