Question

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

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

这是我的代码：

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

这是我的json的内容：

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

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

有什么想法吗？

谢谢！

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

再次感谢您的时间

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>

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

1 个答案: