使用 Mapbox GL JS 按属性过滤 Mapbox 点
我目前在我的网站上运行 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']]);
I currently have Mapbox running on my site, data points and popups are function while using a dataset uploaded to Mapbox Studio. For the life of me, I cannot filter the points by properties in Javascript (within my html file script tag). I tried setFilter() examples and nothing seems to work.
By the way, I censored our access token and styles url. All of that is working on my end.
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']]);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您使用
['all', ...]，那么您应该为属性添加一个get。在您的情况下，情况是：
如果您仅使用一个过滤器，则可以删除
['all', ...]并使用它：If you are using the
['all', ...]then you should include agetfor the properties.In your case that would be:
If you're using one filter only, you can drop the
['all', ...]and use this instead: