Проблема с Leafletjs MarkerClusterGroup и фильтры с помощью Mapbox

Question

Я пробовал Mapbox и их API для создания интерактивной карты. Цель состоит в том, чтобы извлекать точки в файле geojson и отображать их на карте. Они должны быть отфильтрованы по значку маркера и сгруппированы в зависимости от примененного увеличения.

У меня не возникло проблем с использованием плагина MarkerClusterGroup с листом и Mapbox, но я не могу заставить фильтры работать.

Это мой код:

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>