Question

因此，我想尝试基于mapbox创建一个导航/过滤器，该过滤器将根据其类型（独立的或发布链）来过滤发布。我在geojson中添加了发布类型，但是如何根据geojson中的信息创建过滤器？

我尝试基于此链接https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/创建一个过滤器，但它更多地是基于图标...


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.

Answer 1

与其添加标记，然后在过滤器更改时删除并重新添加标记，不如考虑添加图层并更新其来源。

添加geojson图层：


map.addLayer({
  id: "places",
  type: "symbol",
  source: {
    type: "geojson",
    data: geojson
  },
  layout: {
    "icon-image": "bar-15",
    "icon-size": 1.25,
    "icon-allow-overlap": true,
  }
});

然后过滤并更新源：


const filterElem = document.getElementById('pubTypeFilter');

filterElem.onchange = () => {
  const pubType = filterElem.value;
  if (pubType) {
    const newGeoJSON = {...geojson };
    newGeoJSON.features = geojson.features.filter(feature => feature.properties.PubType === pubType);
    map.getSource('places').setData(newGeoJSON);
  }
};

以下是一个可以执行此操作的codepen：https://codepen.io/manishraj/full/BaBrJwr

如何根据geojson信息在Mapbox上过滤标记？

1 个答案: