3

我正在根据传单构建体育设施地图。我使用 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

4

0 回答 0