如何使用 Leaflet 中的切换按钮过滤 geojson？答案

【问题标题】：How to filter geojson using toggle buttons in Leaflet?如何使用 Leaflet 中的切换按钮过滤 geojson？
【发布时间】：2015-02-24 05:03:30
【问题描述】：

加载 geojson 多边形后，我想实现一个切换菜单以按值过滤。我假设实现是similar to this cartodb map which uses SQL statements.

我想我可以使用图层选择器并从菜单（例如 District 1）传递一个变量。

我的代码只是引入了 15 个多边形的图层并为其设置样式。我想保留这个，但添加一个过滤器。这是如何在传单中完成的？非常感谢示例。

   L.mapbox.accessToken = 'pk.eyJ1Ijoic2tvcmFzYXVydXMiLCJhIjoiaEdGTUZWTSJ9.osOC8tWU3bMaNprVNoEu7g';

    var lamap = L.mapbox.map('mapid', 'skorasaurus.5eb85050')
        .setView([34.000880, -118.04036], 10);

    var featLayer = L.mapbox.featureLayer().addTo(lamap);

    featLayer.loadURL('citycouncils.geojson');

    function getMyColor(myargument) {
        if (myargument === '1') {
            return '#996767'
        };
        if (myargument === '2') {
            return '#679967'
        };
        if (myargument === '10') {
            return '#672799'
        };
        if (myargument === '14') {
            return '#670099'
        };
        if (myargument === '15') {
            return '#699799'
        };
    }

    // styles each polygon based on its properties in the geojson file, using leaflet's setStyle
    featLayer.on('ready', function() {
        featLayer.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'
            });
        });
    });

【问题讨论】：

这么多如果。使用对象或数组进行查找。
我没有看到任何问题，而且我在您的代码中完全看不到与过滤有关的任何内容，没有逻辑，没有输入，什么也没有。你想到了什么？你有什么问题？它给出了什么错误？请分享并展示您尝试做的示例。

标签： javascript leaflet

【解决方案1】：

作为documented 过滤L.mapbox.FeatureLayer 非常简单。只需使用图层的setFilter 方法设置过滤方法即可。

参考L.mapbox.FeatureLayer的setFilter方法： https://www.mapbox.com/mapbox.js/api/v2.1.5/l-mapbox-featurelayer/#section-featurelayer-setfilter

完整的工作示例就在 Mapbox 网站上： https://www.mapbox.com/mapbox.js/example/v1.0.0/multiple-marker-filters/

【讨论】：