Filter 地图视图React地图gl React挂钩中的过滤器要素

我对React和JavaScript非常陌生，我正在尝试使用React Map gl为我的React Hooks项目编写queryRenderedFeatures过滤器

这个项目有一个巨大的数据列表，我只想过滤地图视图中显示的数据。如Mapbox gl js上的示例所示：

根据德国劳埃德船级社的文件： 它说您可以使用queryRenderedFeatures作为静态映射的方法，但我添加它的方式似乎是错误的。。。在线资源也不多：/

任何帮助都将不胜感激！：）

导出默认函数映射（）{
const[data，setData]=useState（）
const[viewport，setViewport]=useState({
纬度：-28.016666，
经度：153.399994，
缩放：12，
方位:0,，
音高：0
})
常量mapRef=useRef（）
useffect（（）=>{
获取（'../data.json'）
.then（res=>res.json（））
.然后（res=>setData（res））
},[])
函数特性（）{
mapRef.current.queryRenderedFeatures（{layers:['ramps']}）
}
函数filterRamps（e）{
data.features.filter（feature=>{
返回feature.properties.material===e.target.value
})
}
常量handleClick=（）=>{
setData（filterRamps（））
}
如果（！数据）{
返回空
}
返回(
)
}

您需要类似于：

...
const mapRef = useRef()

...
<MapGL
    ref={mapRef}
    onClick={e => {
        const features = mapRef.current.queryRenderedFeatures(e.geometry.coordinates, { layers: ['ramps'] })
        console.log(features)
    }}
    ...
/>

。。。
常量mapRef=useRef（）
...
{
const features=mapRef.current.queryRenderedFeatures（e.geometry.coordinates，{layers:['ramps']}）
console.log（特性）
}}
...
/>

...
const mapRef = useRef()

...
<MapGL
    ref={mapRef}
    onClick={e => {
        const features = mapRef.current.queryRenderedFeatures(e.geometry.coordinates, { layers: ['ramps'] })
        console.log(features)
    }}
    ...
/>