添加图层时,基础地图上的Mapbox Click侦听器失败

时间:2018-12-06 05:25:48

标签: reactjs mapbox

我在react项目中有一个地图,我想在基础地图上使用单击侦听器来查找单击点的坐标。它已经工作了一段时间了。

问题是我使用群集添加了一些图层,其中一些包含单击侦听器,现在在地图上单击任意位置会给我错误消息“已经有一个源ID。”我想我明白为什么-可以点击,但是没有任何层次。

我找不到有关如何使底图成为图层的任何信息,因此无法获取将其传递给点击侦听器的ID。所以我的问题是,如何在仍使用可能也具有点击侦听器的图层的同时将点击侦听器附加到基本地图。

1 个答案:

答案 0 :(得分:0)

那真是太痛苦了!发生的事情是我将一个函数向下传递给包含单击侦听器的组件,而该函数更改了父组件的状态。鉴于这是反应,它导致子组件重新呈现,因此Mapbox出错,因为没有删除源,因此已经有一个具有相同ID的源。

解决方案是包装将源图层和附带图层添加为组件的代码,然后创建包含removeSource(请参阅here)的清理组件,然后在卸载时运行它。我正在使用新的hooks api,因此我正在setLayers钩子中运行useEffect函数,然后从cleanup返回useEffect,但是我敢打赌这个想法可以与componentDidMountcomponentWillUnmount一起使用。