javascript - 在 Mapbox 中使用 Leafletjs MarkerClusterGroup 和过滤器时遇到问题

Question

我试过 Mapbox 和他们的 API 来创建交互式 map 。目的是获取 geojson 文件中的点，并将它们显示在 map 上。它们必须通过标记图标进行过滤，并根据应用的缩放比例进行分组。

我在使用带有传单和 Mapbox 的 MarkerClusterGroup 插件时没有遇到任何问题，但我无法让过滤器工作。

这是我的代码:

https://gist.github.com/KuneStudio/5985864

这是我的 json 的内容:

https://gist.github.com/KuneStudio/5985858

标记显示正确，集群部分也显示正确，但我无法让过滤器工作...

有什么想法吗？

谢谢!

(注意:使用控制台，我尝试在返回 true 之前在 map.markerLayer.setFilter(function(f) {} 中显示日志，但我什么也没出现。

再次感谢您的宝贵时间

Answer 1

我在一些帮助下找到了解决方案。这是我使用的方法:

<script type='text/javascript'>

// I suppose that the json is saved in the var dataJSON

L.MarkerClusterGroup.include({
    fromGeoJSON: function (geojson) {
        this._geojson = geojson;
        this.filter();
    },

    filter: function (f) {
        f = f || function (m) { return true; }
        var markers = Array();
        for (var i = 0; i < this._geojson.features.length; i++) {
            var a = this._geojson.features[i];
            if (!f(a)) { continue; }
            var title = a.properties['title'];
            var description = a.properties['description']
            var marker = L.marker(new L.LatLng(a.geometry.coordinates[1], a.geometry.coordinates[0]), {
                icon: L.mapbox.marker.icon({'marker-symbol': a.properties['marker-symbol'], 'marker-color': a.properties['marker-color']}),
                title: title
            });
            marker.bindPopup('<b>'+title+'</b><br>'+description);
            markers.push(marker);
        }
        this.clearLayers();
        this.addLayers(markers);
    }
});

var map = L.mapbox.map('map', 'mymapid',  {markerLayer: false});
map.on('error', function (e) {
    console.log(e);
})
var cluster = new L.MarkerClusterGroup();
map.addLayer(cluster);

cluster.fromGeoJSON(dataJSON);
map.addLayer(cluster);
var filter = L.DomUtil.get('filter');
var food = L.DomUtil.get('filter-food');
var test = L.DomUtil.get('filter-test');
var all = L.DomUtil.get('filter-all');




jQuery('.chktax').on('click', function(e) {
    var allChecked = {};
    var cat = [];
    jQuery(".chktax:checked").each(function(i, elem){
            var name = elem.name;
            allChecked[name] = allChecked[name] || [];
            cat = cat || []
            allChecked[name].push(elem.value);
            cat.push(elem.value);
        });

    cluster.filter(function (m) {
            return superbag(m.properties['categories'], cat);
        });

});

L.DomEvent.on(all, 'click', function (e) {
    cluster.filter();
})


function superbag(sup, sub) {
    sup.sort();
    sub.sort();
    var i, j;
    for (i=0,j=0; i<sup.length && j<sub.length;) {
        if (sup[i] < sub[j]) {
            ++i;
        } else if (sup[i] == sub[j]) {
            ++i; ++j;
        } else {
            return false;
        }
    }
    return j == sub.length;
}
</script>