Как сохранить стиль GeoJSON после фильтра?

Question

У моей карты есть простой фильтр для небольшого набора данных полигона GeoJSON, управляемый кнопками меню-ui.

$('.menu-ui a').on('click', function() { 
    // For each filter link, get the 'data-filter' attribute value. 
    var filter = $(this).data('filter'); 
    $(this).addClass('active').siblings().removeClass('active'); 
    featureLayer.setFilter(function(f) { 
     // If the data-filter attribute is set to "all", return 
     // all (true). Otherwise, filter on markers that have 
     // a value set to true based on the filter name. 
     return (filter === 'all') ? true : f.properties.DISTRICT == filter; 
    }); 
    return false; 
}); 

стили многоугольники устанавливаются перед этим:

var featureLayer = L.mapbox.featureLayer() 
    .loadURL('citycouncils.geojson') 
    .addTo(map); 

function getMyColor(myargument) { 
    if (myargument === '1') { 
     return '#996767' 
    }; 
    if (myargument === '2') { 
     return '#679967' 
    }; 
    if (myargument === '3') { 
     return '#676799' 
    }; 
    if (myargument === '4') { 
     return '#676794' 
    }; 
    if (myargument === '5') { 
     return '#676799' 
    }; 
} 
featureLayer.on('ready', function() { 
    featureLayer.eachLayer(function(polygon) { 
     polygon.bindPopup('District ' + polygon.feature.properties.DISTRICT); 
     console.log(typeof setStyle); 
     polygon.setStyle({ 
      opacity: 0.55, 
       weight: 2, 
       opacity: 1, 
      fillOpacity: 0.55, 
      fillColor: getMyColor(polygon.feature.properties.DISTRICT), 
      color: 'white' 
     }); 
    }); 
}); 

Стили GeoJSON правильно на карте нагрузки, но они теряют стиль, когда меню пользовательский интерфейс переключается и GeoJSON фильтруется. Как сохранить стили в процессе фильтрации?

Редактировать: The filter function works fine. Как пройти стиль в процессе?

Answer 1

Когда вы применяете фильтр, отфильтрованные функции снова добавляются к слою, так как вы применяете стиль только к готовому событию, когда вы сначала загружаете функции, и они добавляются, вы теряете стиль, когда вы используете фильтр из-за повторного добавления. Вы должны применить стиль снова после того, как вы используете фильтр, попробовать что-то вроде этого:

var featureLayer = L.mapbox.featureLayer('http://run.plnkr.co/1zb4Lj1NPtpu4MAM/data.geo.json').addTo(map); 

// Fetch available inputs 
var inputs = document.querySelectorAll('input.filter'); 

// Loop over inputs 
for (i = 0; i < inputs.length; i++) { 
    // Attach events 
    inputs[i].onchange = function() { 
    // Run filter on inputchange 
    filter(); 
    } 
} 

// Object to hold the colors 
var colors = { 
    '1': 'red', 
    '2': 'yellow', 
    '3': 'blue' 
}; 

// Method which applies style 
var setStyle = function() { 
    // Loop over layers in featureLayer 
    featureLayer.eachLayer(function (layer) { 
    // Set style on layer 
    layer.setStyle({ 
     // set colors from object 
     fillColor: colors[layer.feature.id], 
     color: colors[layer.feature.id] 
    }); 
    }); 
} 

// Filter function 
var filter = function() { 
    // Array for checked inputs 
    var checked = []; 
    // Loop over inputs 
    for (i = 0; i < inputs.length; i++) { 
    // See if input is checked 
    if (inputs[i].checked) { 
     // Is checked add to array 
     checked.push(Number(inputs[i].value)); 
    } 
    } 
    // Set filter function on array 
    featureLayer.setFilter(function (feature) { 
    // return true is feature.id is in checked array 
    return (checked.indexOf(feature.id) != -1); 
    }); 
    // Call style function 
    setStyle(); 
} 

// Run filter when featureLayer is ready 
featureLayer.on('ready', filter); 

Рабочий пример на Plunker: http://plnkr.co/edit/UToM2gtLHEI6EZyjvtGy?p=preview