使用Leafletjs MarkerClusterGroup和Mapbox过滤器时遇到问题

问题描述

我已经尝试了Mapbox及其API来创建交互式地图.目的是在geojson文件中获取点，并将其显示在地图上.必须根据其标记图标对其进行过滤，并根据所应用的缩放进行分组.

I've tried Mapbox and their API to create an interactive map. The purpose is to fetch points in a geojson file, and display them on the map.They have to be filtered by their marker-icon and grouped depending on the zoom applied.

我将MarkerClusterGroup插件与传单和Mapbox结合使用时没有问题，但是我无法使用过滤器.

I had no trouble using the MarkerClusterGroup plugin with leaflet and Mapbox, but I can't get the filters to work.

这是我的代码:

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

这是我的json的内容，带有要点:

And this is the content of my json with the points :

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

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

The markers are displaying correctly, the cluster part too, but I can't get the filters to work...

有什么主意吗?

谢谢！

(注意:我尝试使用控制台在return true之前的map.markerLayer.setFilter(function(f) {}中显示日志，但没有任何显示.

(Note : using the console, I tried to display a log in the map.markerLayer.setFilter(function(f) {} , before the return true, but I have nothing showing up.

再次感谢您的时间

推荐答案

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

I found the solution with some help. This is the method I used :

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

这篇关于使用Leafletjs MarkerClusterGroup和Mapbox过滤器时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！