如何在過濾後保留GeoJSON樣式？

我的地圖具有通過菜單的UI切換控制的小GeoJSON的多邊形數據集簡單的過濾器。在地圖上的負載如何在過濾後保留GeoJSON樣式？

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的過濾方式：

$('.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; 
});

多邊形樣式此之前設置。如何通過篩選過程保留樣式？

編輯：The filter function works fine.如何通過風格的過程？

來源

2015-02-24 Bergen88

正確請問'setFilter'方法過濾器？ – iH8 2015-02-24 10:51:48

是，使用setfilter工作：http://tinyurl.com/m3d5yy9 – Bergen88 2015-02-24 15:05:53

好了，因爲我想知道，你不接受的答案在我建議它，它可能是你目前的問題的一部分。如果你接受的答案，這是對回答者很好的意見，再加上你貢獻回到如此，因爲當其他人有類似的問題，他們也可以找到一個接受的解決方案也並沒有再次問同樣的問題。保持乾淨整潔。請參閱：http://stackoverflow.com/help/someone-answers – iH8 2015-02-24 15:32:18

當你申請一個過濾器，過濾的功能得到重新添加到該層，因爲你只應用樣式上ready事件當你在第一次加載功能以及它們得到補充，你將失去的風格時，您使用過濾器，因爲重新添加。你應該再次申請的風格，你使用的過濾器後，嘗試這樣的事情：

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

來源

2015-02-24 16:08:00 iH8

如何在過濾後保留GeoJSON樣式？

回答

相關問題