Question

我的地图有一个简单的过滤器，用于通过menu-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在地图加载时正确设置样式，但是当切换menu-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样式？

1 个答案: