Javascript 如何基于geojson信息过滤Mapbox上的标记？

因此，我想尝试创建一个基于mapbox的nav/过滤器，它将根据酒吧类型（独立或酒吧链）过滤酒吧。我在geojson中添加了pub类型，但是如何基于geojson中的信息创建过滤器呢

我试图创建一个基于此链接的过滤器，但它更多的是基于图标

let filters = document.getElementById("filters");

let map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/jlsr10/ck029molz05p11cock35wlyy9',
  center: [-0.133677, 51.526631],
  zoom: 12
});

let geojson = {
    "id": "places",
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "name": "The World's End",
          "PubType": "Independent",
          "times": "Monday-Thursday: 11.00-0.00" + "<br>" + "Friday-Saturday: 11.00-1.00"  + "<br>" + "Sunday: 12.00-23.00"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.14222681522369385,
            51.53918203198429
          ]
        }
      },
       {
        "type": "Feature",
        "properties": {
          "name": "The Black Heart",
          "PubType": "Independent",
          "times": "Monday-Tuesday: 15.00-23.00" + "<br>" + "Wednesday-Thursday: 15.00-1.00"  + "<br>" + "Friday-Saturday: 12.00-2.00"  + "<br>" + "Sunday: 12.00-23.00"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.141786,
            51.539003
          ]
        }
      }
      ,{
        "type": "Feature",
        "properties": {
          "name": "The Devonshire Arms",
          "PubType": "Independent",
          "times": "Monday-Wednesday: 14.00-0.00" + "<br>" + "Thursday: 14.00-1.00"  + "<br>" + "Friday-Saturday: 14.00-2.00"  + "<br>" + "Sunday: 14.00-0.00"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.14223217964172363,
            51.54096705495758
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "The Unicorn",
          "PubType": "Independent",
          "times": "Monday-Thursday: 12.00-23.00" + "<br>" + "Friday-Saturday: 12.00-0.00"  + "<br>" + "Sunday: 12.00-23.00"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.12938976287841797,
            51.54885034693916
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "Garlic and Shots",
          "PubType": "Independent",
          "times": "Monday-Thursday: 17.00-0.00" + "<br>" + "Friday-Saturday: 16.00-1.00"  + "<br>" + "Sunday: 17.00-23.30"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.13152748346328735,
            51.51379710359405
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "Crobar",
          "PubType": "Independent",
          "times": "Monday-Saturday: 16.00-3.00" + "<br>" + "Sunday: Closed"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.1302802562713623,
            51.51482699380818
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "Slim Jim's Liquor Store",
          "PubType": "Independent",
          "times": "Monday-Wednesday: 17.00-2.00" + "<br>" + "Thursday: 14.00-1.00"  + "<br>" + "Friday-Saturday: 14.00-2.00"  + "<br>" + "Sunday: 14.00-0.00"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.10267496109008789,
            51.53812099449894
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "Aces and Eights Saloon Bar",
          "PubType": "Independent",
          "times": "Monday-Thursday: 16.00-1.00" + "<br>" + "Friday-Saturday: 16.00-2.30"  + "<br>" + "Sunday: 16.00-1.00"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.1383929,
            51.556696
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "Ace Cafe",
          "PubType": "Independent",
          "times": "Monday-Thursday: 7.00-22.30" + "<br>" + "Friday-Saturday: 7.00-11.00"  + "<br>" + "Sunday: 7.00-10.30"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.277751, 51.541419 
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "Brewdog",
          "PubType": "Pub Chain",
          "times": "Monday-Thursday: 12.00-23.30" + "<br>" + "Friday-Saturday: 12.00-0.00"  + "<br>" + "Sunday: 12.00-10.30"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.140905, 51.538394
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "The Draft House",
          "PubType": "Pub Chain",
          "times": "Monday-Wednesday: 12.00-23.00" + "<br>" + "Thursday: 12.00-0.00" + "<br>" + "Friday-Saturday: 12.00-1.00"  + "<br>" + "Sunday: 12.00-10.30"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.138385, 51.541540
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "The Draft House",
          "PubType": "Pub Chain",
          "times": "Monday-Thursday: 12.00-23.00" + "<br>" + "Friday-Saturday: 12.00-0.00"  + "<br>" + "Sunday: Closed"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -0.135732, 51.519278
          ]
        }
      }
    ]
  };


// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
    let el = document.createElement('div');
    el.className = 'marker';

