使用 Mapbox GL JS 按属性过滤 Mapbox 点

Question

我目前在我的网站上有 Mapbox 运行，数据点和弹出窗口在使用上传到 Mapbox Studio 的数据集时起作用。对于我的生活，我无法通过 Javascript 中的属性（在我的 html 文件脚本标记内）过滤点。我尝试了 setFilter() 示例，但似乎没有任何效果。

顺便说一句，我审查了我们的访问令牌和样式 url。所有这些都在为我服务。

        mapboxgl.accessToken = 'pk........';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/........',
            center: [-111.9671707, 33.30527115],
            zoom: 15
        });

        map.on('click', (event) => {
            const features = map.queryRenderedFeatures(event.point, {
                layers: ['crime-data-complete (1)'] 
            });
            if (!features.length) {
                return;
            }
            const feature = features[0];
            
            const popup = new mapboxgl.Popup({ offset: [0, -15] })
                .setLngLat(feature.geometry.coordinates)
                .setHTML(
                    `<h2 style="text-transform: capitalize;">${feature.properties.Crime}</h2><p><strong>Date: </strong>${feature.properties.Date}</p><p><strong>Address: </strong>${feature.properties.Address}</p><p><strong>City: </strong>${feature.properties.City}</p><p><strong>State: </strong>${feature.properties.State}</p>`
            )
            .addTo(map);
        });

        map.setFilter('crime-data-complete (1)', ['all', ['==', 'Crime', 'Theft']]);

Answer 1

如果您使用的是 ['all', ...]，那么您应该为属性添加一个 get。

你的情况是：

map.setFilter('crime-data-complete (1)', ['all', ['==', ['get', 'Crime'], 'Theft']]);

如果您只使用一个过滤器，您可以删除 ['all', ...] 并改用它：

map.setFilter('crime-data-complete (1)', ['==', 'Crime', 'Theft']);

使用 Mapbox GL JS 按属性过滤 Mapbox 点

Filtering through Mapbox points with Mapbox GL JS by properties

javascript

mapbox

mapbox-gl-js

mapbox-studio