2

我对 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>


  )
}
4

1 回答 1

1

你需要类似的东西：

...
const mapRef = useRef()

...
<MapGL
    ref={mapRef}
    onClick={e => {
        const features = mapRef.current.queryRenderedFeatures(e.geometry.coordinates, { layers: ['ramps'] })
        console.log(features)
    }}
    ...
/>
于 2021-02-24T10:40:19.747 回答