// add marker to map
  new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .setPopup(new mapboxgl.Popup({offset: 25})
  .setHTML('<h3>' + marker.properties.name + '</h3>' + '<h4>Opening Times</h4>' +'<p>'+ marker.properties.times +'</p>'))
  .addTo(map);
});```



I would like the filter to filter Independent pubs, and pub chain pubs for the user.

让filters=document.getElementById（“filters”）；
让map=newmapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/jlsr10/ck029molz05p11cock35wlyy9',
中心：[-0.133677,51.526631]，
缩放：12
});
让geojson={
“id”：“地点”，
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“财产”：{
“名称”：“世界末日”，
“PubType”：“独立”，
《泰晤士报》：“周一至周四：11.00-0.00”+”
“+”周五至周六：11.00-1.00”+“
”+“周日：12.00-23.00”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.14222681522369385,
51.53918203198429
]
}
},
{
“类型”：“功能”，
“财产”：{
“名字”：“黑心”，
“PubType”：“独立”，
《泰晤士报》：“星期一-星期二：15.00-23.00”+“
”+“星期三-星期四：15.00-1.00”+“
”+“星期五-星期六：12.00-2.00”+“
”+“星期日：12.00-23.00”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.141786,
51.539003
]
}
}
,{
“类型”：“功能”，
“财产”：{
“名称”：“德文郡武器”，
“PubType”：“独立”，
《泰晤士报》：“星期一-星期三：14.00-0.00”+”
“+”星期四：14.00-1.00“+”
“+”星期五-星期六：14.00-2.00“+”
“+”星期日：14.00-0.00”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.14223217964172363,
51.54096705495758
]
}
},
{
“类型”：“功能”，
“财产”：{
“名字”：“独角兽”，
“PubType”：“独立”，
《泰晤士报》：“星期一-星期四：12.00-23.00”+“
”+“星期五-星期六：12.00-0.00”+“
”+“星期日：12.00-23.00”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.12938976287841797,
51.54885034693916
]
}
},
{
“类型”：“功能”，
“财产”：{
“名称”：“大蒜和鱼丸”，
“PubType”：“独立”，
《泰晤士报》：“周一至周四：17.00-0.00”+”
“+”周五至周六：16.00-1.00”+“
”+“周日：17.00-23.30”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.13152748346328735,
51.51379710359405
]
}
},
{
“类型”：“功能”，
“财产”：{
“名称”：“Crobar”，
“PubType”：“独立”，
“泰晤士报”：“星期一星期六：16.00-3.00”+“
”+“星期日：关闭”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.1302802562713623,
51.51482699380818
]
}
},
{
“类型”：“功能”，
“财产”：{
“名称”：“斯利姆吉姆酒庄”，
“PubType”：“独立”，
《泰晤士报》：“星期一-星期三：17.00-2.00”+“
”+“星期四：14.00-1.00”+“
”+“星期五-星期六：14.00-2.00”+“
”+“星期日：14.00-0.00”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.10267496109008789,
51.53812099449894
]
}
},
{
“类型”：“功能”，
“财产”：{
“名称”：“Aces和Eights沙龙酒吧”，
“PubType”：“独立”，
《泰晤士报》：“星期一星期四：16.00-1.00”+”
“+”星期五星期六：16.00-2.30”+“
”+“星期日：16.00-1.00”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.1383929,
51.556696
]
}
},
{
“类型”：“功能”，
“财产”：{
“名称”：“王牌咖啡馆”，
“PubType”：“独立”，
《泰晤士报》：“星期一-星期四：7.00-22.30”+“
”+“星期五-星期六：7.00-11.00”+“
”+“星期日：7.00-10.30”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.277751, 51.541419 
]
}
},
{
“类型”：“功能”，
“财产”：{
“名称”：“Brewdog”，
“PubType”：“Pub-Chain”，
《泰晤士报》：“周一至周四：12.00-23.30”+”
“+”周五至周六：12.00-0.00”+“
”+“周日：12.00-10.30”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.140905, 51.538394
]
}
},
{
“类型”：“功能”，
“财产”：{
“名称”：“征兵之家”，
“PubType”：“Pub-Chain”，
《泰晤士报》：“星期一-星期三：12.00-23.00”+“
”+“星期四：12.00-0.00”+“
”+“星期五-星期六：12.00-1.00”+“
”+“星期日：12.00-10.30”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.138385, 51.541540
]
}
},
{
“类型”：“功能”，
“财产”：{
“名称”：“征兵之家”，
“PubType”：“Pub-Chain”，
《泰晤士报》：“星期一-星期四：12.00-23.00”+”
“+”星期五-星期六：12.00-0.00”+“
”+“星期日：关闭”
},
“几何学”：{
“类型”：“点”，
“坐标”：[
-0.135732, 51.519278
]
}
}
]
};
//向地图添加标记
geojson.features.forEach（函数（标记）{
//为标记创建DOM元素