Tengo un mapa mapbox que muestra varios puntos de una fuente GEOJson con varias características y categorías independientes. Quiero poder filtrar por estas características.
Idealmente, cuando hago clic en un filtro de casilla de verificación, solo los puntos relevantes deberían permanecer visibles en la capa.
Entonces, supongo que después de hacer clic en una casilla de verificación, todos los puntos del mapa deberían borrarse y el mapa debería volver a dibujarse solo con los puntos relevantes. Para eso necesito saber
O
Todos los ejemplos que encontré en la página de mapbox usan diferentes capas para las categorías y alternan la visibilidad de estas capas. Esto supone que un punto solo puede estar en una categoría a la vez. Pero en mi caso hay varias categorías que son independientes entre sí (similares a las categorías "color", "forma", "peso", etc). Entonces necesito filtrar los puntos individualmente.
¿Alguna idea de cómo abordar esto?
De acuerdo con la documentación, puede lograr esto usando filtros . Los filtros se escriben como expresiones .
En su caso, desea filtrar los puntos individualmente. No es necesario borrar todos los puntos ni actualizar los datos del mapa.
Digamos que tenemos 3 categorías: color , shape y weight . Suponemos que su fuente GeoJSON es así:
this.map.addSource('points-source', { type: 'geojson', data: { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [lng, lat], }, properties: { color: 'blue', weight: 34, shape: 'shape1' } }, ... ] })Puede filtrar los puntos directamente en la definición de capa, dependiendo de las propiedades de cada punto:
this.map.addLayer({ id: 'points-layer', type: 'symbol', filter: ['all', ['==', 'color', 'blue'], ['>=', 'weight', 40], ...], source: 'points-source', paint: { ... } }) También desea filtrar los puntos dinámicamente con un filtro de casilla de verificación. En ese caso, puede configurar el filtro de una capa específica con la función setFilter() :
this.map.setFilter( 'points-layer', ['all', ['==', 'color', 'red'], ['>=', 'weight', 10], ...] )