Question

Tôi có một OpenstreetMap với leaflet. Tôi đang sử dụng this Plugin cho tờ rơi để truy vấn với Cầu vượt.

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


}); 

Nhưng bản đồ của tôi không hiển thị khi được sử dụng với Plugin.

Điều gì là sai?

Lưu ý: Truy vấn của tôi đang hoạt động dựa trên this.

EDIT:

Truy vấn này đang hợp tác với Plugin nhưng không phải trên http://overpass-turbo.eu/?!

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

});

ví dụ đầy đủ:

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

Tôi đã giải quyết được sự cố của mình với một số plugin khác.

tôi có thể sử dụng truy vấn vượt-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); 

hoặc với vòng tròn tùy chỉnh trên bản đồ

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); 

Bạn thậm chí có thể chuyển đổi các dữ liệu nhận được từ Cầu vượt với this để GeoJSON. Có thể vẽ đường và khu vực trực tiếp.

Answer 2

mức độ phóng của bạn là quá thấp, bạn về cơ bản lấy dữ liệu cho một phần lớn của trái đất. Kết quả là truy vấn Cầu vượt của bạn hết giờ và bạn sẽ không nhận được bất kỳ kết quả nào.

Thay đổi

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

để

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

Bên cạnh đó tôi đề nghị:

• thêm một tham số [timeout:x] để hạn chế thời gian chạy của truy vấn của bạn
• thêm số đối tượng tối đa bạn muốn truy vấn, ví dụ: out 100; cho giá thầu CPC 100 nút.

Ngoài ra, bạn không thể sử dụng (BBOX) trong bộ tăng tốc. Cú pháp đúng cho turbo vượt qua sẽ là ({{bbox}}).