在地图视图中过滤特征 React-Map-gl React Hooks答案

【问题标题】：Filter features within map view React-Map-gl React Hooks在地图视图中过滤特征 React-Map-gl React Hooks
【发布时间】：2020-06-14 06:32:00
【问题描述】：

我对 React 和 JavaScript 还很陌生，正在尝试使用 React-Map-gl 为我的 React Hooks 项目编写一个 queryRenderedFeatures 过滤器。

该项目有一个庞大的数据列表，我想做的只是过滤出现在地图视图中的数据。正如此示例在 Mapbox-gl-js 上显示的那样：https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/?q=geojson%20source&size=n_10_n

来自 React-Map-gl 的文档：https://uber.github.io/react-map-gl/docs/api-reference/static-map#getmap 它说您将能够使用 queryRenderedFeatures 作为静态地图的方法，但是我添加它的方式似乎是错误的...而且在线资源并不多：/

任何帮助将不胜感激！ :)

export default function Map() {


  const [data, setData] = useState()
  const [viewport, setViewport] = useState({
    latitude: -28.016666,
    longitude: 153.399994,
    zoom: 12,
    bearing: 0,
    pitch: 0
  })
  const mapRef = useRef()


  useEffect(() => {
    fetch('../data.json')
      .then(res => res.json())
      .then(res => setData(res))
  },[])


  function features () { 
    mapRef.current.queryRenderedFeatures( { layers: ['ramps'] })
  }


  function filterRamps (e) {
    data.features.filter(feature => {
      return feature.properties.material === e.target.value
    })
  }


  const handleClick = () => {
    setData(filterRamps())
  }


  if (!data) {
    return null
  }


  return (
    <div style={{ height: '100%', position: 'relative' }}>
      <MapGL
        ref={mapRef}
        {...viewport}
        width="100%"
        height="100%"
        mapStyle="mapbox://styles/mapbox/dark-v9"
        onViewportChange={setViewport}
        mapboxApiAccessToken={Token}
        queryRenderedFeatures={features}
      >
        <Source type="geojson" data={data}>
          <Layer {...dataLayer} />
        </Source>

      </MapGL>

      <Control
        data={data}
        onClick={handleClick}
      />
    </div>


  )
}

【问题讨论】：

标签： filter react-hooks viewport mapbox-gl-js react-map-gl

【解决方案1】：

你需要这样的东西：

...
const mapRef = useRef()

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

【讨论】：