Поиск объекта по ключу из слоя json, выполненного путепроводами API
Я строю карту спортивных сооружений на основе листовки. Я использую Overpass API для получения данных объекта и создания одной группы слоев для спортивных объектов одного типа.
var swimming = new L.LayerGroup();
var swimming_node = new L.layerJSON({
url: 'http://overpass-api.de/api/interpreter?data=[out:json] [timeout:1];node({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out body;',
propertyItems: 'elements',
propertyTitle: 'tags.name',
propertyLoc: ['lat','lon'],
buildIcon: function(data, title) {
return new L.Icon({
iconUrl:'icon/swimming.png',
iconSize: new L.Point(32, 37),
iconAnchor: new L.Point(18, 37),
popupAnchor: new L.Point(0, -37)
});
},
buildPopup: function(data, marker) {
return data.tags.name || null;
}
})
.on('dataloading',function(e) {
loader.style.display = 'block';
})
.on('dataloaded',function(e) {
loader.style.display = 'none';
})
.addTo(swimming);
var swimming_way = new L.layerJSON({
url: 'http://overpass-api.de/api/interpreter?data=[out:json][timeout:1];way({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out center;',
propertyItems: 'elements',
propertyTitle: 'tags.name',
propertyLoc: ['center.lat','center.lon'],
buildIcon: function(data, title) {
return new L.Icon({
iconUrl:'icon/swimming.png',
iconSize: new L.Point(32, 37),
iconAnchor: new L.Point(18, 37),
popupAnchor: new L.Point(0, -37)
});
},
buildPopup: function(data, marker) {
return data.tags.name || null;
}
})
.on('dataloading',function(e) {
loader.style.display = 'block';
})
.on('dataloaded',function(e) {
loader.style.display = 'none';
})
.addTo(swimming);
var swimming_relation = new L.layerJSON({
url: 'http://overpass-api.de/api/interpreter?data=[out:json][timeout:1];relation({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out center;',
propertyItems: 'elements',
propertyTitle: 'tags.name',
propertyLoc: ['center.lat','center.lon'],
buildIcon: function(data, title) {
return new L.Icon({
iconUrl:'icon/swimming.png',
iconSize: new L.Point(32, 37),
iconAnchor: new L.Point(18, 37),
popupAnchor: new L.Point(0, -37)
});
},
buildPopup: function(data, marker) {
return data.tags.name || null;
}
})
.on('dataloading',function(e) {
loader.style.display = 'block';
})
.on('dataloaded',function(e) {
loader.style.display = 'none';
})
.addTo(swimming);
Далее я сделал слой, содержащий все мои спортивные принадлежности
var allLayers = L.layerGroup([basketball, swimming, tennis, volleyball
]);
После этого я попытался добавить fuse.js[1] и Leaflet.Control.Search [2], чтобы найти объект по имени "tags.name" или типу "tags.sport".
Поисковый инструмент появляется, но не может найти какой-либо объект. Пожалуйста, скажите мне, что не так с моим кодом и, если возможно, как он должен выглядеть.
var fuse = new Fuse(allLayers.elements, {
keys: ['tags.name', 'tags.sport']
});
L.control.search({
layer: allLayers,
propertyName: 'name',
position:'topright',
filterData: function(text, records) {
var jsons = fuse.search(text),
ret = {}, key;
for(var i in jsons) {
key = jsons[i].elements.name;
ret[ key ]= records[key];
}
console.log(jsons,ret);
return ret;
}
})
.on('search_locationfound', function(e) {
e.layer.openPopup();
})
.addTo(map);
[1] https://github.com/krisk/fuse
[2] http://labs.easyblog.it/maps/leaflet-search/examples/fuzzy.html