如何在过滤后保持 GeoJSON 样式？

Question

我的地图有一个简单的过滤器，用于由菜单-ui 切换控制的小型 GeoJSON 多边形数据集。

$('.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 样式在地图加载时正确，但当切换菜单-ui 并过滤 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

如何在过滤后保持 GeoJSON 样式？

How do I keep GeoJSON style after filter?

javascript

mapbox