如何在 React-Mapbox-GL 中获取当前缩放？

Question

如何在 React Mapbox GL 中获取 map 的当前缩放比例？

我已经尝试使用“如何开始”中的示例在Map上使用getZoom方法，但它不起作用。 我有错误 Map.getZoom 不是 function。

编辑================

当我尝试通过 refs 访问它时，我遇到了屏幕截图中的问题。 如何获得 this.state.map.e 其中有我的 getZoom function？

Answer 1

您使用的Map是一个ReactMapboxGl对象，它是mapbox-gl-js的包装。 您要在mapboxgl.Map对象上调用getZoom() 。

要使用原始的Mapbox API的onStyleLoad属性， 回调函数将接收map对象作为第一个参数 ，然后您可以在react-mapbox-gl旁边添加自己的逻辑。 [资源]

因此，您可以从以下位置获取它：

<ReactMapboxGl onStyleLoad={ el => this.map = el } />

然后，您可以在这里使用它：

componentDidMount() {
    const currentZoom = this.map.getZoom();
}

Answer 2

试试这样：

 const [zoom, setZoom] = useState(15); map.current.on('zoom', () => { setZoom(map.current.getZoom()); });